HTML表格中＜tfoot＞标签用法详解

在HTML中，<tfoot>标签用于定义表格的页脚（表脚），通常包含汇总信息（如总计、平均值等）。其核心特点和使用方法如下：

基本特性

1. 位置灵活
   <tfoot>必须位于<table>内，且需在<caption>、<colgroup>和<thead>之后，在<tbody>或<tr>之前（但浏览器会将其内容渲染在表格底部）。

2. 内容要求
   内部只能包含<tr>标签，再嵌套<td>或<th>。

3. 语义化
   与<thead>（表头）和<tbody>（表体）共同构建语义化表格结构。

使用示例

html

复制

下载

运行

<table>
  <!-- 表头 -->
  <thead>
    <tr>
      <th>产品</th>
      <th>单价</th>
      <th>数量</th>
    </tr>
  </thead>

  <!-- 表脚（实际代码中写在tbody前） -->
  <tfoot>
    <tr>
      <th>总计</th>
      <td colspan="2">¥380</td> <!-- 合并两列 -->
    </tr>
  </tfoot>

  <!-- 表体 -->
  <tbody>
    <tr>
      <td>笔记本</td>
      <td>¥120</td>
      <td>2</td>
    </tr>
    <tr>
      <td>钢笔</td>
      <td>¥20</td>
      <td>7</td>
    </tr>
  </tbody>
</table>

关键规则

1. 顺序要求
   代码顺序需为：<thead> → <tfoot> → <tbody>（尽管渲染时<tfoot>显示在底部）。

2. 打印优化
   打印长表格时，<tfoot>内容会在每页底部重复显示（与<thead>的每页顶部重复对应）。

3. 唯一性
   每个表格最多只能有一个<tfoot>。

4. 样式统一
   默认与表格主体样式一致，可通过CSS单独定制：

   css

   复制

   下载

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

适用场景

• 显示列数据的统计结果（总和、平均值）

• 添加表格的备注或说明

• 在多页打印的表格中确保每页底部显示固定信息

注意：若表格无汇总需求，可不使用<tfoot>。现代HTML5中<tfoot>是可选的，但合理使用能提升表格可访问性和语义清晰度。