使用hidden属性隐藏因rowspan/colspan产生的表格单元格是否语义正确？

在HTML表格中使用rowspan/colspan实现单元格跨多行或多列时，标准做法是移除被跨单元格覆盖位置的单元格，以此保证表格结构的语义正确性，示例代码如下：

<table>
  <tr>
    <td colspan="3" rowspan="2">#1</td>
  </tr>
  <tr></tr>
  <tr>
    <td>#7</td>
    <td>#8</td>
    <td>#9</td>
  </tr>
</table>

但你提到的给被覆盖位置添加带hidden属性的空<td>的写法，在语义上是无效的，具体分析如下：

问题核心 #

从HTML规范角度，hidden属性仅负责隐藏元素，使其不参与页面渲染、交互，且默认对辅助技术不可见，但它不会改变元素在DOM结构中的存在性。而表格的语义结构依赖于行与列的严格对应——当某个单元格通过rowspan/colspan占据其他位置时，那些位置本来就不应该存在单元格，添加带hidden的<td>本质是给表格插入了冗余的、不符合结构逻辑的元素。

潜在问题 #

1. 结构不一致：DOM结构中的单元格数量和表格实际的视觉/语义行列数不匹配，违反了表格的结构规范。
2. 无障碍风险：部分辅助技术（如屏幕阅读器）可能会解析到这些隐藏的空单元格，读出“空单元格”的提示，干扰用户对表格结构的理解。

针对你的场景的替代方案 #

你提到开发富文本编辑器时，空块元素会被自动添加空<span>，但空<tr>内加<span>属于无效HTML。这种情况下，建议给空<tr>添加无内容的注释来填充，既不会触发编辑器的空块规则，又能保持表格的语义正确性：

<table>
  <tr>
    <td colspan="3" rowspan="2">#1</td>
  </tr>
  <tr><!-- 预留rowspan占用的行 --></tr>
  <tr>
    <td>#7</td>
    <td>#8</td>
    <td>#9</td>
  </tr>
</table>

注释不会被浏览器渲染，也不属于DOM元素，完全符合HTML规范，同时能规避编辑器的约束问题。

内容的提问来源于stack exchange，提问作者xohr