亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

css美化表格讓其隔行變色顯示

  發(fā)布時(shí)間：2013-10-05 16:11:26   作者：佚名   我要評(píng)論
單一的表格很容易使人感到枯燥，使用變色效果可以使得表格看起來(lái)更加舒適，在本文將為大家介紹下使用css實(shí)現(xiàn)隔行變色顯示，感興趣的朋友可以參考下
在html中常常需要從數(shù)據(jù)庫(kù)中獲取數(shù)據(jù)然后顯示到瀏覽器上，顯示的方式一般是用表格。單一的表格很容易使人感到枯燥，使用變色效果可以使得表格看起來(lái)更加舒適。實(shí)現(xiàn)方法如下

復(fù)制代碼
代碼如下:

/*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">英語(yǔ)</td>
<td class="cen">數(shù)據(jù)結(jié)構(gòu)</td>
<td class="cen">數(shù)據(jù)庫(kù)</td>
<td class="cen">線性代數(shù)</td>
<td class="cen">離散數(shù)學(xué)</td>
<td class="cen">操作系統(tǒng)</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">椰子船長(zhǎng)</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>

效果如圖：

相關(guān)文章

最新評(píng)論