css美化表格让其隔行变色显示_ Div+Css教程-查字典教程网
css美化表格让其隔行变色显示
css美化表格让其隔行变色显示
发布时间:2017-01-07 来源:查字典编辑
摘要:在html中常常需要从数据库中获取数据然后显示到浏览器上,显示的方式一般是用表格。单一的表格很容易使人感到枯燥,使用变色效果可以使得表格看起...

在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>

效果如图:

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新 Div+Css教程学习
    热门 Div+Css教程学习
    网页设计子分类