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