tfoot是表格语义化页脚区域，专用于包裹整表汇总行，必须置于thead之后、tbody之前，仅包含tr元素，且需用css控制样式、javascript安全更新内容。
tfoot 不是脚注，它是表格的语义化页脚区域，专用于包裹整表汇总行（如“合计”“平均值”），不是放任意说明文字或文献引用的地方。用错就等于放弃打印跨页、滚动固定、屏幕阅读器识别这些关键能力。
tfoot 必须写在 tbody 前面，顺序不能调换
HTML 规范强制要求顺序为 thead → tfoot → tbody，哪怕你视觉上希望页脚在最后，也得把 tfoot 写在 tbody 标签之前。
- 浏览器靠这个顺序提前渲染页脚——
tbody数据还在加载时，“总计 ¥7,900”已经显示出来，首屏感知更优 - 打印长表格时，只有前置的
tfoot才会在每页底部重复出现；后置则大概率只出现在最后一页 -
tbody { max-height: 300px; overflow-y: auto; }要生效，必须依赖tbody是独立语义块——而这个前提就是tfoot没混在它里面 - 某些 CSS 选择器如
tr:nth-child(odd)在顺序错乱时会误算行数，导致隔行变色错位
tfoot 里只能放 tr，不能直接写文本或 td
tfoot 是行容器，不是单元格容器。它内部必须且只能包含一个或多个 tr 元素，tr 再嵌套 td 或 th —— 这是硬性解析规则，不是建议。
- 错误写法：
<tfoot> <td>合计</td> <td>¥7900</td> </tfoot>→ 浏览器可能把td提升到table顶层，DOM 中table.tFoot返回null - 正确写法必须带
tr：<tfoot><tr> <th scope="row">合计</th> <td>¥7900</td> </tr></tfoot> -
th加scope="row"明确告诉屏幕阅读器这是行标题，比纯td更可访问 - 列数必须和
thead/tbody中的tr对齐，否则渲染会错列；避免用colspan合并所有列来“居中”，语义错位且响应式易崩
样式必须用 CSS 控制，HTML 属性已失效
HTML5 已移除 align、valign、char 等所有视觉属性。<tfoot align="right"> 这类写法完全无效，浏览器直接忽略。
<ul>
<li>对齐、颜色、背景、边框等全部走 CSS：<code>tfoot td { font-weight: bold; background-color: #f8f9fa; border-top: 2px solid #dee2e6; }
border-collapse: collapse 下，tfoot 的上边框可能被 tbody 最后一行“吃掉”，需显式加 border-top
tfoot tr 的 background-color 渲染异常，建议直接设在 td 或 th 上position: sticky 固定表头，tfoot 需额外加 z-index 才能压住滚动内容JavaScript 动态更新 tfoot 时只改单元格内容
不要替换整个 tfoot 元素，也不要清空再重写 innerHTML。这会导致事件监听丢失、焦点中断、SSR/SEO 内容不一致。
- 优先用唯一标识定位单元格：
<td id="total-amount">¥7900</td>，然后document.getElementById('total-amount').textContent = formatCurrency(newSum); - 若没 ID，可用
document.querySelector('tfoot tr').cells[1].textContent = newSum; - 避免拼接 HTML 字符串赋值给
innerHTML，防止 XSS；textContent更安全 - 统计依赖
tbody数据时，记得在 DOM 更新后（比如requestAnimationFrame或框架的nextTick）再重算，否则读到的是旧值 - 服务端渲染页面首次加载时，
tfoot的值应由后端生成，别等 JS 执行完才填——用户第一眼看到的必须是正确初始值
tfoot 是语义容器，不是计算引擎。它的价值在于告诉浏览器和辅助技术“这行是汇总”，而不是帮你算数——该用 JS 算的，别指望浏览器代劳；该用 ARIA 标注的（比如 role="rowgroup"），别只靠默认结构。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
