必须用thead、tbody、tfoot明确划分表格逻辑区块，caption提供可访问标题，scope属性精准绑定表头与数据单元格，禁用table做非数据布局。

用 明确划分表格逻辑区块

浏览器和屏幕阅读器不靠视觉缩进识别表格结构，只认thead、tbody、tfoot这三个标签。漏掉tbody不是语法错误，但会让辅助技术把所有数据行当成“无结构的tr堆叠”，键盘导航时跳过表头、读不出上下文。

• 必须把列标题包在thead里，哪怕只有一行；不能只写tr加th
• tbody不是可选——即使数据只有一行，也要显式包裹，否则CSS选择器tbody tr:nth-child(odd)会失效
• tfoot放在tbody之后，但渲染时会自动置顶（打印时也优先显示），适合放汇总行

给表格加caption而不是靠CSS居中标题

没caption的表格，在WCAG 2.1下直接不合规。屏幕阅读器用户听到的是“表格，4行5列”，而不是“2024年Q3销售统计”。CSS写的居中文字只是视觉装饰，对辅助技术完全不可见。

• caption必须紧贴table开始标签后，不能套在div里，也不能用title属性替代
• 内容要简洁准确，比如<caption>用户注册日志（近30天）</caption>，避免“数据表格”这类空泛描述
• 如果需要多行说明，用caption + details组合，别为了“美观”删掉它

用scope属性绑定th和数据单元格

th不是用来加粗的，是告诉辅助技术“这个表头管哪一列或哪一行”。不设scope，读屏软件就只能按位置猜测，一旦表格有合并单元格或嵌套，映射立刻错乱。

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

• 单列表头统一用scope="col"，单行表头用scope="row"
• 多级表头必须配合id和headers属性，例如：<th id="sales">销售额</th>对应<td headers="sales">12000</td>
• 别在td里硬塞scope——它只属于th

避免用table做布局，哪怕看起来“方便”

把table当栅格容器用，等于主动放弃语义、破坏可访问性、让响应式变灾难。现代CSS Grid/Flex能完美替代，且代码更直白、调试更简单。

立即学习“前端免费学习笔记（深入）”；

• 常见误用：用table排三栏卡片、侧边栏+主内容、登录表单——这些都不是二维结构化数据
• 后果：键盘Tab顺序混乱、打印样式崩坏、小屏下overflow-x: auto失效（table会撑开父容器）
• 替换方案：卡片流用section + CSS Grid；表单用form + fieldset + 垂直布局

真正难的不是写对标签，而是每次敲<table>前停半秒，问自己：这数据有没有行列维度关系？能不能被Excel打开后直接分析？如果不是，就别碰table。