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

用 、、 明确划分逻辑区块

浏览器和辅助技术（比如屏幕阅读器）依赖这些标签理解表格的“骨架”。没有它们， 全是平级的，系统无法区分哪行是标题、哪行是数据、哪行是汇总。尤其在打印时， 和 会自动出现在每页顶部/底部，而裸写 不会。

常见错误是只用 堆砌，或把所有行都塞进一个 里——这等于没分层。

• 只放表头行（），且必须有且仅有一个
• 包裹全部主体数据行，可多个（比如按状态分组）
• 要写在 之前（HTML规范要求），否则部分浏览器解析异常

  给 加 scope 属性，绑定行列语义关系

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

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

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

  用 替代普通标题文字

  很多人在表格上方写个

  销售报表

  ，再跟一个 。这对人眼没问题，但对屏幕阅读器来说，两者毫无关联。它不会自动把
  当作表格说明，也无法通过快捷键跳转到表格并同时获取描述。
  是唯一被 WCAG 和主流读屏软件识别为“表格专属标题”的元素：
  
  DeepBI DHTML 页面生成器
  生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
  下载
  • 必须直接放在
  内部、第一个子节点位置
  • 一个表格只能有一个
  • 内容要具体，比如
  ，比“订单统计”更有信息量

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

  当表格出现合并单元格（rowspan/colspan）、多级表头、或行列交叉含义模糊时，scope 就不够用了。例如一个“产品×季度”二维表头，中间某个

  2024年Q3各区域线上订单量（单位：单）

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

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