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下 appendtd - 写成
<table><thead><th>Name</th></thead></table>是无效的——thead内部必须包一层tr，否则屏幕阅读器无法识别表头行
th 和 td 不是“换着用就行”的样式开关
th 表达的是语义上的“表头”，不是“加粗居中的 td”。混用会导致辅助技术误读、CSS 选择器失效、甚至影响 aria 表格导航逻辑。
- 列标题统一用
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 定位、无障碍支持都会开始掉链子。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
