- 隔行换色
当表格行数较多的时候，每一行都是同一种颜色不方便阅读。通常的解决方法是采用隔行变色，使得奇数行和偶数行的颜色背景不一样，方便阅读。这种效果非常常见，实现起来也非常简单，给奇数行和偶数行分别设置不同的选择器，css设置不同的背景颜色即可.
-
细线边框
表格默认边框比较粗，可以给表格设置一个背景颜色，cellspacing设为1像素，td颜色设为白色覆盖掉背景颜色，cellspacing空出1像素实现细线边框样式.
-
代码
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML表格隔行换色实例</title>
<style type="text/css">
body{
width: 960px;
margin:0 auto;
text-align: center;
font-family: 微软雅黑;
}
.even{
background-color: #8DEEEE;
}
.tb_td{
background-color:#ffffff;
}
</style>
</head>
<body>
<H1>HTML表格隔行换色实例</H1>
<table width="90%" cellspacing="1px" cellpadding="5px">
<tr class="tb_head" >
<th>学号</th>
<th>姓名</th>
<th>班级</th>
<th>性别</th>
</tr>
<tr class="old">
<td>1108140119</td>
<td>王子</td>
<td>计算机111</td>
<td>男</td>
</tr>
<tr class="even">
<td>1108140119</td>
<td>王子</td>
<td>计算机111</td>
<td>男</td>
</tr>
<tr class="old">
<td>1108140119</td>
<td>王子</td>
<td>计算机111</td>
<td>男</td>
</tr>
<tr class="even">
<td>1108140119</td>
<td>王子</td>
<td>计算机111</td>
<td>男</td>
</tr>
<tr class="old">
<td>1108140119</td>
<td>王子</td>
<td>计算机111</td>
<td>男</td>
</tr>
<tr class="even">
<td>1108140119</td>
<td>王子</td>
<td>计算机111</td>
<td>男</td>
</tr>
<tr class="old">
<td>1108140119</td>
<td>王子</td>
<td>计算机111</td>
<td>男</td>
</tr>
<tr class="even">
<td>1108140119</td>
<td>王子</td>
<td>计算机111</td>
<td>男</td>
</tr>
<tr class="old">
<td>1108140119</td>
<td>王子</td>
<td>计算机111</td>
<td>男</td>
</tr>
<tr class="even">
<td>1108140119</td>
<td>王子</td>
<td>计算机111</td>
<td>男</td>
</tr>
<tr class="old">
<td>1108140119</td>
<td>王子</td>
<td>计算机111</td>
<td>男</td>
</tr>
<tr class="even">
<td>1108140119</td>
<td>王子</td>
<td>计算机111</td>
<td>男</td>
</tr>
<tr class="old">
<td>1108140119</td>
<td>王子</td>
<td>计算机111</td>
<td>男</td>
</tr>
<tr class="even">
<td>1108140119</td>
<td>王子</td>
<td>计算机111</td>
<td>男</td>
</tr>
<tr class="old">
<td>1108140119</td>
<td>王子</td>
<td>计算机111</td>
<td>男</td>
</tr>
<tr class="even">
<td>1108140119</td>
<td>王子</td>
<td>计算机111</td>
<td>男</td>
</tr>
<tr class="old">
<td>1108140119</td>
<td>王子</td>
<td>计算机111</td>
<td>男</td>
</tr>
<tr class="even">
<td>1108140119</td>
<td>王子</td>
<td>计算机111</td>
<td>男</td>
</tr>
<tr class="old">
<td>1108140119</td>
<td>王子</td>
<td>计算机111</td>
<td>男</td>
</tr>
<tr class="even">
<td>1108140119</td>
<td>王子</td>
<td>计算机111</td>
<td>男</td>
</tr>
<tr class="old">
<td>1108140119</td>
<td>王子</td>
<td>计算机111</td>
<td>男</td>
</tr>
<tr class="even">
<td>1108140119</td>
<td>王子</td>
<td>计算机111</td>
<td>男</td>
</tr>
<tr class="old">
<td>1108140119</td>
<td>王子</td>
<td>计算机111</td>
<td>男</td>
</tr>
<tr class="even">
<td>1108140119</td>
<td>王子</td>
<td>计算机111</td>
<td>男</td>
</tr>
</table>
<H1>细线表格样式</H1>
<table bgcolor="#cccccc" width="90%" cellpadding="10" cellspacing="1px" id="table2" >
<tr>
<td class="tb_td">1108140119</td>
<td class="tb_td">王子</td>
<td class="tb_td">计算机111</td>
<td class="tb_td">男</td>
</tr>
<tr>
<td class="tb_td">1108140119</td>
<td class="tb_td">王子</td>
<td class="tb_td">计算机111</td>
<td class="tb_td">男</td>
</tr>
<tr>
<td class="tb_td">1108140119</td>
<td class="tb_td">王子</td>
<td class="tb_td">计算机111</td>
<td class="tb_td">男</td>
</tr>
<tr>
<td class="tb_td">1108140119</td>
<td class="tb_td">王子</td>
<td class="tb_td">计算机111</td>
<td class="tb_td">男</td>
</tr>
<tr>
<td class="tb_td">1108140119</td>
<td class="tb_td">王子</td>
<td class="tb_td">计算机111</td>
<td class="tb_td">男</td>
</tr>
<tr>
<td class="tb_td">1108140119</td>
<td class="tb_td">王子</td>
<td class="tb_td">计算机111</td>
<td class="tb_td">男</td>
</tr>
<tr>
<td class="tb_td">1108140119</td>
<td class="tb_td">王子</td>
<td class="tb_td">计算机111</td>
<td class="tb_td">男</td>
</tr>
<tr>
<td class="tb_td">1108140119</td>
<td class="tb_td">王子</td>
<td class="tb_td">计算机111</td>
<td class="tb_td">男</td>
</tr>
<tr>
<td class="tb_td">1108140119</td>
<td class="tb_td">王子</td>
<td class="tb_td">计算机111</td>
<td class="tb_td">男</td>
</tr>
<tr>
<td class="tb_td">1108140119</td>
<td class="tb_td">王子</td>
<td class="tb_td">计算机111</td>
<td class="tb_td">男</td>
</tr>
<tr>
<td class="tb_td">1108140119</td>
<td class="tb_td">王子</td>
<td class="tb_td">计算机111</td>
<td class="tb_td">男</td>
</tr>
<tr>
<td class="tb_td">1108140119</td>
<td class="tb_td">王子</td>
<td class="tb_td">计算机111</td>
<td class="tb_td">男</td>
</tr><tr>
<td class="tb_td">1108140119</td>
<td class="tb_td">王子</td>
<td class="tb_td">计算机111</td>
<td class="tb_td">男</td>
</tr>
<tr>
<td class="tb_td">1108140119</td>
<td class="tb_td">王子</td>
<td class="tb_td">计算机111</td>
<td class="tb_td">男</td>
</tr>
<tr>
<td class="tb_td">1108140119</td>
<td class="tb_td">王子</td>
<td class="tb_td">计算机111</td>
<td class="tb_td">男</td>
</tr>
<tr>
<td class="tb_td">1108140119</td>
<td class="tb_td">王子</td>
<td class="tb_td">计算机111</td>
<td class="tb_td">男</td>
</tr>
<tr>
<td class="tb_td">1108140119</td>
<td class="tb_td">王子</td>
<td class="tb_td">计算机111</td>
<td class="tb_td">男</td>
</tr>
<tr>
<td class="tb_td">1108140119</td>
<td class="tb_td">王子</td>
<td class="tb_td">计算机111</td>
<td class="tb_td">男</td>
</tr>
</table>
</body>
</html>
~~~
