css美化表格让其隔行变色显示

css美化表格让其隔⾏变⾊显⽰
在html中常常需要从数据库中获取数据然后显⽰到浏览器上，显⽰的⽅式⼀般是⽤表格。

单⼀的表格很容易使⼈感到枯燥，使⽤变⾊效果可以使得表格看起来更加舒适。

实现⽅法如下
复制代码
代码如下:
/*css*/
/*表格修饰*/
.tablelist{
border:1px solid #0058a3;
font-family:"Microsoft YaHei",Arial,Helvetica,sans-serif;
border-collapse:collapse;
border-spacing:1pt;
background-color:#eaf5ff;
font-size:13px
}
.tablelist tr.backrow{
background-color:#c7e5ff;
}
.tablelist td.cen{
text-align:center;
}
<!--html-->
<table class="tablelist" border="1" align="center" width = "80%" >
<tr><!-- th 加粗，居中-->
<td class="cen">姓名</td>
<td class="cen">英语</td>
<td class="cen">数据结构</td>
<td class="cen">数据库</td>
<td class="cen">线性代数</td>
<td class="cen">离散数学</td>
<td class="cen">操作系统</td>
</tr>
<tr class="backrow">
<td class="cen">影魔</td>
<td class="cen">78</td>
<td class="cen">77</td>
<td class="cen">80</td>
<td class="cen">90</td>
<td class="cen">12</td>
<td class="cen">55</td>
</tr>
<tr>
<td class="cen">祈求者</td>
<td class="cen">43</td>
<td class="cen">23</td>
<td class="cen">78</td>
<td class="cen">67</td>
<td class="cen">78</td>
<td class="cen">73</td>
</tr>
<tr class="backrow">
<td class="cen">暗夜游侠</td>
<td class="cen">78</td>
<td class="cen">56</td>
<td class="cen">55</td>
<td class="cen">73</td>
<td class="cen">83</td>
<td class="cen">74</td>
</tr>
<tr>
<td class="cen">赏⾦猎⼈</td> <td class="cen">94</td>
<td class="cen">35</td>
<td class="cen">74</td>
<td class="cen">96</td>
<td class="cen">32</td>
<td class="cen">67</td>
</tr>
<tr class="backrow">
<td class="cen">椰⼦船长</td> <td class="cen">76</td>
<td class="cen">78</td>
<td class="cen">54</td>
<td class="cen">45</td>
<td class="cen">56</td>
<td class="cen">67</td>
</tr>
<tr>
<td class="cen">暗夜刺客</td> <td class="cen">78</td>
<td class="cen">56</td>
<td class="cen">67</td>
<td class="cen">45</td>
<td class="cen">90</td>
<td class="cen">67</td>
</tr>
<tr class="backrow">
<td class="cen">骷髅王</td> <td class="cen">78</td>
<td class="cen">56</td>
<td class="cen">44</td>
<td class="cen">56</td>
<td class="cen">67</td>
<td class="cen">34</td>
</tr>
<tr>
<td class="cen">⼭岭巨⼈</td> <td class="cen">56</td>
<td class="cen">76</td>
<td class="cen">45</td>
<td class="cen">34</td>
<td class="cen">76</td>
<td class="cen">78</td>
</tr>
</table>
效果如图：。