table必须严格嵌套tr，tr内必须用th或td，缺任一环将导致渲染失败或内容丢失；常见错误是跳过tr直接写td，或误用div等非法子元素。
直接能用，但结构错一环就渲染失败——table必须嵌套tr，tr里必须有th或td，缺任何一个，浏览器会丢弃内容或降级为纯文本。
table→tr→td/th 是硬性嵌套链，不能跳过任何一层
常见错误是写成 <table><td>姓名</td></table> 或 <table><div>数据</div></table>，浏览器直接忽略这些无效子节点，表格“消失”或只显示裸文本。
-
table只接受caption、colgroup、thead、tbody、tfoot、tr作为直接子元素 -
tr只能包含th、td（或script等元标签，但无实际渲染意义） - 哪怕只有一行数据，也必须包一层
tr：<table><tr><td>单格</td></tr></table> - 漏掉
tr是新手最高频错误，调试时看开发者工具 Elements 面板，如果td被“提升”到body下，说明结构非法
th 和 td 别混用语义，屏幕阅读器靠这个判断列含义
把所有单元格都写成 td 虽然能显示，但会让辅助技术无法区分标题和数据——比如“姓名”列被读作“姓名，数据”，而非“姓名，表头”。
-
th应仅用于真正起标识作用的单元格：列标题（如“订单号”）、行标题（如首列的“张三”） -
th默认加粗+居中，但样式可覆盖；语义不可替代 - 多级表头必须配合
scope属性：<th scope="col">销量</th>表示管整列，<th scope="row">Q1</th>表示管整行 - 不要为“看起来更醒目”而滥用
th：数据行里夹一个th会破坏结构逻辑，JS 操作时易出错
没边框≠没结构，调试时先加 CSS 边框再排查
表格默认无边框、无内边距、单元格紧贴，看起来像乱码——这不是代码错了，只是视觉反馈缺失。
立即学习“前端免费学习笔记（深入）”；
- 临时加
style="border: 1px solid #000;"到table、th、td上，立刻看清行列是否对齐 - 正式项目禁用
border属性（HTML5 已废弃），统一用 CSS：border-collapse: collapse;消除缝隙，padding控制内容呼吸感 - 如果加了边框仍“看不见”，检查是否被父容器
overflow: hidden截断，或display: none误设 - 响应式场景下，小屏溢出不是表格问题，而是缺少外层滚动容器：
<div style="overflow-x: auto;"><table>...</table></div>
colspan/rowspan 不是“拉伸”，是“占位”，填错数量必错行
colspan="2" 不是让单元格变宽，而是声明“我占本行连续两列的位置”，后续单元格必须跳过对应列数，否则整行列数失衡。
- 示例：
<tr><td colspan="2">合并单元格</td><td>第三列</td></tr>—— 这行共 3 列（2+1） - 若其他行只有两个
td，就会错位；必须统一列数，或用colspan对齐 -
rowspan="3"表示该单元格向下占用 3 行高度，那么它下方两行的对应列位置必须留空（不放td） - 复杂合并建议先画草图标列数/行数，再写代码；用开发者工具检查渲染后实际列数是否匹配预期
真正难的不是写出来，而是写对——thead 和 tbody 看似可选，但一旦涉及 JS 动态操作、打印分页或无障碍支持，缺了它们就会在某个环节突然崩掉。别省那几行标签。
