<tfoot>-表尾部分

作者：陈川阅读数：59696人阅读分类： HTML

<tfoot> 是 HTML 表格中用于定义表尾部分的标签，通常包含汇总行或脚注信息。它与 <thead> 和 <tbody> 共同构成表格的结构化分组，提升语义化和样式控制能力。

`<tfoot>` 的基本用法

<tfoot> 必须作为 <table> 的直接子元素出现，位置可在 <tbody> 前或后，但浏览器渲染时始终显示在表格底部。一个典型结构如下：

<table>
  <thead>
    <tr><th>月份</th><th>销售额</th></tr>
  </thead>
  <tbody>
    <tr><td>一月</td><td>¥12,000</td></tr>
    <tr><td>二月</td><td>¥15,000</td></tr>
  </tbody>
  <tfoot>
    <tr><td>总计</td><td>¥27,000</td></tr>
  </tfoot>
</table>

与 `<thead>` 和 `<tbody>` 的协作

这三个标签共同实现表格的分段渲染。即使源代码中 <tfoot> 位于 <tbody> 之前，实际显示仍会在底部：

<table>
  <tfoot>
    <tr><td colspan="2">数据更新时间：2023年10月</td></tr>
  </tfoot>
  <tbody>
    <tr><td>产品A</td><td>库存：120件</td></tr>
  </tbody>
</table>

样式控制特性

<tfoot> 支持独立的 CSS 样式设置。例如实现斑马纹表格时，可单独定义表尾背景色：

tfoot {
  background-color: #f2f2f2;
  font-weight: bold;
}

跨列布局技巧

通过 colspan 属性可实现表尾单元格合并。这种设计常用于统计行：

<tfoot>
  <tr>
    <td colspan="2">平均温度</td>
    <td>23℃</td>
  </tr>
</tfoot>

动态内容处理

JavaScript 可以动态操作 <tfoot> 内容。以下示例演示实时更新合计值：

<table id="dataTable">
  <tfoot id="summary">
    <tr><td>合计：</td><td id="total">0</td></tr>
  </tfoot>
</table>

<script>
  function updateTotal() {
    const cells = document.querySelectorAll('#dataTable tbody td:nth-child(2)');
    let sum = 0;
    cells.forEach(cell => sum += parseFloat(cell.textContent));
    document.getElementById('total').textContent = sum;
  }
</script>

打印布局优化

在打印样式表中，可通过保持 <tfoot> 在每页底部显示来提升多页表格的可读性：

@media print {
  tfoot { display: table-footer-group; }
}

ARIA 增强可访问性

为屏幕阅读器添加 role="rowgroup" 可提升可访问性：

<tfoot role="rowgroup">
  <tr role="row">...</tr>
</tfoot>

实际应用场景

财务报表：显示季度合计与税率说明
数据看板：展示实时统计指标
商品列表：呈现购物车总金额
成绩单：包含班级平均分信息

<!-- 电商订单示例 -->
<table>
  <tfoot>
    <tr>
      <td>商品总数</td>
      <td>3件</td>
      <td>总金额</td>
      <td>¥599.00</td>
    </tr>
    <tr>
      <td colspan="4">含运费：¥15.00</td>
    </tr>
  </tfoot>
</table>