HTML表格分组[编辑 | 编辑源代码]

HTML表格分组是一种通过结构化标记将表格内容划分为逻辑部分的技术，可显著提升大型表格的可读性和语义化表现。W3C规范提供了三种核心分组元素：<thead>（表头）、<tbody>（表体）和<tfoot>（表尾）。

基本概念[编辑 | 编辑源代码]

表格分组通过以下方式增强表格功能：

语义分层：明确区分标题、数据主体和汇总区域
样式控制：允许对不同分组应用独立CSS样式
打印优化：确保表头/表尾在分页打印时重复出现
无障碍访问：帮助屏幕阅读器理解表格结构

分组元素结构[编辑 | 编辑源代码]

标准分组结构如下：

详细语法[编辑 | 编辑源代码]

表头分组 (<thead>)[编辑 | 编辑源代码]

定义表格的标题行，通常包含列标签：

<table>
  <thead>
    <tr>
      <th>月份</th>
      <th>销售额</th>
    </tr>
  </thead>
</table>

表体分组 (<tbody>)[编辑 | 编辑源代码]

包含主要数据内容，一个表格可包含多个tbody实现分段：

<tbody>
  <tr>
    <td>一月</td>
    <td>$5,000</td>
  </tr>
  <tr>
    <td>二月</td>
    <td>$6,200</td>
  </tr>
</tbody>

表尾分组 (<tfoot>)[编辑 | 编辑源代码]

放置汇总信息，浏览器会始终将其渲染在tbody之后：

<tfoot>
  <tr>
    <td>总计</td>
    <td>$11,200</td>
  </tr>
</tfoot>

完整示例[编辑 | 编辑源代码]

<table border="1">
  <thead style="background-color: #f2f2f2;">
    <tr>
      <th>产品ID</th>
      <th>名称</th>
      <th>库存</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>P1001</td>
      <td>机械键盘</td>
      <td>45</td>
    </tr>
    <tr>
      <td>P1002</td>
      <td>游戏鼠标</td>
      <td>78</td>
    </tr>
  </tbody>
  <tfoot style="font-weight: bold;">
    <tr>
      <td colspan="2">总库存</td>
      <td>123</td>
    </tr>
  </tfoot>
</table>

输出效果：

产品ID	名称	库存
P1001	机械键盘	45
P1002	游戏鼠标	78
总库存		123

高级应用[编辑 | 编辑源代码]

多tbody分组[编辑 | 编辑源代码]

适用于需要按条件分段的场景：

<tbody>
  <!-- 第一季度数据 -->
  <tr><td>...</td></tr>
</tbody>
<tbody>
  <!-- 第二季度数据 -->
  <tr><td>...</td></tr>
</tbody>

列分组 (<colgroup> 和 <col>)[编辑 | 编辑源代码]

与行分组配合实现二维控制：

<colgroup>
  <col span="2" style="background-color:red">
  <col style="background-color:yellow">
</colgroup>

数学公式示例（计算平均值）： $\bar{x} = \frac{1}{n} \sum_{i = 1}^{n} x_{i}$

浏览器渲染规则[编辑 | 编辑源代码]

即使源代码中<tfoot>出现在<tbody>之前，浏览器仍会按以下顺序渲染： 1. <thead> 2. <tfoot> 3. <tbody>

无障碍设计建议[编辑 | 编辑源代码]

确保每个分组包含至少一行
避免在<thead>中使用非元素
对复杂表格使用ARIA角色补充：

<table role="grid">
  <thead role="rowgroup">
    <tr role="row">...</tr>
  </thead>
</table>

实际应用场景[编辑 | 编辑源代码]

财务报告表格通常包含：

<thead>：会计科目/期间标题
多个<tbody>：按季度分段的数据
<tfoot>：年度合计与审计注释

兼容性说明[编辑 | 编辑源代码]

所有现代浏览器均完全支持表格分组元素，包括：

Chrome 1+
Firefox 1+
Safari 3+
Edge 12+
Opera 7+

参见[编辑 | 编辑源代码]