tfoot必须位于thead之后、tbody之前，且内部须用tr包裹td，否则将导致打印跨页失败、滚动错位、屏幕阅读器忽略及DOM解析异常等问题。
tfoot 标签不是用来“摆个合计行”就完事的，它的核心价值在于提供语义结构和浏览器行为钩子——比如打印跨页重复、tbody 独立滚动、以及提前渲染页脚内容。不按规范用，合计行可能在视觉上正常，但打印时消失、滚动时错位、或被屏幕阅读器忽略。
tfoot 必须写在 tbody 前面，否则打印和滚动会出问题
HTML 规范明确要求 tfoot 出现在 tbody 之前（顺序是 thead → tfoot → tbody），这不是可选项：
- 浏览器在解析 HTML 时，看到
tfoot就能立即渲染页脚（比如“总计 $7900”），哪怕tbody还在加载中，这对长表格首屏体验很关键 - 打印多页表格时，只有前置的
tfoot才会被每页底部重复输出；后置则大概率只出现在最后一页 - CSS 的
tbody { max-height: 300px; overflow-y: auto; }要生效，必须依赖tbody是独立语义块——而这个前提就是tfoot不混在其中 - 某些 CSS 选择器如
tr:nth-child(odd)在tfoot放错位置时会误算行数，导致样式错乱
tfoot 里不能直接写 td，必须包在 tr 里面
tfoot 是行容器，不是单元格容器。常见错误是这么写：
<tfoot> <td>合计</td> <td>$7900</td> </tfoot>
这会导致 DOM 解析异常，浏览器可能把 td 提升到 table 顶层，破坏表格结构。正确写法必须带 tr：
立即学习“前端免费学习笔记（深入）”；
<tfoot>
<tr>
<td>合计</td>
<td>$7900</td>
</tr>
</tfoot>-
tfoot内部至少包含一个tr，否则不符合 HTML5 规范，部分校验工具或 SSR 渲染会报 warning - 如果需要多行页脚（比如“合计”+“备注”），就写多个
tr，不要试图用colspan撑满——那是语义错位 - 行数必须与
thead和tbody中的列数对齐，否则表格渲染可能错列
tfoot 的样式要用 CSS 控制，HTML 属性已废弃
HTML4 里的 align、valign 等属性在 HTML5 中已被移除，硬写进去浏览器会忽略：
<tfoot align="right">...</tfoot> <!-- 无效 -->
所有对齐、颜色、背景等都得走 CSS：
<style>
tfoot { text-align: right; font-weight: bold; }
tfoot td:last-child { color: #d32f2f; }
</style>- 垂直居中用
vertical-align: middle，但要加在td或th上，而不是tfoot元素本身 - 想让页脚固定在底部（比如悬浮在滚动
tbody下方），不能靠position: sticky直接作用于tfoot——它不支持该行为；得用display: table-footer-group配合父容器约束 - 无障碍方面，
tfoot中的th会被自动关联到对应列，比纯td更利于屏幕阅读器理解“这是哪一列的汇总”
最容易被忽略的是：即使你只想要一个视觉上的“底部合计”，也得老老实实补全 thead、tfoot、tbody 三件套——缺一不可。浏览器不会报错，但打印、滚动、可访问性这些隐性能力就断了。
