结论：tr 是行容器，td 是普通数据单元格，th 是语义化的表头单元格，三者必须嵌套使用且 tr 必须包裹 td 或 th；浏览器报“td outside tr”因 HTML 解析器强制 table→tr→td/th 层级，缺失 tr 会导致解析警告、样式异常与可访问性失效。
直接说结论： tr 是行容器，td 是普通数据单元格，th 是语义化的表头单元格——三者必须嵌套使用，且 tr 必须包裹 td 或 th，不能单独存在。
为什么浏览器会报“td outside tr”错误
HTML 解析器严格要求表格结构层级：table → tr → td/th。如果写成 <table><td>内容</td></table>，浏览器无法推断行边界，会自动补全或静默修正，但控制台常抛出解析警告，且样式、可访问性（如屏幕阅读器）可能失效。
常见错误场景包括：
- 复制粘贴时漏掉
<tr>和</tr> - 用 JS 动态生成表格时字符串拼接错位，比如
'<tr>' + data.map(...).join('') + '</tr>'忘加外层tr - 误把
thead/tbody当作可省略的“行容器”，其实它们只是逻辑分组，内部仍需tr
th 不只是“加粗居中”，它影响语义和可访问性
th 的核心价值不在默认样式，而在明确告诉浏览器“这是标题”，从而支持：
立即学习“前端免费学习笔记（深入）”；
- 屏幕阅读器自动关联该
th与同列/同行的td（尤其配合scope或headers属性） - 辅助技术识别数据维度（如“第2列所有
td的含义由第1行第2个th定义”） - CSS 中用
th[scope="col"]精准选中列头，避免误伤行头
注意：th 默认居中加粗是 UA 样式，可被 CSS 覆盖；但语义不会消失。不要因为要左对齐就改用 td —— 应该保留 th 并加 style="text-align: left;"。
colspan 和 rowspan 在 td 和 th 中行为一致，但语义不同
这两个属性在 td 和 th 上语法完全相同，但使用意图差异明显：
-
<th colspan="2">成绩汇总</th>表示“这一标题横跨两列”，适合合并列头 -
<td rowspan="3">张三</td>表示“张三这个名字在三行内共用”，适合合并数据行 - 若在
th上滥用rowspan（如让列头纵跨多行），可能破坏列对齐逻辑，导致屏幕阅读器误读关联关系 -
colspan/rowspan值必须是正整数，设为0或负数无效，浏览器会忽略
最容易被忽略的是：即使视觉上看起来“没区别”，th 和 td 在 DOM 结构、语义、可访问性 API 中完全不同。用错一个标签，后台导出 Excel、自动化测试定位、残障用户浏览都可能出问题——这不是“能显示就行”的事，而是结构契约。
