怎样设置表格的底部分组_TFOOT标签展示汇总统计数据-html教程-PHP中文网

tfoot是语义化汇总容器，必须位于thead之后tbody之前，仅支持单行汇总；需用tr/td/th严格匹配列数，动态更新应修改单元格内容而非替换整个tfoot。

怎样设置表格的底部分组_tfoot标签展示汇总统计数据

tfoot 标签不是“设置底部分组”的工具，它是语义容器，只负责声明“这部分是表格的汇总信息”，不提供分组逻辑、不自动计算、不支持嵌套结构。真要实现带逻辑的底部分组（比如按类别小计+总计），得靠 tbody 多段 + 手动插入 tfoot，或彻底放弃语义标签改用 JS 渲染。

tfoot 必须写在 tbody 前面，否则打印和滚动会失效

HTML 规范强制要求顺序为 thead → tfoot → tbody，哪怕你视觉上想让它在最后。浏览器靠这个顺序提前渲染页脚、支持跨页打印、启用 tbody 独立滚动。如果写成 thead → tbody → tfoot：

打印时 tfoot 只出现在最后一页，而不是每页底部
tbody { max-height: 300px; overflow-y: auto; } 失效，整个表格一起滚动
某些 CSS 选择器（如 tr:nth-child(odd)）会把 tfoot 的行算进总行数，导致样式错乱

tfoot 里不能直接放文本，必须用 tr + td/th

常见错误是这样写：

<tfoot>
<td>合计</td>
  <td>¥7900</td>
</tfoot>

这会导致 DOM 解析异常——浏览器可能把 td 提升到 table 根级，破坏表格结构。正确写法只有这一种：

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

<tfoot><tr>
<th scope="row">合计</th>
    <td>24</td>
    <td>¥1,200.00</td>
  </tr></tfoot>

th 加 scope="row" 是给屏幕阅读器用的，比纯 td 更可访问
列数必须和 thead 与所有 tbody tr 严格一致，否则渲染错位
别用 colspan 合并整行来“居中显示说明文字”——那是语义误用，响应式下会崩

动态更新 tfoot 数据时，只改单元格内容，别替换整个 tfoot

如果你用 JS 计算合计值并填入 tfoot，别这么做：

tfoot.innerHTML = '<tr>
<td>合计</td>
<td>' + total + '</td>
</tr>';

这会清空原有事件监听、中断焦点、破坏 SSR 渲染一致性。应该定位到已有单元格再更新：

const footerRow = document.querySelector('tfoot tr');
footerRow.cells[0].textContent = '合计';
footerRow.cells[1].textContent = totalItems;
footerRow.cells[2].textContent = formatCurrency(totalAmount);