在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;
}
<>
<table border="1" align="center" width = "80%" >
<tr><>
<td>姓名</td>
<td>英语</td>
<td>数据结构</td>
<td>数据库</td>
<td>线性代数</td>
<td>离散数学</td>
<td>操作系统</td>
</tr>
<tr>
<td>影魔</td>
<td>78</td>
<td>77</td>
<td>80</td>
<td>90</td>
<td>12</td>
<td>55</td>
</tr>
<tr>
<td>祈求者</td>
<td>43</td>
<td>23</td>
<td>78</td>
<td>67</td>
<td>78</td>
<td>73</td>
</tr>
<tr>
<td>暗夜游侠</td>
<td>78</td>
<td>56</td>
<td>55</td>
<td>73</td>
<td>83</td>
<td>74</td>
</tr>
<tr>
<td>赏金猎人</td>
<td>94</td>
<td>35</td>
<td>74</td>
<td>96</td>
<td>32</td>
<td>67</td>
</tr>
<tr>
<td>椰子船长</td>
<td>76</td>
<td>78</td>
<td>54</td>
<td>45</td>
<td>56</td>
<td>67</td>
</tr>
<tr>
<td>暗夜刺客</td>
<td>78</td>
<td>56</td>
<td>67</td>
<td>45</td>
<td>90</td>
<td>67</td>
</tr>
<tr>
<td>骷髅王</td>
<td>78</td>
<td>56</td>
<td>44</td>
<td>56</td>
<td>67</td>
<td>34</td>
</tr>
<tr>
<td>山岭巨人</td>
<td>56</td>
<td>76</td>
<td>45</td>
<td>34</td>
<td>76</td>
<td>78</td>
</tr>
</table>
效果如图：
【css美化表格让其隔行变色显示】相关文章：
★ 表格颜色渐变效果