rowspan用于纵向跨行，colspan用于横向跨列，必须在左上角单元格设置并删除被覆盖的单元格；嵌套表格中二者仅作用于当前table；colspan超列数会引发错乱；需兼顾语义化与无障碍访问。
rowspan 和 colspan 什么时候该用哪个
合并单元格只有两个属性可选：rowspan 和 colspan，别想第三种。前者控制纵向跨几行，后者控制横向跨几列。关键不是“怎么写”，而是“从哪开始写”——必须在要合并的左上角那个 <td> 或 <th> 上设置，其他被覆盖的单元格得直接删掉，留着会破坏表格结构。
常见错误是：在第一行 <td rowspan="2">A</td> 后，第二行还写一个 <td>A</td>，结果多出一列或错位。浏览器不会帮你“识别重复内容”，只会按 HTML 树渲染。
-
rowspan="3"表示这个单元格占据当前行 + 往下两行（共三行），它下方两行对应列位置必须留空 -
colspan="4"表示横向占满接下来的四个列槽，右侧三个<td>必须删除 - 如果同时要跨行又跨列，只在一个单元格设两个属性即可，比如
<td rowspan="2" colspan="3">汇总</td>
table 嵌套时 rowspan/colspan 失效怎么办
嵌套表格（<table> 里再放 <table>）本身不禁止，但 rowspan 和 colspan 的作用范围仅限于**当前 table 元素内部的 tr/td 结构**。外部表格的 rowspan 绝对影响不到内部表格的行高，反之亦然。
典型误用场景：想让外层某 <td> 跨过内层表格的高度，结果发现没用。这不是 bug，是规范行为。解决思路只有两个：
立即学习“前端免费学习笔记（深入）”；
- 放弃嵌套，用 CSS
display: grid或display: table-cell模拟复杂布局 - 把需要跨行的内容提到外层表格结构中，内层表格作为纯数据容器，不参与行列合并逻辑
- 用
position: absolute+top/transform强行定位（不推荐，可访问性和响应式会出问题）
colspan 超过实际列数导致表格错乱
如果一行总列数是 5，你在第一个 <td colspan="6">，浏览器会自动补足缺失的列槽，但后续 <tr> 的列数计算会失准，可能引发列宽崩塌、边框错位、甚至部分单元格被吞掉。
检查方法很简单：逐行数 <td> 和 <th> 的 colspan 总和，确保每行加起来等于预期列数。工具上可用浏览器开发者工具的「元素面板」展开 <tr>，看实际渲染出多少个格子。
- 用 JavaScript 验证：遍历
document.querySelectorAll('tr')，对每行执行Array.from(tr.cells).reduce((sum, cell) => sum + (parseInt(cell.colSpan) || 1), 0) - Vue/React 中动态生成表格时，务必在 render 前校验
colspan累加值，避免模板拼接出错 - 注意：空
<td></td>算作colspan="1"，不是 0
语义化与无障碍访问的隐藏代价
屏幕阅读器依赖表格的行列关系播报数据，而 rowspan/colspan 会改变这种映射。比如一个 <th rowspan="2">姓名</th> 下方没有对应 <th>，读屏软件可能把第二行所有数据都归到“姓名”下，造成误解。
WCAG 2.1 要求：所有数据单元格必须能通过明确的 scope 或 headers 属性关联到表头。单纯靠视觉合并不够。
- 复杂表头建议用
<thead>+ 多层<tr>，配合scope="col"/scope="row"显式声明归属 - 若必须用
rowspan，给被合并区域的每个<td>添加headers属性，指向对应<th id="xxx"> - 测试方式：Chrome 扩展 “axe DevTools” 可直接报出
table-fake-rowspan类型的无障碍问题
合并单元格不是样式操作，它改的是 HTML 的表格数据模型。写完记得用真实读屏软件试一遍，尤其关注跨行表头下的数据播报顺序。
