HTML表格行分组标签thead、tbody、tfoot是语义必需结构层，必须严格按caption→colgroup→thead→tfoot→tbody顺序嵌套；thead仅含th（需scope属性），tbody承载数据并支持动态操作，多tbody需列数一致且不可为每个tbody配tfoot。
HTML 表格行分组标签（thead、tbody、tfoot）不是装饰性容器，而是语义必需的结构层。它们必须严格按顺序、规范嵌套，才能支撑滚动固定、打印分页、无障碍访问和 JS 精准操作。
必须遵守的书写顺序
三者在 <table> 内必须按以下 DOM 顺序出现：
<ul>
<li>
<code><caption></caption>（可选，但推荐）
<colgroup></colgroup>（可选）<thead> —— 必须首个内容子元素，且内部至少含一个 <code><tr><li><strong><code><tfoot> —— 必须紧接 <code>thead 后，不能放在 tbody 下方
<tbody> —— 所有数据行必须显式包裹其中，不可省略
<p>写错顺序（比如 <code>tbody 在 thead 前）会导致浏览器自动重排 DOM，JS 获取 table.tHead 或 table.tBodies[0] 时节点位置错乱，position: sticky 在 Safari 中失效，打印时页脚不跨页重复。
thead 和 tbody 的语义分工要清晰
thead 是列定义区，tbody 是数据承载区，二者角色不可混淆：
立即学习“前端免费学习笔记（深入）”；
-
thead内只能放<tr>，且每个单元格必须是 <code><th>（不能用 <code><td>），否则屏幕阅读器无法建立“列标题→数据单元格”的语义关联 <li> <code>th必须设置scope="col"（单级表头）或scope="row"（首列为行标题），多级表头用colspan/rowspan嵌套，但所有th仍需在thead内 -
tbody是唯一允许动态增删的区域：JS 插入新行应调用document.querySelector('tbody').appendChild(tr)，而非直接操作table；Vue/React 渲染数据列表时，v-for或map必须作用于<tr>，外层保持单个 <code><tbody> <h3>多 tbody 场景下的分组逻辑</h3> <p>一个 <code><table> 可包含多个 <code><tbody>，用于语义化区分数据块（如按月份、状态、部门分组）： <ul> <li>每个 <code>tbody必须与thead列数一致（即每行td数 =thead中th总数），不能靠colspan“凑数” -
tfoot全局只有一个，属于整个表，不是每个tbody配一个；若需分组汇总，应在对应tbody内最后一行用<tr class="summary"> 标记，由 CSS 或 JS 单独处理 <li>多个 <code>tbody便于 JS 分片操作：例如document.querySelectorAll('tbody:nth-child(2) tr')只取第二组数据，不影响其他部分 -
thead保持默认display: table-header-group，设top: 0并确保父table有明确宽度（建议table-layout: fixed） -
tbody必须设display: block+max-height: 400px+overflow-y: auto，其子tr和td需重置为display: table-row/table-cell防止列宽崩塌 - 避免对
thead设置过大height或line-height，否则 sticky 区域可能超出视口顶部；列宽建议用width或min-width显式控制，不依赖内容撑开
配合 CSS 实现固定表头与滚动
仅给 thead th 加 position: sticky 不够稳定，需三者协同：
