CSS3美化表格

在Web页面开发中,自从有了<div>的出现,大家就在讨论table。就出现了什么时候?如何使用div,什么时候?如何使用table的争论。虽然争论不少,但最后得出的结论是一致的:当你需要在页面中处理与数据时,table是首选之一。

制作一个表格容易,但是要设计一个表,让它爽心悦目,对于前端攻城师来说可是一个挑战——我们不仅需要考虑表格的外观好看,而且要提高用户的体验,让用户方便阅读表格,方便从表格中找到自己需要的数据。这样就需要你开动大脑进行思考,如果你和我一样不想去思考的话,可以参考Red TeamRed介绍的CSS3制作表格的教程——《Feature table design with CSS3

当然你会说,CSS3是强大,但在老式的浏览器中怎么办?我只能说让你的用户在现代浏览器中体验最好的视觉效果,让那些守旧的用户去体验陈旧的美感。说了这么多,今天我们依旧跟着Red来学习——如何使用CSS3创建一个美丽而又爽心悦目的表格。这里我们还使用了jQuery让表格在老式的浏览器下也能运行正常。首先我们一起看一下我们今天要实现的表格效果:

目标

在这篇文章中,你将会看到如何使用CSS3来制作一些很酷而体验又强的表格。

  1. 没有图片的圆角效果
  2. 易于更新——没有多余的样式
  3. 用户体验性强,容易查找数据

HTML Markup

在介绍如何使用CSS3来修饰table之前,我们需要一个table的框架子,下面我们来创建一个普通的table

			<table class="bordered">
			  <thead>
			    <tr>
			        <th>#</th>        
			        <th>IMDB Top 10 Movies</th>
			        <th>Year</th>
			    </tr>
			  </thead>
			  <tbody>
					<tr>
			      <td>1</td>        
			      <td>The Shawshank Redemption</td>
			       <td>1994</td>
			    </tr>        
			    <tr>
			        <td>2</td>         
			        <td>The Godfather</td>
			        <td>1972</td>
			    </tr>
			    <tr>
			        <td>3</td>         
			        <td>The Godfather: Part II</td>
			        <td>1974</td>
			    </tr>    
			    <tr>
			        <td>4</td> 
			        <td>The Good, the Bad and the Ugly</td>
			        <td>1966</td>
			    </tr>		    
				</tbody>
			</table>
		

在这里我们将这个表格设置了一个类名“bordered”,如果你需要创建一个斑马线表格,你只需将上面的类名换成“zebra”。现在有了HTML结构,接着就是使用样式来美化他了,大家一起接着往下看吧。

CSS Code

			<style type="text/css">
			*{margin: 0;padding: 0;}
			body {
				padding: 40px 100px;
			}
			.demo {
			width: 600px;
			margin: 40px auto;
			font-family: 'trebuchet MS', 'Lucida sans', Arial;
			font-size: 14px;
			color: #444;
			}

			table {
				*border-collapse: collapse; /* IE7 and lower */
				border-spacing: 0;
				width: 100%;
			}
			/*========bordered table========*/
			.bordered {
				border: solid #ccc 1px;
				-moz-border-radius: 6px;
				-webkit-border-radius: 6px;
				border-radius: 6px;
				-webkit-box-shadow: 0 1px 1px #ccc;
				-moz-box-shadow: 0 1px 1px #ccc;
				box-shadow: 0 1px 1px #ccc;
			}

			.bordered tr {
				-o-transition: all 0.1s ease-in-out;
				-webkit-transition: all 0.1s
剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/css3/feature-table-design-with-css3

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部