html表格必须严格按caption→colgroup→thead→tbody→tfoot顺序书写，否则导致表头样式失效、屏幕阅读器丢失列上下文、打印无重复表头、js操作异常等问题。
不写和
会出什么问题
浏览器会自动补全，但补全结果不可控——table.rows可能把第一行
当成普通数据行，thead th样式完全不生效，position: sticky表头直接失效。更隐蔽的是：屏幕阅读器读不出“这是用户名列”，只会逐个念“张三、28、北京”，丢失列上下文；打印时跨页表格的表头也不会自动重复。
必须按→
→
顺序写
这不是书写偏好，是 HTML 规范强制要求的解析逻辑：
-
thead必须紧接caption和colgroup之后，否则某些旧版 Safari 会忽略其 sticky 行为
-
tfoot写在tbody前，浏览器才能提前渲染汇总行，避免等全部数据加载完才显示“合计：¥7900”
- 即使你把
tfoot放在tbody后面，浏览器也会把它移到 DOM 树末尾，导致table.tFoot返回null或指向错误节点
JS 操作 tbody 是唯一安全方式
所有动态增删都必须限定在tbody内，否则极易破坏结构：
- 错误写法：
table.insertRow(-1)——可能插到tfoot里，甚至把新行塞进thead
- 正确写法：
document.querySelector('tbody').insertAdjacentHTML('beforeend', '<tr><td>新数据</td></tr>')
- 遍历数据行时用
document.querySelectorAll('tbody tr')，而不是table.rows（后者包含thead和tfoot的行）
- 多个逻辑区块可用多个
tbody，但每个都必须列数对齐，不能靠colspan“凑数”
th必须在thead里，且不能混用td
th不是“加粗的td”，它是语义锚点：
-
thead里出现td会导致屏幕阅读器无法识别列名，scope="col"属性彻底失效
- 多级表头（如“销售额”下分“Q1”“Q2”）必须用
colspan/rowspan嵌套，但顶层th仍得在thead内
-
th默认居中加粗，但样式可覆盖；真正不可替代的是它告诉辅助技术：“这一列的所有td都属于这个标题”
列数对齐、tr必须嵌套在thead/tbody/tfoot内、caption紧贴table开头——这些不是“最佳实践”，而是浏览器解析和辅助技术依赖的硬性契约。漏掉任何一个，表格就从“能显示”退化成“难维护、难访问、难调试”。
table.rows可能把第一行thead th样式完全不生效，position: sticky表头直接失效。更隐蔽的是：屏幕阅读器读不出“这是用户名列”，只会逐个念“张三、28、北京”，丢失列上下文；打印时跨页表格的表头也不会自动重复。
必须按→
→
顺序写
这不是书写偏好，是 HTML 规范强制要求的解析逻辑：
-
thead必须紧接caption和colgroup之后，否则某些旧版 Safari 会忽略其 sticky 行为
-
tfoot写在tbody前，浏览器才能提前渲染汇总行，避免等全部数据加载完才显示“合计：¥7900”
- 即使你把
tfoot放在tbody后面，浏览器也会把它移到 DOM 树末尾，导致table.tFoot返回null或指向错误节点
JS 操作 tbody 是唯一安全方式
所有动态增删都必须限定在tbody内，否则极易破坏结构：
- 错误写法：
table.insertRow(-1)——可能插到tfoot里，甚至把新行塞进thead
- 正确写法：
document.querySelector('tbody').insertAdjacentHTML('beforeend', '<tr><td>新数据</td></tr>')
- 遍历数据行时用
document.querySelectorAll('tbody tr')，而不是table.rows（后者包含thead和tfoot的行）
- 多个逻辑区块可用多个
tbody，但每个都必须列数对齐，不能靠colspan“凑数”
th必须在thead里，且不能混用td
th不是“加粗的td”，它是语义锚点：
-
thead里出现td会导致屏幕阅读器无法识别列名，scope="col"属性彻底失效
- 多级表头（如“销售额”下分“Q1”“Q2”）必须用
colspan/rowspan嵌套，但顶层th仍得在thead内
-
th默认居中加粗，但样式可覆盖；真正不可替代的是它告诉辅助技术：“这一列的所有td都属于这个标题”
列数对齐、tr必须嵌套在thead/tbody/tfoot内、caption紧贴table开头——这些不是“最佳实践”，而是浏览器解析和辅助技术依赖的硬性契约。漏掉任何一个，表格就从“能显示”退化成“难维护、难访问、难调试”。
thead必须紧接caption和colgroup之后，否则某些旧版 Safari 会忽略其 sticky 行为tfoot写在tbody前，浏览器才能提前渲染汇总行，避免等全部数据加载完才显示“合计：¥7900”tfoot放在tbody后面，浏览器也会把它移到 DOM 树末尾，导致table.tFoot返回null或指向错误节点tbody内，否则极易破坏结构：table.insertRow(-1)——可能插到tfoot里，甚至把新行塞进thead
document.querySelector('tbody').insertAdjacentHTML('beforeend', '<tr><td>新数据</td></tr>')
document.querySelectorAll('tbody tr')，而不是table.rows（后者包含thead和tfoot的行）tbody，但每个都必须列数对齐，不能靠colspan“凑数”th不是“加粗的td”，它是语义锚点：thead里出现td会导致屏幕阅读器无法识别列名，scope="col"属性彻底失效colspan/rowspan嵌套，但顶层th仍得在thead内th默认居中加粗，但样式可覆盖；真正不可替代的是它告诉辅助技术：“这一列的所有td都属于这个标题”前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
