有时候一个表格里面有很多数据，让人看上去很累，也容易看错，这时候，可以通过隔行变色来修饰一下表格，这个用法比较常见，所以单独做一节来演示。表格代码跟上一节比较接近，只是单独加了一行css来控制隔行变色，通过类test来引入样式即可，完整测试代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.allcss{
border-collapse:collapse;
text-align:center;
}
.test{
background-color:#C4F2F7;}
</style>
</head>
<body>
<table width="500" border="1" class="allcss">
<caption>
SEOWHY DEMO 隔行变色CSS示范
</caption>
<tr bgcolor="#51DBE6">
<th scope="col">姓名</th>
<th scope="col">年龄</th>
<th scope="col">分数</th>
</tr>
<tr>
<th scope="row">李彦宏</th>
<td>15</td>
<td>88</td>
</tr>
<tr class="test">
<th scope="row">马云</th>
<td>16</td>
<td>89</td>
</tr>
<tr>
<th scope="row">马化腾</th>
<td>17</td>
<td>87</td>
</tr>
<tr class="test">
<th scope="row">张三</th>
<td>22</td>
<td>95</td>
</tr>
<tr>
<th scope="row">李四</th>
<td>23</td>
<td>96</td>
</tr>
<tr class="test">
<th scope="row">王五</th>
<td>21</td>
<td>98</td>
</tr>
</table>
</body>
</html>
从代码可以看出，隔行变色，在tr标签里面引入test类即可，test的样式在head里面已经写好了对应的背景颜色。
回顶部