css實現隔行換色

學習感悟

首先為單數行建立class
之後利用選擇器選擇相應的行就可以了。

不是很優雅的實現方式。。

程式碼實現

<style>
.biao{ 
border:1px solid;
} 
.biao tr.backrow{ 
background-color:yellow; 
} 
</style>


<!--html--> 
<table class="biao" 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> 

參考

W3School線上測試工具 V2