编辑“︁HTML表格分组”︁（章节）

= HTML表格分组 =

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

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

=== 分组元素结构 ===
标准分组结构如下：
<mermaid>
flowchart TD
    table[<table>] --> thead[<thead>]
    table --> tbody[<tbody>]
    table --> tfoot[<tfoot>]
    thead --> tr[<tr>]
    tbody --> tr2[<tr>]
    tfoot --> tr3[<tr>]
</mermaid>

== 详细语法 ==
=== 表头分组 (<thead>) ===
定义表格的标题行，通常包含列标签：
<syntaxhighlight lang="html">
<table>
  <thead>
    <tr>
      <th>月份</th>
      <th>销售额</th>
    </tr>
  </thead>
</table>
</syntaxhighlight>

=== 表体分组 (<tbody>) ===
包含主要数据内容，一个表格可包含多个tbody实现分段：
<syntaxhighlight lang="html">
<tbody>
  <tr>
    <td>一月</td>
    <td>$5,000</td>
  </tr>
  <tr>
    <td>二月</td>
    <td>$6,200</td>
  </tr>
</tbody>
</syntaxhighlight>

=== 表尾分组 (<tfoot>) ===
放置汇总信息，浏览器会始终将其渲染在tbody之后：
<syntaxhighlight lang="html">
<tfoot>
  <tr>
    <td>总计</td>
    <td>$11,200</td>
  </tr>
</tfoot>
</syntaxhighlight>

== 完整示例 ==
<syntaxhighlight lang="html">
<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>
</syntaxhighlight>

输出效果：
{| border="1"
|-
! style="background-color: #f2f2f2;" | 产品ID
! style="background-color: #f2f2f2;" | 名称
! style="background-color: #f2f2f2;" | 库存
|-
| P1001 || 机械键盘 || 45
|-
| P1002 || 游戏鼠标 || 78
|-
| colspan="2" style="font-weight: bold;" | 总库存
| style="font-weight: bold;" | 123
|}

== 高级应用 ==
=== 多tbody分组 ===
适用于需要按条件分段的场景：
<syntaxhighlight lang="html">
<tbody>
  <!-- 第一季度数据 -->
  <tr><td>...</td></tr>
</tbody>
<tbody>
  <!-- 第二季度数据 -->
  <tr><td>...</td></tr>
</tbody>
</syntaxhighlight>

=== 列分组 (<colgroup> 和 <col>) ===
与行分组配合实现二维控制：
<syntaxhighlight lang="html">
<colgroup>
  <col span="2" style="background-color:red">
  <col style="background-color:yellow">
</colgroup>
</syntaxhighlight>

数学公式示例（计算平均值）：
<math>\bar{x} = \frac{1}{n}\sum_{i=1}^n x_i</math>

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

== 无障碍设计建议 ==
* 确保每个分组包含至少一行
* 避免在<thead>中使用非<th>元素
* 对复杂表格使用ARIA角色补充：
<syntaxhighlight lang="html">
<table role="grid">
  <thead role="rowgroup">
    <tr role="row">...</tr>
  </thead>
</table>
</syntaxhighlight>

== 实际应用场景 ==
'''财务报告表格'''通常包含：
* <thead>：会计科目/期间标题
* 多个<tbody>：按季度分段的数据
* <tfoot>：年度合计与审计注释

== 兼容性说明 ==
所有现代浏览器均完全支持表格分组元素，包括：
* Chrome 1+
* Firefox 1+
* Safari 3+
* Edge 12+
* Opera 7+

== 参见 ==
* [[HTML表格基础]]
* [[CSS表格样式]]
* [[ARIA表格实践]]

[[Category:编程语言]]
[[Category:HTML]]
[[Category:HTML列表与表格]]