标准数据单元格必须用且严格嵌套在内，因浏览器依赖table→tr→td层级解析，裸放会触发不可控自动补tr并破坏可访问性；colspan/rowspan定义逻辑网格而非视觉拉伸；headers属性通过ID绑定表头与数据单元格，是WCAG强制要求；所有样式须用CSS实现。
标准数据单元格必须用 这两个属性不是“视觉拉伸”，而是明确告诉浏览器：“这个 最容易被忽略的是 <td>，不能用 <code><th> 代替，也不能裸写在 <code><tr> 外面——这是语义、可访问性和渲染行为的硬性边界。
<h3>为什么 <code><td> 不能放在 <code><tr> 外面
<p>浏览器解析表格时严格依赖嵌套层级：<code><table> → <code><tr> → <code><td> 或 <code><th>。如果把 <code><td> 直接丢进 <code><table> 里（没包 <code><tr>），多数浏览器会自动补一个 <code><tr>，但补的位置不可控，可能破坏行结构；更糟的是，屏幕阅读器可能跳过该单元格或误读为孤立内容。
<ul>
<li>错误写法：<code><table><td>数据</td></table>
<table><tr><td>数据</td></tr></table>
<tr> 中的 <code><td> 数量应与表头列数逻辑一致（考虑 <code>colspan/rowspan 后的等效列数）
colspan 和 rowspan 的真实作用范围<td> 占据了 N 列/N 行的逻辑位置”，直接影响表格网格的坐标计算。漏算会导致后续单元格错位，尤其在动态生成表格时容易出 bug。
<ul><li>
<code>colspan="2"：该 <td> 横向覆盖两列，同一行中它右侧的下一个 <code><td> 自动跳到第 3 列起始位置
<li>
<code>rowspan="3"：该 <td> 纵向跨越三行，后续两行中对应列位置必须留空（不写 <code><td>），否则会多出一列
<li>混用时优先保证网格完整性，建议手动画格子草图验证，别靠预览猜</li>
<h3>headers 属性是复杂表格可访问性的关键开关</h3>
<p>当表格有多个表头行（比如分组表头）、或表头在侧面（横向表头），仅靠视觉对齐无法让屏幕阅读器理解“这个数据单元格对应哪几个表头”。<code>headers 属性通过 ID 引用显式绑定关系，是 WCAG 2.1 的强制要求项。<th id="xxx"> 使用，例如：<code><th id="grade">成绩</th> + <td headers="grade">95</td>
headers="subject grade year"
scope（它只适用于单层表头），也不用 CSS 类名——只有 ID 能被 headers 正确识别CSS 替代旧属性是唯一可靠方案
align、valign、bgcolor 等 HTML4 属性在 HTML5 中已废弃，现代浏览器虽仍兼容，但会在 DevTools 控制台报 warning，且某些邮件客户端或老旧渲染引擎会直接忽略。所有样式控制必须走 CSS。<td style="text-align: center;"> 或外链 class
<li>垂直居中：<code>vertical-align: middle;（注意：它作用于单元格内容，不是单元格自身高度）background-color: #f9f9f9;，而非 bgcolor="#f9f9f9"
headers 属性的缺失——它不影响视觉，也不报错，但会让残障用户完全无法理解数据归属；另一个隐形坑是 rowspan 后忘记跳过对应位置的 <td>，导致整行列数错乱，调试时得从 DOM 结构树一层层数格子。</td>
