rowspan必须写在起始单元格且只能向下跨行,被跨行对应列的td必须完全省略,值须为≥1正整数且不超过剩余行数,与colspan混用时需同步跳过行列。

rowspan 必须写在起始单元格上,不是哪一行都行
rowspan 只对它所在的那个 <td> 或 <code><th> 生效,且只能向下跨行占位。比如你想让“张三”在第 2、3、4 行都显示,就得把 <code>rowspan="3" 写在第 2 行的 <td rowspan="3">张三</td> 里,而不是第 1 行或第 4 行。
常见错误现象:
- 写了
rowspan="3"却只看到 1 行高度 → 很可能写在了最后一行,没剩余行可跨 - 表格右侧内容整体右移 → 当前行其他
<td> 数量没同步减少,导致列数错配<h3>被跨过的行必须彻底省略对应列的 <code><td> 标签 <p>不是留空,不是写 <code><td></td>,是直接删掉那一列的整个<td> 元素。浏览器靠 <code>rowspan的数值自动跳过指定行数,一旦多写一个<td>,就会挤占空间、导致列偏移甚至 DOM 结构错乱。<p>✅ 正确写法:</p> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记(深入)</a>”;</p><pre class="brush:php;toolbar:false;"><tr> <td rowspan="3">张老师</td> <td>数学</td> </tr> <tr> <td>物理</td> <!-- 第一列省略 --> </tr> <tr> <td>化学</td> <!-- 第一列省略 --> </tr></pre><p>❌ 错误写法:</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill5493" title="html-to-pptx"><img src="https://img.php.cn/upload/skill/000/000/081/179051045119472.jpg" alt="html-to-pptx" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill5493" title="html-to-pptx">html-to-pptx</a> <p>将多页 HTML 演示文稿转换为美化的 PPTX 文件,便于分享和分发。</p> </div> <a href="/xiazai/skill5493" title="html-to-pptx" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div><pre class="brush:php;toolbar:false;"><tr> <td rowspan="3">张老师</td> <td>数学</td> </tr> <tr> <td></td> <!-- 空 td 会占位,破坏结构 --> <td>物理</td> </tr></pre><h3>rowspan 值必须是正整数,不能填 0 或超出行数 </h3> <p><code>rowspan="0"是无效的,浏览器会忽略或退化为rowspan="1"。值必须是 ≥1 的整数,且不能超过从当前行到表格末尾的剩余行数(含当前行)。比如表格只剩 2 行,却写
rowspan="5",浏览器会按最多 2 行渲染,但语义已损坏——table.rows[i].cells.length可能拿不到预期值,JS 读取时索引偏移。动态生成时要注意:
- 服务端或 JS 拼接前,得先统计相同值连续出现的行数
- 只在重复块的第一行设
rowspan,后面同组行对应列直接 omit(不生成<td>)<li>中间隔了一行不同值,就得重置计数,不能只看“值相等”</li> <h3>和 colspan 混用时,行列基准极易偏移 </h3> <p><code>rowspan和colspan可以一起用,例如<td rowspan="2" colspan="2">,但它会同时占据 2 行 × 2 列共 4 个单元格的位置。后续两行中,对应这 2 列的位置都必须跳过。<p>最容易翻车的地方是:某处少写了一个 <code><td>,导致整行列基准偏移,再叠加 <code>colspan就彻底歪了。用开发者工具检查table的 Layout 面板,看是否有 “Collapsed cells” 警告;或者打印Array.from(tr.cells).map(td => td.cellIndex),确认每行索引是否连续。真正难的不是手写静态 HTML,而是当表格从 JSON 渲染时,要提前算好每行该渲染几个单元格——漏掉一次跳过,整张表就偏了。


















