tfoot是表格语义化页脚区域，必须位于thead之后tbody之前，仅能嵌套tr元素，用于汇总行等整表底部信息，不可直接放文本或非tr子元素。
tfoot 不是“脚注”，而是表格的语义化页脚区域，用于包裹汇总行、总计、备注等逻辑上属于整张表底部的信息。它不等于 <footer></footer> 或文档级脚注，也不能放任意说明文字——必须嵌套 <tr>，且只能出现在 <code><thead> 之后、<code><tbody> 之前。<h3>为什么 <code>tfoot 必须写在 tbody 前面？
这是 HTML 规范强制要求的顺序：<thead> → <code><tfoot> → <code><tbody>。浏览器会据此提前渲染页脚（哪怕 <code>tbody 数据还没加载完），对长表格滚动和分页打印至关重要。
常见错误现象：
- 把
<tfoot> 放在 <code><tbody> 后面，部分旧浏览器可能忽略或错位渲染<li>省略 <code><thead> 或 <code><tbody> 却单独用 <code><tfoot>，导致 DOM 结构不合法，<code>table.tFoot属性返回null - 用 CSS 把
<tfoot> 强行“挪”到视觉底部，但破坏了语义顺序，打印时无法跨页重复<h3> <code>tfoot内部只能写<tr>，不能直接写文本<p><code><tfoot> 是容器标签，不是排版标签。它的子元素只能是 <code><tr>，而 <code><tr> 内再用 <code><td> 或 <code><th> —— 这是硬性限制，否则 HTML 解析会降级为“未闭合标签”处理，DOM 中可能找不到 <code>tFoot对象。立即学习“前端免费学习笔记（深入）”；
正确示例：
Wechat Article Html下载将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
<tfoot> <tr> <th>总计</th> <td colspan="2">¥380</td> </tr> </tfoot>错误写法（会导致解析失败）：
<tfoot> <p>数据截至 2026-04-18</p> <!-- ❌ 不允许 --> <div class="note">含税价</div> <!-- ❌ 不允许 --> </tfoot>
用 JavaScript 操作
tFoot对象时要注意兼容性通过
table.tFoot获取的是TFoot对象，但它依赖完整语义结构：只有当<table> 内同时存在 <code><thead>、<code><tfoot>、<code><tbody> 三者时，该属性才稳定可用。<p>实操建议：</p> <ul> <li>检查是否存在：<code>if (table.tFoot) { ... }，不要直接访问table.tFoot.innerHTML否则报错 - 修改内容优先用
table.tFoot.querySelector('td').textContent = '¥420'，避免 innerHTML 注入风险 -
align、vAlign等旧属性在 HTML5 中已废弃，改用 CSS：tfoot { text-align: right; vertical-align: middle; }
最容易被忽略的一点：即使你只想要一个视觉上的“底部备注”，只要没用 <tr> 包裹，就不是合法 <code><tfoot>；而一旦用了，就必须接受它的语义约束——它代表的是整张表的汇总/固定信息，不是任意位置的注释栏。</tfoot>
