rowspan不是视觉上的“拉高单元格”，而是向浏览器声明该单元格纵向占据N行网格位置；若后续行未主动跳过被占用列，浏览器将自动补空<td>导致结构错乱、列数膨胀、JS读取异常。掌握网格占位逻辑，才能写出稳定可靠的复杂表格。
`rowspan`不是视觉上的“拉高单元格”，而是向浏览器声明该单元格纵向占据n行网格位置；若后续行未主动跳过被占用列，浏览器将自动补空`
在HTML表格开发中，rowspan常被误称为“跨行合并”，但这一说法极易引发认知偏差——它不合并单元格，也不改变其他行的结构，而是向浏览器的底层网格渲染引擎发出一条明确指令：“从此行起，本列的接下来 n−1 行位置已被此单元格‘锁定’，后续 <tr> 中同一列不得再出现任何 <td> 或 <th>”。
这正是你原始代码中表格“行交替错位”的根本原因：
<!-- ❌ 错误嵌套 + 未跳过被占列 --> <tr><td rowspan="5">Sem2</td></tr> <tr><td>sub4</td></tr> <tr><td>sub5</td></tr> <tr><td>sub6</td></tr>
这段代码看似清晰，实则存在两个致命问题：
- 非法嵌套：<tr> 内部不能再嵌套 <tr>（你的XML式写法 <tr><tr>...</tr></tr> 违反HTML语法，浏览器会强制纠错，插入隐式闭合与新开行，造成不可预测的DOM结构）；
- 未跳过被占列：rowspan="5" 声明该单元格纵向覆盖5行（含当前行），意味着第2–5行的第1列位置已被永久预留。但后续四行仍各自写了完整的 <td>subX</td>，即每行都试图在第1列写内容——浏览器只能妥协：为每个 <td> 分配新列，最终把1列逻辑表渲染成多列错位布局。
✅ 正确写法必须严格遵循“占位—跳过”原则：
立即学习“前端免费学习笔记（深入）”；
<table border="1">
<tr>
<td rowspan="20"><b>Department</b></td>
<!-- 第1行：部门列已占满20行，后续19行该列必须留空 -->
</tr>
<!-- Sem1 区块：共3行（1个标题+2个子项），故rowspan="3" -->
<tr>
<td rowspan="3">Sem1</td>
<td>sub1</td>
</tr>
<tr>
<td>sub2</td> <!-- 注意：此处无第1列<td>！因为已被Sem1占用 -->
</tr>
<tr>
<td>sub3</td>
</tr>
<!-- Sem2 区块：同理，rowspan="3"，且后续两行跳过第1列 -->
<tr>
<td rowspan="3">Sem2</td>
<td>sub4</td>
</tr>
<tr>
<td>sub5</td>
</tr>
<tr>
<td>sub6</td>
</tr>
<!-- Sem3 同理 -->
<tr>
<td rowspan="3">Sem3</td>
<td>sub7</td>
</tr>
<tr>
<td>sub8</td>
</tr>
<tr>
<td>sub9</td>
</tr>
</table>? 关键理解要点：
- 网格先行，渲染后置：浏览器先构建一个逻辑二维网格（由所有 rowspan/colspan 声明共同定义），再按行逐个填充单元格。rowspan="3" 不是“让这个<td>变高”，而是“预订第X列的第1、2、3行”。
- 跳过 ≠ 留空标签：被占用列必须完全不写 <td>，而非写 <td></td> 或 <td> </td>。后者仍会占据网格位置，导致列数溢出。
- 动态操作需同步清理：JavaScript 动态添加/删除行时，若涉及 rowspan 单元格，必须手动移除其覆盖范围内的冗余 <td>，否则 row.cells.length 可能返回错误值，PDF导出或无障碍读取将失败。
- 验证建议：使用 W3C HTML Validator 检查结构合法性；在浏览器开发者工具中查看 Elements 面板下的实际 DOM 结构（注意自动生成的 <tbody>），确认每行 <tr> 的 cells.length 是否符合预期。
? 实用技巧：编写复杂表格前，先手绘网格草图，用不同颜色标出 rowspan/colspan 占据区域，再逐行填写单元格——这是避免“补空格式编码”的最可靠方法。
最后提醒：永远使用标准HTML（非XML语法），确保文档类型声明为 <!DOCTYPE html>，并用 <thead>/<tbody> 明确语义分组。这不仅提升可维护性，更是实现无障碍访问（如屏幕阅读器准确播报表头关系）和CSS精准样式控制的基础。
