rowspan 的值必须是正整数，严禁设为 0 或负数

首先澄清一个最常见的误解。不少开发者以为 rowspan="0" 可以实现“自动延伸至最后一行”，但实际效果完全无效——浏览器会直接忽略该值，将其退化为 rowspan="1。HTML 规范中明确说明，该属性值必须为大于 0 的整数，不存在任何“自动推算”机制。

正确的做法其实很简单：先精确统计你打算跨越的行数。例如，从第 2 行到第 4 行，总共 3 行，那么应写为 rowspan="3"。如果后续增删了行，这个数值必须手动同步更新。在动态生成表格时，建议在 JavaScript 中先计算好后再写入，而不是硬编码固定值。

• rowspan="2px"、rowspan="-1" 这类非法值，浏览器会静默忽略，且不会抛出任何错误提示。
• 如果设定的数值超出了剩余行数，例如只剩 1 行却设置了 rowspan="5"，Chrome 和 Firefox 会按实际剩余行数渲染，但语义已遭破坏，使用 table.rows[i].cells.length 读取数据时可能引发异常。
• 另外需注意，rowspan 不会跨越 thead 与 tbody 的边界。不要指望表头的 rowspan 能延伸到表体区域，它们属于两个独立的区块。

被跨过的行，必须彻底删除对应列的 标签

这一点是导致表格错位最常见的原因之一。很多人对 rowspan 的机制理解有误——它并非“覆盖”，而是“占位后跳过”。当你设置了 rowspan="3" 之后，后续两行同一列的位置绝对不能出现任何 td 或 th 标签，即使是空标签也不行。

请仔细看，正确的结构如下所示：

  张老师  数学  物理   化学 

而下面这种写法则是典型的错误示范：

  张老师  数学     物理

• 使用浏览器开发者工具选中 table，右侧面板 Layout 中如果出现“Collapsed cells”警告，通常就是因为这里漏删了 td。
• JS 读取 tr.cells 时出现索引偏移，往往是由于某行多写了一个 td。
• 在 React 或 Vue 中通过 .map() 或 v-for 渲染时，需要提前聚合数据，不能仅靠条件渲染临时跳过——很容易遗漏隐藏的 td。

rowspan 与 colspan 混用时，每行总列数必须保持一致

这条规则说起来简单，但实际操作中经常翻车。每一行所有单元格的 colspan 值之和，必须等于表格的逻辑总列数（通常由表头定义）。rowspan 不参与这个计算，但它会使被跨越的那些行“少画”某些列——因此你必须手动确保：被 rowspan 跳过的列，在后续行中不能通过补 td 来凑数。

几个容易踩坑的细节：

• 在包含 rowspan 的行后面又添加了 colspan，结果跨列区域出现偏移——本质是前面某处少写了一个 td，导致整行列基准错位。
• Chrome 控制台报出“Table row has fewer cells than required”错误，这并非 JS 错误，而是某行 colspan 总和与预期列数不匹配。
• 调试时有一个笨但有效的方法：手绘草图，标出每个 rowspan 的覆盖范围；逐行统计 colspan 值之和；再通过元素面板查看实际 DOM 结构，比单纯看代码更直观。

复杂合并场景下，可访问性与维护成本远高于视觉收益

最后不得不提一下可访问性的问题。多数屏幕阅读器无法正确关联被 rowspan 跨过的单元格与表头，尤其当表头本身也使用了 rowspan 或 colspan 时，th scope="row" 和 th scope="col" 的语义很容易断裂。

因此，如果表格需要长期维护，或面向残障用户，建议优先考虑以下方案：

• 使用 thead / tbody 配合 headers 属性，显式绑定单元格与表头。
• 采用 CSS Grid 或 Flex 布局替代复杂表格布局，避开 rowspan 的维护陷阱。
• 避免在同一个 td 上同时设置 rowspan="2" 和 colspan="2"，再叠加其他跨行单元格——嵌套越深，调试难度越大。

说白了，rowspan 本身并不复杂，但真正让人头疼的，是后续的每一次增删改操作。只要改动一行，就必须重新核算所有相关数值，一旦某个值未更新，整张表就会错位。还是那句话，能用 CSS 解决的问题，尽量别碰表格的合并功能。