tfoot不是排版工具，而是浏览器用于跨页打印、滚动固定和无障碍访问的语义钩子；必须位于thead之后tbody之前，且内部必须用tr包裹td/th，否则破坏结构、导致打印丢失、js失效和屏幕阅读器跳过。
直接说结论：<tfoot>不是“加个底部文字”的排版工具，它是浏览器用来提前解析、跨页打印、滚动固定和无障碍访问的语义钩子；用错位置、塞错结构，合计行可能显示正常，但打印丢数据、滚动错位、屏幕阅读器跳过。<h3>tfoot必须写在thead之后、tbody之前</h3>
<p>HTML规范强制顺序是<code><thead> → <code><tfoot> → <code><tbody>，这不是“写哪都一样”的视觉问题，而是影响底层行为的关键约束：<ul><li>打印多页表格时，只有前置的<code><tfoot>才会在每页底部重复出现；后置则大概率只出现在最后一页<li>
<code>tbody { max-height: 300px; overflow-y: auto; }要生效，依赖<tbody>是独立语义块——而这个前提就是<code><tfoot>没混在它里面<li>异步加载长表格时，浏览器能先渲染<code><tfoot>里的“总计 ¥7,900”，提升首屏感知<li>某些选择器如<code>tr:nth-child(odd)会把<tfoot>的行算进总行数，顺序错乱会导致隔行变色错位<h3>tfoot里必须用tr包裹td/th，不能直接写文本或td</h3>
<p><code><tfoot>是行容器，不是单元格容器。常见错误是这样写：<pre class="brush:php;toolbar:false;"><tfoot>
<td>合计</td>
<td>¥7900</td>
</tfoot></pre>
<p>这会导致DOM解析异常——浏览器可能把<code><td>提升到<code><table>根级，破坏表格结构，<code>table.tFoot属性返回null，JS操作失败。
正确写法只有一种：
@@######@@<th scope="row">告诉屏幕阅读器这是行标题，比纯<code><td>更可访问<li>列数必须和<code><thead>及所有<code><tbody> tr严格一致；可用<code>colspan合并，但总数不能少也不能多- 别用
colspan="100%"强行居中——破坏列对齐，响应式下易崩，且语义错位 -
tfoot td不会自动继承tbody tr:nth-child(even)这类选择器的样式，需单独写 - 推荐用属性选择器精准定位：
tfoot td、tfoot th - 如果表格用了
position: sticky固定表头，<tfoot>需额外设<code>z-index才能压住滚动内容 - 移动端小屏下，建议用
@media把统计行改为块状堆叠，而非强行保持表格布局
tfoot样式必须用CSS控制，不能靠HTML属性
align、valign等HTML4属性在HTML5中已被移除，硬写进去浏览器会忽略：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
所有样式都得走CSS，且要注意：
JavaScript动态更新tfoot时，只改单元格内容
别替换整个<tfoot>元素，否则会清空事件监听、中断焦点、破坏SSR/SEO一致性：@@######@@<ul><li>前提是<code><tfoot>已存在且结构合法（含<code><tr>）<li>如果表格有多个<code><tbody>段落并需要分组小计，<code><tfoot>只能有一个——这时得用额外<code><tbody>模拟，或放弃<code><tfoot>改用<code><div class="table-footer"><li>想放带超链接、图标或多段落的“脚注”？那不属于<code><tfoot>职责范围，应放在<code>
