表格样式_HTML 5基础教程

表格样式

表格是HTML中常用的元素之一，用于展示数据和信息。在HTML 5中，表格标签有一些新的属性和功能，同时也支持CSS样式来对表格进行样式设置。

下面是一个基础的HTML 5表格的示例：

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
  </tr>
</table>

在上面的例子中，<table>标签用来定义表格，<tr>标签用来定义表格的行，<th>标签用来定义表头单元格，<td>标签用来定义数据单元格。

表格样式可以通过CSS来进行设置，以下是一些常见的表格样式设置：

设置表格的边框样式：

table {
  border-collapse: collapse;
  border: 1px solid #ccc;
}

设置表头单元格和数据单元格的样式：

th, td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: center;
}

设置表头的背景颜色和文字颜色：

th {
  background-color: #f2f2f2;
  color: #333;
}

设置奇偶行的背景颜色：

tr:nth-child(odd) {
  background-color: #f9f9f9;
}

通过以上的样式设置，可以让表格更加美观和易读。当然，还可以根据实际需求对表格进行更多的样式设置，比如调整文字大小、字体等。

希望上面的内容对您有帮助，如果有任何问题，请随时提问。