跳到主要内容

HTML 表格分组

在HTML中，表格是展示数据的常用方式。为了更好地组织和理解表格内容，HTML提供了表格分组功能。通过使用<thead>、<tbody>和<tfoot>标签，我们可以将表格内容分为表头、表体和表尾三部分。这不仅使表格更具语义化，还能提升代码的可读性和维护性。

表格分组的基本结构​

一个典型的HTML表格分组结构如下：

html
<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>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">总计：2人</td>
    </tr>
  </tfoot>
</table>

输出效果​

姓名年龄城市
张三25北京
李四30上海
总计：2人
备注

<thead>、<tbody>和<tfoot>标签的顺序并不影响表格的显示顺序。浏览器会自动将<thead>放在顶部，<tfoot>放在底部，<tbody>放在中间。

逐步讲解​

1. <thead> 标签​

<thead>标签用于定义表格的表头部分。通常包含表格的标题行（<th>标签）。表头部分在表格的顶部显示。

html
<thead>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>城市</th>
  </tr>
</thead>

2. <tbody> 标签​

<tbody>标签用于定义表格的主体部分。包含表格的主要数据行（<tr>标签）。一个表格可以有多个<tbody>标签，用于将数据分组。

html
<tbody>
  <tr>
    <td>张三</td>
    <td>25</td>
    <td>北京</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
    <td>上海</td>
  </tr>
</tbody>

3. <tfoot> 标签​

<tfoot>标签用于定义表格的页脚部分。通常包含表格的总结行或脚注。页脚部分在表格的底部显示。

html
<tfoot>
  <tr>
    <td colspan="3">总计：2人</td>
  </tr>
</tfoot>
提示

colspan属性用于合并单元格。在上面的例子中，colspan="3"表示该单元格横跨3列。

实际应用场景​

场景1：数据分组​

假设你有一个包含多个部门员工信息的表格，你可以使用多个<tbody>标签将不同部门的员工信息分组显示。

html
<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>部门</th>
      <th>职位</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>技术部</td>
      <td>前端开发</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>技术部</td>
      <td>后端开发</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>王五</td>
      <td>市场部</td>
      <td>市场经理</td>
    </tr>
    <tr>
      <td>赵六</td>
      <td>市场部</td>
      <td>市场专员</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">总计：4人</td>
    </tr>
  </tfoot>
</table>

场景2：复杂表格​

在复杂的表格中，使用<thead>、<tbody>和<tfoot>标签可以使表格结构更加清晰，便于维护和样式调整。

html
<table>
  <thead>
    <tr>
      <th>产品</th>
      <th>价格</th>
      <th>库存</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>手机</td>
      <td>¥1999</td>
      <td>100</td>
    </tr>
    <tr>
      <td>平板</td>
      <td>¥2999</td>
      <td>50</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">总计库存</td>
      <td>150</td>
    </tr>
  </tfoot>
</table>

总结​

通过使用<thead>、<tbody>和<tfoot>标签，我们可以将HTML表格内容进行逻辑分组，使表格更具语义化和可读性。这对于复杂表格的维护和样式调整非常有帮助。

附加资源与练习​

  • 练习1：创建一个包含多个<tbody>标签的表格，将不同类别的商品分组显示。
  • 练习2：尝试使用colspan和rowspan属性合并单元格，观察表格的变化。
警告

在使用colspan和rowspan时，务必确保合并后的单元格不会破坏表格的结构。

希望这篇内容能帮助你更好地理解和使用HTML表格分组功能。继续练习，你将掌握更多HTML表格的高级技巧！