应删除无内容、无语义的caption占位符（如空格或破折号），仅保留含业务含义的可读标题；错误放置（如在thead内）、用summary替代、多表共用一个caption均违反规范，须杜绝。
删掉没用的 caption 占位符，但别误删语义标题
很多人加 caption 是为了“看起来像表格”，结果塞进空格、破折号甚至注释，比如 <caption> </caption>。这种写法既不被屏幕阅读器识别，又拖慢解析——浏览器仍要创建 DOM 节点、计算布局。真正该留下的 caption 必须是可读、有业务含义的一句话，例如 <caption>2026年Q3各区域销售达成率</caption>。
容易踩的坑：
-
caption放在thead里面 → 语义失效，屏幕阅读器跳过 - 用
summary属性替代caption→ 已被 MDN 明确废弃，现代浏览器完全忽略 - 同一页面多个
table共用一个caption标签（通过 JS 动态插入）→ 每个表格必须独占一个caption，否则无障碍校验失败
用 scope 替代冗余的 id+headers 绑定
当表格列数固定、表头结构清晰时，scope="col" 或 scope="row" 是最轻量的关联方式。它不需要给每个 th 加 id，也不用在每个 td 上写一长串 headers="id1 id2 id3"，直接靠 DOM 层级关系让屏幕阅读器自动推导归属。
适用场景：
立即学习“前端免费学习笔记（深入）”；
- 普通二维数据表（如销售明细、用户列表）→ 优先用
scope - 含合并单元格（
rowspan/colspan）的复杂表头 → 必须切回id+headers，否则阅读器会错连 - 动态渲染表格（如 React/Vue）→
scope更稳定，不受 key 变更或重排序影响
把嵌套 div 表格替换成原生 table 结构
有些团队为“规避 table 样式难控”而用 div 模拟表格：层层 div class="row" 套 div class="cell"。这会导致节点密度飙升——一个 10×10 的“伪表格”实际生成 100+ 个 div，而原生 table 同样内容只需约 20 个语义化标签。
重构时注意：
- 别只改标签名，要同步补全
thead/tbody分区 → 否则 CSS 选择器（如tbody tr:nth-child(odd)）会失效 - 原
div上的交互逻辑（如点击某“行”触发编辑）需迁移到tr上，并检查事件委托是否还生效 - 如果原结构用了 Flex/Grid 对齐，替换后要重写 CSS ——
table-layout: fixed和width控制比 Flex 更可靠，尤其对长文本截断
移除无意义的空行、空单元格和重复 class
人工维护的 HTML 表格常残留大量空 td、th 或仅含 的单元格，这些节点照常参与渲染流程。用 Cheerio 扫描时，若发现某 tr 下 td 节点中超过 40% 是空的（text().trim() === ''），基本可判定为冗余占位，应直接删除整列或合并逻辑。
常见冗余模式：
-
<td> </td>→ 替换为<td aria-hidden="true"></td>，显式声明不可访问 - 同一行多个
td共享相同class="text-right align-middle"→ 提取到tr上，减少属性重复 -
class="table-cell table-cell--large"这类组合类名 → 若无对应 CSS 规则，直接删；若有，检查是否真需要两层抽象
精简不是越少越好。关键看是否破坏了语义层级或辅助技术可解析性——删掉一个空 td 没问题，但把 th 改成 div 就跨过了无障碍底线。
