在网页设计时，当表格的行和列比较多时，表格如果采用相同的背景颜色，用户就会感到凌乱，那么可以设置隔行变色的效果，使奇数行和偶数行背景颜色不同，就能使表格看起来清晰而一目了然，从而达到高效浏览的目的。
【操作步骤】第1步，新建文档，保存为index.html。构建网页结构，在<body>标签中输入以下内容：
<table id="mytable" cellspacing="0" summary="财经2000级毕业生通讯录">
<caption> 财经2000级毕业生通讯录 </caption>
<tr>
<th scope="col" abbr="Configurations" >姓名</th>
<th scope="col" abbr="Dual 1.8">出生日期</th>
<th scope="col" abbr="Dual 2">电话</th>
<th scope="col" abbr="Dual 2.5">单位</th>
</tr>
<tr>
<th scope="row" abbr="Model" class="spec">王明</th><td>1978.1.4</td>
<td>137563443</td>
<td>中国铁道部</td>
</tr>
<tr>
<th scope="row" abbr="G5 Processor" class="specalt">李丽</th>
<td class="alt">1977.5.7</td>
<td class="alt">13893212</td>
<td class="alt">北京市朝阳区街道办事处</td>
</tr>
<tr>
<th scope="row" abbr="Frontside bus" class="spec">刘丽敏</th>
<td>1978.4.23</td>
<td>13345678</td>
<td>北京市11 中学</td>
</tr>
<tr>
<th scope="row" abbr="L2 Cache" class="specalt">李松</th>
<td class="alt">1977.11.31</td>
<td class="alt">139432567</td>
<td class="alt">北京东城区防汛办</td>
</tr>
<tr>
<th scope="row" abbr="Frontside bus" class="spec">赵艳</th>
<td>1978.7.3</td>
<td>1355613234</td>
<td>北京深华新股份有限公司</td>
</tr>
<tr>
<th scope="row" abbr="L2 Cache" class="specalt">杜征</th>
<td class="alt">1978.6.19</td>
<td class="alt">1368395322</td>
<td class="alt">酷6网</td>
</tr>
<tr>
<th scope="row" abbr="Frontside bus" class="spec">王朋</th>
<td>1978.9.22</td>
<td>13567890</td>
<td>adobe公司</td>
</tr>
<tr>
<th scope="row" abbr="L2 Cache" class="specalt">杨小东</th>
<td class="alt">1978.1.3</td>
<td class="alt">1354983611</td>
<td class="alt">朝阳区将台东路乐天玛特</td>
</tr>
<tr>
<th scope="row" abbr="Frontside bus" class="spec">杨秀燕</th>
<td>1977.12.3</td>
<td>1354353623</td>
<td>朝阳区教委</td>
</tr>
<tr>
<th scope="row" abbr="L2 Cache" class="specalt">张小光</th>
<td class="alt">1978.10.24</td>
<td class="alt">134567831</td>
<td class="alt">铁路第二中学</td>
</tr></table>
以上代码中，将奇数行名称定义为spec类，偶数行名称定义为specalt类，并通过<td class="alt">定义了偶数行中的单元格，此时的显示效果可以看到，表格的基本结构已经搭建好了，但是由于在网页设计时没有进行CSS样式设置，界面中只把数据罗列起来，没有任何修饰。
第2步，定义网页基本属性、表格#mytable样式以及表格标题样式。在<head>标签内添加<styletype="text/css">标签，定义一个内部样式表，然后输入下面样式：
body { background: #E6EAE9; } /*网页基本样式*/#mytable { /*表格样式*/
width: 700px; /*表格宽度*/
padding: 0;
margin: 0;
border: 1px solid #C1DAD7; /*表格边框*/}caption {/*设置表格标题*/
padding: 0 0 5px 0;
text-align: center; /*水平居中*/
font-size: 30px; /*字体大小*/
font-weight: bold; /*字体加粗*/}
在以上代码中，通过首先定义了页面的背景颜色，在#mytable中设置了表格的宽度为700px，并为其添加了表格边框。
第3步，定义单元格的共有属性。
th {/*表格名称样式*/color: #4f6b72; /*表格名称的字体颜色*/
letter-spacing: 2px; /*字间距*/
text-align: center; /*水平居中*/
padding: 6px 6px 6px 12px; /*名称单元格的内边距*/
background: #CAE8EA; /*名称单元格的背景颜色*/
border: 1px solid #C1DAD7; /*名称单元格的边框*/}td { /*表格单元格样式*/
background: #fff; /*单元格背景色*/
padding: 6px 6px 6px 12px;
color: #4f6b72;
text-align: center;
border: 1px solid #C1DAD7; /*单元格边框*/}
在以上代码中，定义了表格中所有单元格的共有样式。
第4步，实现网页设计中表格的隔行变色。
.spec { /*奇数行名称样式*/ background: #fff; /*背景颜色*/ }
.specalt { /*偶数行名称样式*/
background: #f5fafa;
color: #797268; /*字体颜色*/}
.alt {/*偶数行单元格样式*/
background: #F5FAFA; color: #797268;}
以上代码中，首先通过spec设置了奇数行中<th>标签的样式，通过specalt设置了偶数行中<th>标签的样式，最后在alt中设置了偶数单元格，也就是<td>标签的样式。
提示：在CSS中，设置隔行变色十分简单，主要在于给奇数行和偶数行设置不同的背景颜色，为奇数行和偶数行的<th>标签添加相应的类以及为单元格<td>标签添加相应的类，代码如下：<th scope="row" class="spec">th scope="row" class="specalt"><td class="alt">然后在CSS样式表中对奇数行和偶数行进行单独的样式设置，主要是在网站建设时配合整体设计协调的基础上，改变背景颜色、字体颜色等。
当前文章标题：如何在网页设计中设计清晰、醒目的表格
当前URL：http://www.lyjtt.cn/news/wzzz/3118.html
上一篇：案例实战：美化表格
下一篇：在网页设计中设计动态效果的表格
