tfoot是表格语义化汇总区域，必须置于thead之后tbody之前；仅能包含tr元素，需与表头列数对齐；样式须用css控制，动态更新应修改单元格内容而非替换整个tfoot。
tfoot 不是用来“加个说明文字”或“放脚注”的，它是语义上专属于整张表格的汇总区域。用错位置、塞错内容，轻则样式失效，重则打印丢数据、屏幕阅读器跳过、滚动错位。
tfoot 必须写在 tbody 前面，顺序不能颠倒
HTML 规范强制要求顺序是 thead → tfoot → tbody。这不是可选项，而是浏览器行为的基础：
- 打印多页表格时，只有前置的
tfoot才会在每页底部重复出现；后置则大概率只出现在最后一页 - 当
tbody数据异步加载或很长时，浏览器能提前渲染tfoot（比如“总计 ¥7,900”），提升首屏感知 -
tbody { max-height: 300px; overflow-y: auto; }要生效，必须依赖tbody是独立语义块——而这个前提就是tfoot没混在它里面 - 某些 CSS 选择器如
tr:nth-child(odd)在顺序错乱时会误算行数，导致隔行变色错位
tfoot 里只能放 tr，不能直接写文本或 td
tfoot 是行容器，不是单元格容器。常见错误是这么写：
<tfoot> <td>合计</td> <td>¥7900</td> </tfoot>
这会导致 DOM 解析异常，浏览器可能把 td 提升到 table 顶层，破坏表格结构。正确写法必须带 tr：
<tfoot><tr>
<th scope="row">合计</th>
<td>¥7900</td>
</tr></tfoot>
-
th加scope="row"告诉屏幕阅读器这是行标题，比纯td更可访问 - 列数必须和
thead/tbody中的tr对齐，否则渲染会错列 - 不要用
colspan合并所有列来实现单格居中——语义错位，响应式重排时易崩
tfoot 的样式必须用 CSS 控制，HTML 属性已失效
HTML4 的 align、valign 等属性在 HTML5 中已被移除，硬写进去浏览器会忽略：
<tfoot align="right"></tfoot><!-- 无效 -->
所有对齐、颜色、背景等都得走 CSS：
tfoot td {
font-weight: bold;
background-color: #f8f9fa;
border-top: 2px solid #dee2e6;
}
tfoot th {
text-align: left;
}
-
vertical-align要加在td或th上，而不是tfoot元素本身 -
tfoot不会自动继承tbody tr:nth-child(even)这类选择器的样式，需单独声明 - 如果表格用了
position: sticky固定表头，tfoot需额外设z-index才能压住滚动内容
动态更新 tfoot 内容时，别替换整个元素
用 JavaScript 更新统计值时，直接 innerHTML = "" 或 replaceChild 整个 tfoot，会导致事件监听丢失、焦点中断、SSR/SEO 内容不一致。
更稳妥的是只更新单元格内容：
const footerRow = document.querySelector('tfoot tr');
footerRow.cells[1].textContent = totalItems;
footerRow.cells[2].textContent = formatCurrency(totalAmount);
- 确保
footerRow存在且cells索引有效（避免undefined报错） - 若需格式化数字或货币，优先用
textContent而非innerHTML，防 XSS - 多行页脚（如“合计”+“备注”）应写多个
tr，而非在一个tr里堆p或br
最常被忽略的一点：很多人以为 tfoot 只是“视觉上放底部”，其实它的价值全在语义和浏览器行为钩子上——打印跨页、滚动分离、无障碍导航、首屏预渲染。一旦脱离规范，这些能力就断了，但表面看起来可能还“正常”。
