首页用html5结合CSS3做一个五行六列的表格；设置表头蓝色，字体白色；奇数行背景黄色，偶数行背景绿色；

用html5结合CSS3做一个五行六列的表格；设置表头蓝色，字体白色；奇数行背景黄色，偶数行背景绿色；

时间: 2024-03-02 09:53:17 浏览: 61

好的，下面是代码实现： ```html <!DOCTYPE html> <html> <head> <title>表格</title> <style> table { border-collapse: collapse; width: 100%; } th, td { border: 2px solid black; padding: 8px; text-align: center; font-size: 18px; } th { background-color: blue; color: white; } tr:nth-child(odd) { background-color: yellow; } tr:nth-child(even) { background-color: green; } </style> </head> <body> <table> <thead> <tr> <th>列1</th> <th>列2</th> <th>列3</th> <th>列4</th> <th>列5</th> <th>列6</th> </tr> </thead> <tbody> <tr> <td>行1列1</td> <td>行1列2</td> <td>行1列3</td> <td>行1列4</td> <td>行1列5</td> <td>行1列6</td> </tr> <tr> <td>行2列1</td> <td>行2列2</td> <td>行2列3</td> <td>行2列4</td> <td>行2列5</td> <td>行2列6</td> </tr> <tr> <td>行3列1</td> <td>行3列2</td> <td>行3列3</td> <td>行3列4</td> <td>行3列5</td> <td>行3列6</td> </tr> <tr> <td>行4列1</td> <td>行4列2</td> <td>行4列3</td> <td>行4列4</td> <td>行4列5</td> <td>行4列6</td> </tr> <tr> <td>行5列1</td> <td>行5列2</td> <td>行5列3</td> <td>行5列4</td> <td>行5列5</td> <td>行5列6</td> </tr> </tbody> </table> </body> </html> ``` 这样就能实现一个五行六列的表格，表头为蓝色，字体为白色，奇数行背景为黄色，偶数行背景为绿色。

阅读全文