rowspan必须写在起始行且仅对该单元格生效，向下跨行占位；被跨行须完全省略对应列的td元素，否则导致列错位或dom错乱。
rowspan必须写在起始行的或
上跨行合并不是“哪一行加都行”，rowspan只对它所在的那个单元格生效，并向下锁定对应列位置。比如你想让第二行第一列跨3行，就得把rowspan="3"写在第二行的<td rowspan="3">里，而不是第一行或第四行。<p>常见错误现象：<br>写了<code>rowspan="3"却只看到1行高度——大概率写在了最后一行，没剩余行可跨；
表格列错位、右侧内容整体右移——rowspan所在行的其他<td>数量没同步减少。<p>关键点：<code>rowspan值必须 ≤ 从当前行到表格末尾的剩余行数（含当前行）。它不改变当前行高度，只是“占位”：后续行同一列位置不能再出现<td>或<code><th>。<h3>被跨过的行必须彻底省略对应列的<td>标签<p>不是留空，不是写<code><td><code>，是直接删掉那一列的整个<td>元素。浏览器靠<code>rowspan的数值自动跳过指定行数，一旦多写一个<td>，就会挤占空间、导致列偏移甚至 DOM 结构错乱（比如<code>tr.cells.length拿不到预期值）。
✅ 正确写法：
<tr>
<td rowspan="3">张老师</td>
<td>数学</td>
</tr><tr>
<td>物理</td> <!-- 第一列省略 -->
</tr><tr>
<td>化学</td> <!-- 第一列省略 -->
</tr>
❌ 错误写法：
<tr>
<td rowspan="3">张老师</td>
<td>数学</td>
</tr><tr>
<td></td> <!-- 空 td 会占位，破坏结构 -->
<td>物理</td>
</tr>
动态生成时容易漏掉的统计逻辑
服务端渲染或 JS 拼接表格时，rowspan不是静态写死就能一劳永逸的——得先统计相同值连续出现的行数，再决定在哪一行写rowspan，其余行跳过该列。
- 不能只看“值相等”，还要确认是否「相邻行」，中间隔了一行不同值，就得重置计数
- 通常只在重复块的第一行设置
rowspan，后面同组行对应列直接 omit（不生成<td>）<li>用 JS 动态操作时，修改<code>rowspan属性后，DOM 会重排，但不会自动删除已被跨过的<td>，必须手动移除，否则显示重复<li>Vue/React 中若用<code>v-for或map渲染，需提前聚合数据，而不是在模板里if-else判定——否则容易漏掉隐藏的<td>
<h3>rowspan对样式和可访问性的影响</h3>
<p><code>rowspan是 HTML 表格语义的一部分，用于数据表（如成绩单、配置项列表），不推荐用于页面整体布局。真正难的不是写对rowspan，而是当表格动态生成（比如从 JSON 渲染）时，要提前算好每行该渲染几个单元格——漏掉一次跳过，整张表就偏了。
多数屏幕阅读器无法正确关联被rowspan跨过的单元格与表头，尤其是当表头本身也用了rowspan或colspan时，<th scope="row">和<code><th scope="col">的语义容易断裂。如果表格用于数据展示且需无障碍支持，优先考虑用<code><thead>/<code><tbody>结构 + <code>headers属性显式绑定，而不是依赖视觉跨行。
跨行合并不是“哪一行加都行”，rowspan只对它所在的那个单元格生效，并向下锁定对应列位置。比如你想让第二行第一列跨3行，就得把rowspan="3"写在第二行的<td rowspan="3">里，而不是第一行或第四行。<p>常见错误现象：<br>写了<code>rowspan="3"却只看到1行高度——大概率写在了最后一行，没剩余行可跨；
表格列错位、右侧内容整体右移——rowspan所在行的其他<td>数量没同步减少。<p>关键点：<code>rowspan值必须 ≤ 从当前行到表格末尾的剩余行数（含当前行）。它不改变当前行高度，只是“占位”：后续行同一列位置不能再出现<td>或<code><th>。<h3>被跨过的行必须彻底省略对应列的<td>标签<p>不是留空，不是写<code><td><code>，是直接删掉那一列的整个<td>元素。浏览器靠<code>rowspan的数值自动跳过指定行数，一旦多写一个<td>，就会挤占空间、导致列偏移甚至 DOM 结构错乱（比如<code>tr.cells.length拿不到预期值）。
✅ 正确写法：
<tr> <td rowspan="3">张老师</td> <td>数学</td> </tr><tr> <td>物理</td> <!-- 第一列省略 --> </tr><tr> <td>化学</td> <!-- 第一列省略 --> </tr>
❌ 错误写法：
<tr> <td rowspan="3">张老师</td> <td>数学</td> </tr><tr> <td></td> <!-- 空 td 会占位，破坏结构 --> <td>物理</td> </tr>
动态生成时容易漏掉的统计逻辑
服务端渲染或 JS 拼接表格时，rowspan不是静态写死就能一劳永逸的——得先统计相同值连续出现的行数，再决定在哪一行写rowspan，其余行跳过该列。
- 不能只看“值相等”，还要确认是否「相邻行」，中间隔了一行不同值，就得重置计数
- 通常只在重复块的第一行设置
rowspan，后面同组行对应列直接 omit（不生成<td>）<li>用 JS 动态操作时，修改<code>rowspan属性后，DOM 会重排，但不会自动删除已被跨过的<td>，必须手动移除，否则显示重复<li>Vue/React 中若用<code>v-for或map渲染，需提前聚合数据，而不是在模板里if-else判定——否则容易漏掉隐藏的<td> <h3>rowspan对样式和可访问性的影响</h3> <p><code>rowspan是 HTML 表格语义的一部分，用于数据表（如成绩单、配置项列表），不推荐用于页面整体布局。真正难的不是写对rowspan，而是当表格动态生成（比如从 JSON 渲染）时，要提前算好每行该渲染几个单元格——漏掉一次跳过，整张表就偏了。多数屏幕阅读器无法正确关联被
rowspan跨过的单元格与表头，尤其是当表头本身也用了rowspan或colspan时，<th scope="row">和<code><th scope="col">的语义容易断裂。如果表格用于数据展示且需无障碍支持，优先考虑用<code><thead>/<code><tbody>结构 + <code>headers属性显式绑定，而不是依赖视觉跨行。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
