应使用划分表格逻辑区块，配合scope属性明确表头作用域，用提供专属标题，并在复杂场景下通过headers/id或aria-describedby建立精确关联。

用 <thead>、<code><tbody>、<code><tfoot> 明确划分逻辑区块 <p>浏览器和辅助技术（比如屏幕阅读器）依赖这些标签理解表格的“骨架”。没有它们，<code><tr> 全是平级的，系统无法区分哪行是标题、哪行是数据、哪行是汇总。尤其在打印时，<code><thead> 和 <code><tfoot> 会自动出现在每页顶部/底部，而裸写 <code><tr> 不会。 <p>常见错误是只用 <code><tr> 堆砌，或把所有行都塞进一个 <code><tbody> 里——这等于没分层。 <ul><li><code><thead> 只放表头行（<code><th>），且必须有且仅有一个 <li><code><tbody> 包裹全部主体数据行，可多个（比如按状态分组） <li><code><tfoot> 要写在 <code><tbody> 之前（HTML规范要求），否则部分浏览器解析异常 <h3>给 <code><th> 加 <code>scope 属性，绑定行列语义关系

光有 <th> 不够。默认情况下，屏幕阅读器不知道这个表头管的是“这一列”还是“这一行”，更不知道它和哪个 <code><td> 对应。不加 <code>scope，NVDA 之类工具只会读“表格有4列7行”，不读“北京｜2023年｜销售额｜120万元”这种带上下文的信息。

正确做法是显式声明作用域：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

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

• <th scope="col">：该表头控制整列（最常见，用于列标题） <li><code><th scope="row">：该表头控制整行（用于首列的行标识，如“华北区”“华东区”） <li>避免 <code>scope="auto" 或留空——行为不可靠，不同浏览器处理不一致

用 <caption></caption> 替代普通标题文字

很多人在表格上方写个 <h3>销售报表</h3>，再跟一个 <table>。这对人眼没问题，但对屏幕阅读器来说，两者毫无关联。它不会自动把 <code><h3></h3> 当作表格说明，也无法通过快捷键跳转到表格并同时获取描述。

<caption></caption> 是唯一被 WCAG 和主流读屏软件识别为“表格专属标题”的元素：

• 必须直接放在 <table> 内部、第一个子节点位置 <li>一个表格只能有一个 <code><caption></caption>
• 内容要具体，比如 <caption>2024年Q3各区域线上订单量（单位：单）</caption>，比“订单统计”更有信息量

复杂表格必须用 headers/id 或 aria-describedby

当表格出现合并单元格（rowspan/colspan）、多级表头、或行列交叉含义模糊时，scope 就不够用了。例如一个“产品×季度”二维表头，中间某个 <td> 同时属于“产品A”和“Q2”，单靠 <code>scope="col" 或 scope="row" 无法表达。

这时得靠显式引用：

• 给每个相关 <th> 加 <code>id，再给 <td> 加 <code>headers="id1 id2"，用空格分隔多个ID
• 若描述较复杂（比如计算规则说明），用 aria-describedby="desc-id" 关联一段隐藏描述文本
• 别依赖视觉位置推断逻辑——读屏器不“看”布局，只“读”属性
表格重构不是为了代码好看，而是让机器能准确还原人的理解逻辑。最容易被忽略的一点是：即使结构全对，如果 <th> 里嵌了 <code><div> 或 <code><span></span>，某些读屏器会丢失 scope 语义——保持表头单元格内容扁平、无多余包裹，才是真严谨。