最稳妥的数据矩阵语义化方案是正确使用table、thead、tbody、tfoot标签；缺一不可，否则屏幕阅读器无法识别行列逻辑，违反WCAG 2.1 AA标准。
直接用 <table> 是最稳妥的数据矩阵语义化方案，但多数人写出来的表格对屏幕阅读器无效、打印错乱、移动端无法阅读——问题不在标签本身，而在结构缺失和属性滥用。
<h3>为什么 <code><caption></caption>、<thead>、<code><tbody> 一个都不能少
<p>没有这些标签，浏览器仍能渲染出格子，但读屏软件会把整张表读成“单元格一、单元格二、单元格三……”，完全丢失行列逻辑。WCAG 2.1 AA 级要求表格必须有明确标题和区域划分。</p>
<ul>
<li>
<code><caption></caption> 是表格的唯一语义标题，不是视觉装饰；不能用 <h2></h2> 替代，也不能省略
<thead> 必须包裹所有表头行（哪怕只有一行），<code><th scope="col"> 才能被正确识别为列头
<li><code><tbody> 要显式写出——即使只有一行数据；否则 JS 操作时容易误判 DOM 结构
<li>不要依赖浏览器自动补全：有些旧版 Safari 和部分爬虫不会补 <code><tbody>，导致样式或脚本失效
<h3><code><th scope="row"> 和 <code><th scope="col"> 怎么配才不翻车
<p>多维表头（比如既有行分类又有列分类）必须靠 <code>scope 建立映射关系，否则读屏软件无法回答“这个数字对应哪一行哪一列”。
- 横向表头（如“Q1”“Q2”“Q3”）统一用
<th scope="col"> <li>纵向表头（如“华东”“华南”“华北”）必须用 <code><th scope="row">，且只能出现在首列 <li>如果第一行是列头、第一列是行头，那左上角单元格得是 <code><th scope="col"></th>还是<th scope="row"></th>？答案是：都别用，改用<th scope="col" id="q-col"> + <code><th scope="row" headers="q-col"> 配合 <code>headers属性 - 避免混用
<th> 和 <code><td> 在同一行——语义冲突会让读屏软件跳过部分单元格 <h3>响应式下表格不“压扁”的真实解法</h3> <p>加 <code>overflow-x: auto是懒办法，触屏滑动卡顿、双指缩放失灵、打印时内容被截断。真正可用的是 CSS 视觉重排，而非结构删减。立即学习“前端免费学习笔记（深入）”；
- 保留原始
<table> DOM：所有 <code><tr>、<code><th>、<code><td> 一个不少，确保爬虫、打印、读屏全链路可用 <li>小屏下用 <code>@media (max-width: 768px)+display: grid把每行<tr> 变成垂直堆叠的卡片，用伪元素插入列名 <li>关键技巧：给每个 <code><td> 加 <code>data-label属性（如data-label="华东"），CSS 中用content: attr(data-label)动态注入标签 - 禁用
table-layout: auto：默认行为在窄屏下会压缩文字换行，强制设为table-layout: fixed并配合width分配更稳定 -
colspan="2"表示“占两列”，不是“加宽到 200px”；它会跳过该行中下一个单元格的位置 - 某行第一个
<td colspan="2"> 后，若原表是 4 列，则这一行只需再写 2 个 <code><td>（2+1+1=4），不是 3 个 <li> <code>rowspan更危险：跨行合并后，下一行对应位置必须留空，否则表格结构立即错位 - 复杂合并建议放弃纯 HTML，改用 ARIA：
role="rowgroup"+aria-labelledby显式绑定关系，比靠scope更可控
合并单元格（
rowspan/colspan）最容易踩的坑合并不是“视觉拉伸”，而是 DOM 层级的结构声明。写错一个值，整行后续单元格都会偏移，且读屏软件彻底无法理解上下文。
语义化表格最难的部分不是写对标签，而是坚持让每个
<th> 都有明确的 <code>scope或headers，让每张表在无 CSS、无 JS、仅靠读屏软件的情况下，依然能被准确理解——这恰恰是数据可视化最不该妥协的底线。 - 保留原始
