aria-colspan 和 aria-rowspan 不存在于 aria 规范，浏览器和屏幕阅读器均不支持，使用会导致 a11y 工具报错；表格跨列跨行必须依赖原生 colspan 和 rowspan 实现语义结构。

aria-colspan 和 aria-rowspan 在 HTML 中根本不能用——它们不存在，浏览器忽略，屏幕阅读器不识别，写了反而可能触发 a11y 工具报错。

为什么找不到 aria-colspan / aria-rowspan

ARIA 规范里压根没定义这两个属性。W3C 官方文档、axe、WAVE、NVDA、VoiceOver 全都不支持。你写 aria-colspan="2"，DOM 里能看到，但辅助技术当它不存在；更糟的是，某些检测工具会把它当作“非法 ARIA 属性”标为错误。

表格跨列跨行的语义必须靠原生 colspan 和 rowspan 实现——这是浏览器构建表格关系模型的唯一依据。

• 原生 colspan/rowspan 影响 DOM 结构、渲染逻辑和可访问性树
• ARIA 只能补充角色（如 role="grid"）、状态（如 aria-sort）或关联（如 headers），不能替代结构
• 试图用 ARIA “模拟”跨格，等于绕过浏览器对表格的深度支持，尤其在旧版读屏中容易丢失行列上下文

原生 rowspan/colspan 怎么写才不出错

它们不是“合并”，而是让一个单元格占据多个逻辑位置。关键在对齐：每行总列数必须一致，被跨越的位置必须跳过对应单元格。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• colspan="2" → 当前行少写一个 <td>，否则整行变宽、边框断裂 <li> <code>rowspan="3" → 后续两行同一列位置**不能出现任何 <td> 或 <code><th>**，否则内容重叠或 <code>table.rows[i].cells 索引错乱
• 数值必须是正整数：rowspan="0" 被忽略为 1；填 999 在 IE 中可能异常
• 混用 rowspan 和 colspan 时，先确保表头列总数固定，再逐行校验 cellIndex 是否连续

Chrome DevTools 的 Elements 面板右键表格 → “Edit as HTML”，临时删掉疑似多余的单元格，看是否恢复整齐，是最快定位错位的方法。

虚拟表格（div + role="grid"）怎么处理跨格

如果你非得用 div 实现滚动/动态加载表格（即所谓“虚拟表格”），就不能用 colspan/rowspan——因为没有原生表格结构。此时跨格效果是视觉层面的，逻辑位置靠 ARIA 控制：

• 外层容器设 role="grid"，并加 aria-label 或 aria-labelledby
• 每行用 role="row"，单元格用 role="gridcell" 或 role="columnheader"
• 跨列视觉效果靠 CSS：grid-column: span 2，但必须同步设置 aria-colindex 和 aria-rowindex 告诉读屏“这个单元格实际在第几列第几行”
• 不要幻想靠伪造属性偷懒；aria-colspan 这种写法只会让 axe 报 aria-allowed-attr 错误

无障碍验证时最容易被忽略的点

写完别只看页面长得像不像，要实测：

• NVDA 或 VoiceOver 开启表格导航模式（Ctrl+Alt+方向键），确认能正确跳转行列、读出“第2列，跨2行”这类信息
• 运行 axe 浏览器插件，重点检查：table 是否缺失 scope 或 headers，grid 是否漏了 aria-rowcount/aria-colcount
• 用 JS 读取 document.querySelector('table').rows[0].cells.length，验证是否等于你预期的列数——这是最直接的结构校验

真正难的不是写对 rowspan，而是当表格动态增删行时，手动维护跨格数值和跳过逻辑；多数翻车都发生在 JS 拼接 HTML 后忘了同步删掉被跨越位置的单元格。

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