html表格样式

admin 43 0

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; }`:为偶数行设置背景颜色,以提供视觉上的区分。

你可以根据需要修改这些样式,或者添加更多的样式来控制表格的外观。