rowspan必须写在起始中，从当前单元格向下占位，被跨行列必须省略对应，否则破坏对齐；值须为正整数，混用colspan时需确保每行有效列数一致，且注意可访问性与维护成本。

rowspan 必须写在起始 <td> 里，不是被跨行的位置 <p>很多人把 <code>rowspan="2" 写在第二行第一列的 <td> 里，结果没效果——因为浏览器只认“源头声明”。<code>rowspan 是从当前单元格向下占位，它不作用于已渲染完的上一行，也不影响后续手动写的同列单元格。

正确做法是：要让某内容纵向占两行，就在它**第一次出现的那一行、那一列**的 <td> 上加 <code>rowspan，然后下一行对应列**必须省略这个 <td>**。 <ul> <li>错误写法：<code><tr><td>A</td></tr> <tr> <td rowspan="2">B</td> <td>C</td> </tr>（B 所在位置已被上一行 A 占满，rowspan 失效）

正确写法：<tr> <td rowspan="2">A</td> <td>B</td> </tr> <tr><td>C</td></tr>（A 起始声明，第二行跳过第一列）

rowspan 值必须是正整数，rowspan="0" 被忽略为 1；填 999 在 IE 中可能异常，别凑数

colspan 和 rowspan 混用时，每行 <td> 总数必须对齐 <p>表格每行的“有效列数”由所有 <code>colspan 和 rowspan 动态叠加决定。浏览器不会帮你算总数，它只按源码逐行解析并累加各单元格宽度（colspan）和高度（rowspan 占位），一旦某行漏写或错写 <td>，后续所有行都会偏移。 <p>例如第一行：<code><td colspan="2">标题</td> <td>姓名</td> → 实际占 3 列；第二行若只写 <td>张三</td> <td>25</td>（2 个单元格），浏览器会自动补一个空 <td>，导致最后一列错位。 <ul><li>解决方法：用开发者工具检查每个 <code><tr> 渲染后的实际 <code>cells 数量，比数源码更可靠

混合使用时，优先手绘网格草图，标出每个 <td> 的 <code>rowspan 和 colspan 值再编码

避免在带大 rowspan 的行后紧跟 colspan="3"，容易因列基准偏移导致跨列区域“歪斜”

被跨行列必须彻底省略对应 <td>，不能留空或写空标签 <p><code>rowspan 不是“覆盖”，而是“预留空间”。它让该单元格向下延伸，同时要求被跨过的那些行在相同列位置**不出现任何 <td> 或 <code><th>**。哪怕写成 <code><td></td> 或 <td> </td>，也会被当成一个真实单元格，破坏列对齐。

常见翻车点：JS 动态生成表格时，循环每行都 push 了固定数量的 <td>，但忘了对被跨行列做条件跳过，结果渲染出错位甚至重叠。 <ul><li>正确：第 1 行 <code><td rowspan="3">部门</td> <td>张三</td> → 第 2、3 行就**不能出现第一个 <td>** <li>错误：<code><tr> <td></td> <td>李四</td> </tr>（空单元格撑开列宽，视觉错位）

调试技巧：在开发者工具中选中 <table>，右侧面板 Layout 区域若显示 “Collapsed cells”，说明存在隐性列冲突 <h3>可访问性风险：屏幕阅读器很难理解 rowspan 合并关系</h3> <p>当 <code><th> 使用 <code>rowspan 或 colspan，尤其嵌套使用时，多数屏幕阅读器无法准确将数据单元格与对应表头建立语义关联。比如一个 <th rowspan="2">姓名</th> 下面两行的 <td>，读屏软件可能只报“张三”，不报“姓名：张三”。 <p>这不是样式问题，是 HTML 语义断裂。如果表格用于关键数据展示（如报表、课程表），且需满足无障碍标准，就不能依赖视觉合并。</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML"><img src="https://img.php.cn/upload/skill/000/000/081/178998486916110.jpg" alt="Doc To HTML" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="overflowclass">Doc To HTML</a> <p class="overflowclass">使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。</p> </div> <a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <ul><li>替代方案：用 <code><thead>/<code><tbody> 明确分区，配合 <code>headers 属性显式绑定，例如 <td headers="name-col">张三</td>

复杂布局建议改用 CSS Grid，语义清晰、响应友好、维护成本低

rowspan 维护成本高：增删行时必须手动同步所有 rowspan 值，JS 动态计算也易出错

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！