tfoot不能当脚注容器，因其语义是表格汇总区，须用tr包裹且列数对齐；脚注应放table外的div或footer中。

tfoot 不是用来放脚注说明的，真要加“* 数据来源：2024 年统计”这类文字，直接塞进 tfoot 会出错、可访问性崩、打印错位。

为什么 tfoot 不能当脚注容器用

浏览器和屏幕阅读器把 tfoot 当作整张表的语义化汇总区，不是备注栏。硬往里塞说明文字会导致：

• HTML 验证失败——tfoot 内部只允许 tr，不能直接放 p、div 或纯文本
• 打印时只出现在最后一页，而非每页底部
• 无障碍工具可能跳过或误读内容（比如把“† 含税”当成行标题）
• position: sticky 对 tfoot 支持极差，滚动时容易错位

tfoot 的合法写法：必须套 tr，且列数对齐

tfoot 是行容器，不是排版盒子。常见错误是直接写文本或 td：

<tfoot>
  合计：¥1,200
</tfoot>

正确写法必须用 tr 包一层，且单元格数量要和 thead、tbody 中的行一致：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

立即学习“前端免费学习笔记（深入）”；

<tfoot>
  <tr>
    <th scope="row">合计</th>
    <td>24</td>
    <td>¥1,200.00</td>
    <td>87%</td>
  </tr>
</tfoot>

• scope="row" 告诉辅助技术这是行头，比空 td 更可访问
• 别用 colspan="100%" 强行居中——破坏列对齐，响应式下易崩
• 如果 thead 有 4 列，tfoot 的 tr 也必须有且仅有 4 个单元格（可用 colspan 合并，但总数要匹配）

真正需要脚注？用 div 或 footer 放 table 外面

带图标、多段落、超链接或需要响应式换行的说明，就别绑在表格结构里：

<table>
  <!-- thead, tfoot, tbody -->
</table>
<div class="table-footnote">
  <small>* 数据截至 2026-05-28；† 含增值税</small>
</div>

• 用 small 或自定义类控制字号和颜色，不污染表格语义
• 配合 @media print 单独设间距，避免和表格边框粘连
• 若需语义更强，可用 <footer class="table-footer">，但注意它不属于表格 DOM，JS 查找要跨元素

最常被忽略的一点：tfoot 的存在意义不在“看起来在底部”，而在“浏览器能提前解析并复用它”——比如打印跨页、tbody 滚动时保持页脚可见。一旦把它当排版标签用，这些能力就全失效了。