HTML文件(table.html):
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <table> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>城市</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>25</td> <td>北京</td> </tr> <tr> <td>李四</td> <td>30</td> <td>上海</td> </tr> <tr> <td>王五</td> <td>28</td> <td>广州</td> </tr> </tbody> </table> </body> </html>
CSS样式文件(style.css):
table { width: 100%; border-collapse: collapse; margin-bottom: 20px; } th, td { padding: 10px; text-align: left; border-bottom: 1px solid #ddd; } thead { background-color: #f2f2f2; } th { background-color: #4CAF50; color: white; } tbody tr:nth-child(even) { background-color: #f2f2f2; } tbody tr:hover { background-color: #ddd; }
在同一目录下创建一个名为style.css的CSS文件,并将上述CSS样式代码复制到该文件中。然后,将上述HTML代码复制到一个名为table.html的HTML文件中。然后,使用任何支持HTML和CSS的浏览器打开table.html文件,你将看到一个具有样式的漂亮表格。