HTML 的 ＜tfoot＞ 元素

1. 什么是 <tfoot> 元素

<tfoot>（Table Foot）是 HTML 表格结构中的语义化元素，用于定义表格的底部区域。它通常用来放置汇总信息、合计数据或表格的脚注说明，让表格在视觉和语义上都更加清晰。

一个标准的表格结构由三个部分组成：

• <thead>：表头，定义列标题
• <tbody>：表体，存放主要数据
• <tfoot>：表尾，放置汇总或脚注

<table>
  <thead>
    <tr>
      <th>商品</th>
      <th>单价</th>
      <th>数量</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>苹果</td>
      <td>5 元</td>
      <td>10</td>
    </tr>
    <tr>
      <td>香蕉</td>
      <td>3 元</td>
      <td>20</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">合计</td>
      <td>30</td>
    </tr>
  </tfoot>
</table>

2. <tfoot> 的核心特性

2.1 语义化结构

<tfoot> 让浏览器和辅助技术（如屏幕阅读器）能够准确识别表格的底部区域，提升页面的可访问性。

2.2 渲染位置

在 HTML 规范中，<tfoot> 在文档中应写在 <tbody> 之后。但无论它在源码中的位置如何，浏览器都会将其渲染在表格的视觉底部。

2.3 跨页重复

当表格跨多页打印时，<tfoot> 的内容会在每一页的底部重复显示，方便读者查看汇总信息。

3. 使用场景

3.1 数据汇总

最常见的用途是展示合计、平均值等统计结果：

<tfoot>
  <tr>
    <td>总计</td>
    <td>¥ 1,200</td>
  </tr>
</tfoot>

3.2 表格脚注

可以在 <tfoot> 中放置说明性文字，例如数据来源、统计口径等：

<tfoot>
  <tr>
    <td colspan="3">注：以上数据统计截至 2026 年 9 月。</td>
  </tr>
</tfoot>

4. 注意事项

• <tfoot> 必须作为 <table> 的直接子元素，不能嵌套在其他标签内部。
• 一个 <table> 中最多只能有一个 <tfoot>。
• 如果表格没有 <tbody>，浏览器会自动创建一个，但 <tfoot> 仍需显式声明。
• 使用 colspan 属性可以让汇总行跨越多列，保持表格对齐美观。

5. 总结

<tfoot> 是 HTML 表格中不可或缺的语义化元素。合理使用它，不仅能让表格结构更清晰、代码更易维护，还能提升页面的可访问性和打印体验。在开发数据密集型页面时，记得用 <tfoot> 承载你的汇总信息。