HTML 表格格式化

HTML 表格是网页设计中常见的组件之一，用于展示数据和信息。正确格式化 HTML 表格可以让数据更容易阅读和理解，并增强用户体验。

HTML 表格基础

在 HTML 中，表格由 <table> 元素定义，并由一系列行和列组成。每行由 <tr> 元素定义，每列由 <td> 元素定义。表头通常由 <th> 元素定义，并包含在 <thead> 元素中。

以下是一个基本的 HTML 表格示例：

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>20</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>25</td>
      <td>女</td>
    </tr>
  </tbody>
</table>

表格样式

默认情况下，HTML 表格没有样式，只有基本的边框。通过 CSS 样式表可以对表格进行样式设计，例如改变表格颜色、边框大小、字体大小等等。

以下是一个简单的 CSS 样式表示例，用于给 HTML 表格添加样式：

table {
  border-collapse: collapse;
  width: 100%;
}

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

th {
  background-color: #f2f2f2;
  font-size: 14px;
  font-weight: bold;
}

表格布局

HTML 表格的布局由表格行和列数决定。可以通过增加或删除行和列，改变单元格大小和合并单元格来创建不同的表格布局。

以下是一个展示表格布局的示例：

<table>
  <thead>
    <tr>
      <th rowspan="2">姓名</th>
      <th colspan="2">年龄</th>
    </tr>
    <tr>
      <th>最小值</th>
      <th>最大值</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>20</td>
      <td>30</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>25</td>
      <td>35</td>
    </tr>
  </tbody>
</table>

在上述示例中，使用了 rowspan 和 colspan 属性来合并单元格。

总结

HTML 表格是展示数据和信息的重要组件，正确的格式化和样式设计可以增强用户体验和数据可读性。可以通过 CSS 样式表和表格布局来进行样式和布局设计，以实现不同的表格效果。