标签专用于表格汇总行，不可作脚注容器；脚注应置于外部，用或实现，且需避免语义误用导致的无障碍与渲染问题。
用 <tfoot> 标签放脚注内容？别这么干<p><code><tfoot> 的语义是“表格的汇总行”，不是“脚注容器”。把它当页脚或说明文字区域用，会导致屏幕阅读器误读、打印样式错乱、CSS 选择器逻辑混乱。真正需要脚注（比如“* 数据来源：2024 年内部统计”），应该放在 <code><table> 外部，紧邻下方，用 <code><div class="table-footnote"> 或 <code><small></small> 更合适。<tfoot> 的正确使用场景和结构约束<p>它必须出现在 <code><thead> 之后、<code><tbody> 之前（HTML 规范强制顺序），且只能包含 <code><tr>，不能直接放文本。浏览器会自动把 <code><tfoot> 渲染在表格底部，但 DOM 位置仍在 <code><thead> 下方——这点影响 CSS <code>position: sticky 固定表头/表尾的行为。- 必须与
<thead> 和 <code><tbody> 共享列数（<code>colspan 要对齐，否则渲染错位） - 适合放“合计”“平均值”“总计行”这类数值汇总，例如：
<tr>
<td>总计</td>
<td>128</td>
<td>¥4,230</td>
</tr>
- 不支持嵌套表格、
<p></p>、<ul></ul> 等块级元素
想让 <tfoot> 在打印时稳定显示在每页底部？小心这个坑<p>CSS <code>position: sticky 对 <tfoot> 的支持极差：Chrome 仅在部分版本中对表格整体生效，Firefox 基本忽略。更可靠的做法是放弃 <code><tfoot> 打印固定，改用 @media print + <code>display: table-footer-group（注意：这是 display 值，不是标签名），并确保 <tfoot> 存在且结构合法：<pre class='brush:php;toolbar:false;'>@media print {
tfoot {
display: table-footer-group;
}
}</pre><p>但前提是你的表格没用 <code>display: block 或其他破坏表格盒模型的样式——一旦破坏，table-footer-group 就失效。
脚注内容要响应式换行又保持语义？用 <caption></caption> 或外部 <footer></footer>
<caption></caption> 是表格的标题容器，语义上可放简短说明（如“表 1：Q3 销售数据（含预估）”），支持 caption-side: bottom 拉到底部，也支持换行和内联样式；如果内容较长或需独立样式控制，直接在
<tfoot> 的正确使用场景和结构约束<p>它必须出现在 <code><thead> 之后、<code><tbody> 之前（HTML 规范强制顺序），且只能包含 <code><tr>，不能直接放文本。浏览器会自动把 <code><tfoot> 渲染在表格底部，但 DOM 位置仍在 <code><thead> 下方——这点影响 CSS <code>position: sticky 固定表头/表尾的行为。- 必须与
<thead> 和 <code><tbody> 共享列数（<code>colspan要对齐，否则渲染错位） - 适合放“合计”“平均值”“总计行”这类数值汇总，例如：
<tr> <td>总计</td> <td>128</td> <td>¥4,230</td> </tr> - 不支持嵌套表格、
<p></p>、<ul></ul>等块级元素
想让 <tfoot> 在打印时稳定显示在每页底部？小心这个坑<p>CSS <code>position: sticky 对 <tfoot> 的支持极差：Chrome 仅在部分版本中对表格整体生效，Firefox 基本忽略。更可靠的做法是放弃 <code><tfoot> 打印固定，改用 @media print + <code>display: table-footer-group（注意：这是 display 值，不是标签名），并确保 <tfoot> 存在且结构合法：<pre class='brush:php;toolbar:false;'>@media print {
tfoot {
display: table-footer-group;
}
}</pre><p>但前提是你的表格没用 <code>display: block 或其他破坏表格盒模型的样式——一旦破坏，table-footer-group 就失效。
脚注内容要响应式换行又保持语义？用 <caption></caption> 或外部 <footer></footer>
<caption></caption> 或外部 <footer></footer>
<caption></caption> 是表格的标题容器，语义上可放简短说明（如“表 1：Q3 销售数据（含预估）”），支持 caption-side: bottom 拉到底部，也支持换行和内联样式；如果内容较长或需独立样式控制，直接在
