- 隔行換色
當表格行數較多的時候，每一行都是同一種顏色不方便閱讀。通常的解決方法是采用隔行變色，使得奇數行和偶數行的顏色背景不一樣，方便閱讀。這種效果非常常見，實現起來也非常簡單，給奇數行和偶數行分別設置不同的選擇器，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>
~~~
