首页请使用html+js为我一个好看的表格，要求单双行背景颜色不一样，一定要好看美观

请使用html+js为我一个好看的表格，要求单双行背景颜色不一样，一定要好看美观

时间: 2024-02-18 17:01:08 浏览: 83

好的，以下是一个简单的HTML+JS表格，满足您的要求。您可以根据需要添加更多的行和列，修改颜色和样式。 ```html <!DOCTYPE html> <html> <head> <title>美观的表格</title> <style> table { border-collapse: collapse; width: 100%; margin: 50px auto; } th, td { padding: 10px; text-align: left; border-bottom: 1px solid #ddd; } th { background-color: #f2f2f2; color: #333; font-weight: bold; border-right: 1px solid #ddd; } tr:nth-child(even) td { background-color: #f2f2f2; } tr:nth-child(odd) td { background-color: #fff; } </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>28</td> <td>男</td> <td>广州市天河区</td> </tr> <tr> <td>赵六</td> <td>27</td> <td>女</td> <td>深圳市南山区</td> </tr> <tr> <td>小明</td> <td>22</td> <td>男</td> <td>成都市锦江区</td> </tr> <tr> <td>小红</td> <td>24</td> <td>女</td> <td>重庆市江北区</td> </tr> </tbody> </table> </body> </html> ``` 这个表格中，单数行的背景颜色为白色，双数行的背景颜色为灰色。表格头部和单元格都有底部边框，表格头部的背景颜色为浅灰色，文字加粗。

阅读全文