在网页中，表格是一种常用的数据展示方式，如下面的实例就是一个收支数据的表格。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>table2n</title></head><body><style>table {margin: 30px auto;border: #aaa 4px double;border-collapse: separate;border-spacing: 0px }td,th {padding: 5px;text-align: center;border-color: #ddd;border-width: 1px;border-style: solid}</style><table><tr><th>月份</th><th>理财</th><th>工资</th> <th>稿费</th><th>总收入</th><th>生活</th><th>购物</th><th>话费</th><th>交通</th><th>总支出</th></tr><tr><td>一月</td><td>100</td><td>200</td><td>400</td><td>700</td><td>200</td><td>500</td><td>100</td><td>200</td><td>1000</td></tr><tr><td>二月</td><td>300</td><td>400</td><td>100</td><td>800</td><td>50</td><td>70</td><td>200</td><td>30</td><td>350</td></tr><tr><td>三月</td><td>20</td><td>1000</td><td>200</td><td>1220</td><td>130</td><td>92</td><td>20</td><td>43</td><td>285</td></tr><tr><td>四月</td><td>125</td><td>72</td><td>128</td><td>325</td><td>42</td><td>13</td><td>20</td><td>200</td><td>275</td></tr><tr><td>五月</td><td>100</td><td>200</td><td>400</td><td>700</td><td>200</td><td>500</td><td>100</td><td>200</td><td>1000</td></tr><tr><td>六月</td><td>300</td><td>400</td><td>100</td><td>800</td><td>50</td><td>70</td><td>200</td><td>30</td><td>350</td></tr><tr><td>七月</td><td>20</td><td>1000</td><td>200</td><td>1220</td><td>130</td><td>92</td><td>20</td><td>43</td><td>285</td></tr><tr><td>八月</td><td>125</td><td>72</td><td>128</td><td>325</td><td>42</td><td>13</td><td>20</td><td>200</td><td>275</td></tr></table></body></html>
正常情况下即使设置了边框样式和颜色，对于数据的阅读还是不友好的，尤其是行数特别多的时候，很容易看错。
最常用的方法就是对表格数据进行深浅不同的填色，实现隔行变化的显示，这种效果也称作“斑马纹”。
利用CSS的子过滤器:nth-child（CSS 选择器）配合odd或even实现奇偶行的背景色变化。
tr:nth-child(even) {background: #f1f1f1;}
当然css的强大之处还在于，可以对表格实现任意行隔行变色
tr:nth-child(3n-1) {background: rgb(255, 0, 255);}tr:nth-child(3n) {background: rgb(255, 255, 0);}tr:nth-child(3n+1) {background: rgb(0, 255, 255);}
也可以对标题行单独设置
tr:nth-child(1) {background: rgb(255, 255, 255);}
