HTML5中交替变换表格的行颜色
下面的例子展示了你如何交替展示表格的行的颜色。使用CSS3中的 nth-child(event)和nth-child(odd)， CSS3的伪选择器。
?
<!DOCTYPE html><html><head> <title></title> <style type="text/css"> #table1 { width: 100%; } thead { background-color: black; color: white; text-indent: 14px; text-align: left; } tbody tr:nth-child(odd) { background-color: rgba(0, 255, 0, 0.1); /* green, 10% alpha */ } tbody tr:nth-child(even) { background-color: rgba(255, 0, 0, 0.3); /* red, 30% alpha */ } </style></head><body> <table id="table1"> <thead> <tr> <th>Column 1</th> <th>Column 2</th> </tr> </thead> <tbody> <tr> <td>Row 1, Column 1</td> <td>Row 1, Column 2</td> </tr> <tr> <td>Row 2, Column 1</td> <td>Row 2, Column 2</td> </tr> <tr> <td>Row 3, Column 1</td> <td>Row 3, Column 2</td> </tr> <tr> <td>Row 4, Column 1</td> <td>Row 4, Column 2</td> </tr> <tr> <td>Row 5, Column 1</td> <td>Row 5, Column 2</td> </tr> <tr> <td>Row 6, Column 1</td> <td>Row 6, Column 2</td> </tr> <tr> <td>Row 7, Column 1</td> <td>Row 7, Column 2</td> </tr> <tr> <td>Row 8, Column 1</td> <td>Row 8, Column 2</td> </tr> </tbody> </table> </body></html>?
源码下载：
alternating-row-colors-in-a-table-in-html5.zip
?