首页html表格，显示单双行，单行为蓝色，双行为黄色

html表格，显示单双行，单行为蓝色，双行为黄色

时间: 2024-05-27 12:14:59 浏览: 60

请参考以下代码： ```html <!DOCTYPE html> <html> <head> <title>HTML表格显示单双行不同颜色</title> <style type="text/css"> table { border-collapse: collapse; width: 100%; } th, td { padding: 8px; text-align: left; border: 1px solid #ddd; } tr:nth-child(even) { background-color: #f2f2f2; } tr:nth-child(odd) { background-color: #c0e4fc; } </style> </head> <body> <table> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> <th>职业</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>25</td> <td>男</td> <td>工程师</td> </tr> <tr> <td>李四</td> <td>30</td> <td>女</td> <td>设计师</td> </tr> <tr> <td>王五</td> <td>40</td> <td>男</td> <td>销售经理</td> </tr> <tr> <td>赵六</td> <td>28</td> <td>女</td> <td>市场专员</td> </tr> </tbody> </table> </body> </html> ``` 效果图如下： ![效果图](https://i.imgur.com/3qU6JgH.png)

阅读全文