CSS隔行換色的表格是一種常見的美化網(wǎng)頁的方法,通過不同的顏色交替顯示表格行,可以讓表格更加美觀易讀。下面是一個基本的CSS隔行換色的表格代碼:
<table> <tr> <th>姓名</th> <th>年齡</th> <th>城市</th> </tr> <tr class="odd"> <td>張三</td> <td>18</td> <td>北京</td> </tr> <tr class="even"> <td>李四</td> <td>22</td> <td>上海</td> </tr> <tr class="odd"> <td>王五</td> <td>25</td> <td>廣州</td> </tr> <tr class="even"> <td>趙六</td> <td>30</td> <td>深圳</td> </tr> </table> <style> tr.odd { background-color: #eee; } tr.even { background-color: #fff; } </style>
上面的代碼使用了類選擇器來分別定義奇數(shù)行和偶數(shù)行的背景色,分別為灰色和白色。在HTML中,我們把奇數(shù)行的tr元素的class屬性設置為"odd",偶數(shù)行的tr元素的class屬性設置為"even",在CSS中使用類選擇器來選擇這些元素并定義它們的背景色。