table必须有tr，因为HTML规范限定tr是唯一能承载单元格的刚性支点；漏掉tr会导致语义塌陷、浏览器补全不可靠、JS操作失败及无障碍支持失效。

table 必须有 tr，否则就是无效结构——浏览器会自动补全，但补全结果不可靠，尤其在老版本 IE 或 JS 动态操作时容易出错。

为什么 tr 是表格结构的刚性支点

HTML 规范明确限定：table 的合法直接子元素只有 caption、colgroup、thead、tbody、tfoot 和 tr。其中只有 tr 能独立承载单元格；漏掉它，整个表格语义就塌了。

• <table><td>A</td></table> 看似能渲染，实则被浏览器悄悄转成 <table><tbody><tr><td>A</td></tr></tbody></table>，但这个补全过程不保证 thead 或 colgroup 位置正确
• JS 用 insertRow() 插入行时，目标必须是 tbody 或 table 元素，不能直接往 table 下 append td
• 写成 <table><thead><th>Name</th></thead></table> 是无效的——thead 内部必须包一层 tr，否则屏幕阅读器无法识别表头行

th 和 td 不是“换着用就行”的样式开关

th 表达的是语义上的“表头”，不是“加粗居中的 td”。混用会导致辅助技术误读、CSS 选择器失效、甚至影响 aria 表格导航逻辑。

HTML汇报生成器

🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。

下载

• 列标题统一用 th，放在 thead 的 tr 里；行标题（如首列“张三”“李四”）也该用 th，但需加 scope="row"
• 所有纯数据单元格必须用 td，哪怕内容是空字符串、数字或图标；用 th 填数据会让屏幕阅读器反复朗读“标题：28”，而非“年龄：28”
• 合并单元格时，<th colspan="2">销售额</th> 合法，但 <th rowspan="2">Q1</th><td>Jan</td> 会破坏列对齐——第二行没留空，导致后续 td 错位

caption 不是可有可无的装饰

caption 是 table 的唯一语义化标题，不是外面套个 h3 就能替代的。它对无障碍访问、SEO 和表格上下文理解至关重要。

• 必须是 table 的第一个或最后一个子元素；写在中间会被浏览器强制移到开头
• 即使设为 visibility: hidden 或 clip 隐藏，屏幕阅读器仍会朗读，适合做“视觉隐藏但语义保留”的说明
• 空表格（比如加载中、暂无数据）也要写 <caption>暂无数据</caption>，否则辅助技术可能跳过整块区域

真正容易被忽略的不是“要不要加 thead”，而是“加了之后有没有确保它里面只有一层 tr，且该 tr 里全是 th”。结构松动一环，后续所有 JS 操作、CSS 定位、无障碍支持都会开始掉链子。