HTML表格的样式可以通过CSS(层叠样式表)来定义,以下是一个简单的例子,展示了如何为HTML表格添加样式:
<!DOCTYPE html> <html> <head> <style> table { width: 100%; border-collapse: collapse; } th, td { border: 1px solid black; padding: 8px; text-align: left; } th { background-color: #f2f2f2; } tr:nth-child(even) { background-color: #f9f9f9; } </style> </head> <th>邮箱</th> <th>年龄</th> </tr> <tr> <td>张三</td> <td>zhangsan@example.com</td> <td>30</td> </tr> <tr> <td>李四</td> <td>lisi@example.com</td> <td>25</td> </tr> </table> </body> </html>
在这个例子中,我们定义了一个简单的样式表,用于控制表格的外观,以下是一些关键点的解释:
* `table { width: 100%; border-collapse: collapse; }`:设置表格宽度为100%,并且合并相邻的边框。
* `th, td { border: 1px solid black; padding: 8px; text-align: left; }`:为表头和单元格设置边框、内边距和文本对齐方式。
* `th { background-color: #f2f2f2; }`:设置表头背景颜色。
* `tr:nth-child(even) { background-color: #f9f9f9; }`:为偶数行设置背景颜色,以提供视觉上的区分。
你可以根据需要修改这些样式,或者添加更多的样式来控制表格的外观。