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>是可选的，但合理使用能提升表格可访问性和语义清晰度。