table的合法直接子元素仅限caption、colgroup、thead、tbody、tfoot和tr；tr必须为table或其内部表头/主体/页脚的直接子元素，不可嵌套于div等容器中，否则触发浏览器自动纠错导致布局与逻辑异常。
table 里只能直接放 caption、colgroup、thead、tbody、tfoot 和 tr
浏览器对 table 的 DOM 结构非常严格：tr 必须是 table 或 tbody/thead/tfoot 的**直接子元素**，不能套在 div、span、section 甚至空格文本里。否则会触发「自动纠错」——浏览器悄悄把非法嵌套的 tr 提到 table 外面，或塞进隐式 tbody，导致布局错乱、CSS 选择器失效、JS 拿不到预期节点。
- 错误写法：
… tr被踢出table - 正确骨架：
… tbody可省略，但建议显式写出） - 想加逻辑分组？用
或，别用divtr下只能直接放th或td，不能套容器tr是行级语义容器，它的子元素只能是单元格（th或td）。任何在tr里包裹div、span、article来「组织内容」的行为，都会破坏表格语义，且可能让屏幕阅读器误读、打印样式异常。- 错误：
内容 div会被浏览器忽略或移到tr外 - 正确：
内容 td上 - 需要复杂内嵌结构？
td内部可以自由放div、img、button等，只要不越级
多层表格嵌套：用
td当「画布」，别碰table套table真要嵌套表格（比如某单元格展示子数据），唯一合法位置是
td或th内部。但要注意：table嵌套本身会显著增加渲染开销，且可访问性差；现代场景更推荐用 CSS Grid/Flex 替代。- 允许：
子表内容 - 禁止：
… table不是tr的合法子元素 - 性能提示：嵌套超过 2 层时，Chrome DevTools 的 Layers 面板常显示「Composite layer」激增，滚动卡顿明显
动态生成表格时，
innerHTML容易踩坑用 JS 拼接字符串赋值给
table.innerHTML时，如果字符串含非法嵌套（比如漏了tbody、多写了div），浏览器解析后 DOM 结构可能和预期完全不同。立即学习“前端免费学习笔记（深入）”；
- 反例：
table.innerHTML = "→ 浏览器自动补A ，但你 JS 里没声明，后续table.tBodies[0].rows才能取到- 推荐：
const tr = table.insertRow(); const td = tr.insertCell(); td.textContent = "A";—— 原生 API 强制遵守规范- 框架用户（React/Vue）：确保 JSX/模板中
实际项目里最常被忽略的是：即使 HTML 校验器不报错，只要用了自定义属性或 Web Component 封装tr父级是table或tbody，别用v-for直接包tr在div里tr，Shadow DOM 或属性劫持就可能让浏览器无法识别其语义位置——这时候display: table-row往往比硬套标签更可控。 - 推荐：
- 错误：
