tr必须包裹td，不能省略或颠倒层级；浏览器强制table→tr→td嵌套顺序，否则触发“td outside tr”警告、dom错乱、css/js失效、可访问性中断。
tr 必须包裹 td，不能省略或颠倒层级
浏览器解析 HTML 表格时，强制要求 table → tr → td（或 th）的嵌套顺序。写成 <table><td>内容</td></table> 会触发“td outside tr”警告，且实际渲染可能错乱——浏览器会自动补 tr，但 DOM 结构已非预期，CSS 选择器、JS 查询（如 document.querySelectorAll('tr td')）可能漏匹配。
- 动态生成表格时常见错误：
'<tr>' + rows.map(r => `<td>${r.name}</td>`).join('') + '</tr>'写对了，但若漏掉外层tr字符串拼接，就会直接把td塞进table -
thead、tbody不是行容器，它们只是逻辑分组；内部仍需用tr包裹td或th - 即使视觉上只有一列数据，也必须用
tr包一层，不能图省事写成<table><td>单格</td></table>
td 只能在 tr 内部生效，否则语义和可访问性全失效
td 的语义是“某行中的一个数据单元”，脱离 tr 就失去行上下文。屏幕阅读器无法判断它属于哪一行、与哪些表头关联（尤其当用了 scope 或 headers 属性时），键盘导航（如 Tab 键在表格中移动）也会中断。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 用
th替代td不能绕过这个限制——th同样必须嵌套在tr中 - CSS 中写
td { background: #eee; }在td没被tr包裹时可能不生效，因为浏览器修正后的 DOM 节点路径已变 - 服务端渲染或 SSR 场景下，缺失
tr更容易导致首屏结构错乱，影响 SEO 和 LCP
tr 和 td 的数量关系决定表格列数一致性
每一行 tr 内的 td（或 th）数量，定义了该行的列数。浏览器按首行列数做默认对齐，后续行若 td 数量不一致，会自动补空单元格，但易引发样式错位或 JS 数据映射错误。
- 合并单元格时，
colspan和rowspan是唯一合法的“列数不一致”手段，但需确保总跨度逻辑自洽 - 用 JS 动态渲染多行数据时，务必校验每行
td数量是否等于表头th数量，否则斑马线、hover 效果可能偏移 - 不要依赖浏览器自动补全来“修复”列数差异——那只是容错行为，不是规范做法
为什么不能用 div 模拟 tr/td 来绕开限制
纯 CSS Grid 或 Flex 布局虽能视觉上模拟表格，但无法替代 tr/td 的语义与可访问性能力。例如：没有原生的列关联机制，aria-colindex 手动维护成本高，且不支持 Excel 导出、打印分页等表格特有行为。
- 如果真需要高度定制化布局，优先考虑
display: table系列 CSS（table-row、table-cell），它复现了 HTML 表格的渲染规则，同时保留语义层级 - 用
role="row"+role="cell"手动模拟，必须同步处理键盘导航、焦点管理、屏幕阅读器 announce 逻辑，复杂度远超直接用tr/td - 最常被忽略的是：即使你只关心视觉效果，搜索引擎和辅助技术仍按 HTML 元素语义解析——
div永远不是表格行
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
