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