HTML 表格 caption / summary / scope 属性正确写法

caption是表格唯一合法标题,必须作为首个子元素;scope用于定义表头作用范围;summary属性在HTML5中已废弃。

caption 是表格的标题,必须作为

的第一个子元素,用 标签包裹,不使用 summaryscope 属性。

caption:唯一合法且语义明确的标题方式

HTML5 中 summary 属性已被废弃,不应再使用。正确做法是:

  • 把表格标题文字放在
  • 必须紧接在
    表标题文本
    开始标签之后
  • 支持 CSS 样式(如 caption-side: bottom; 可置底)
  • 对屏幕阅读器友好,自动被识别为表格描述
  • scope:用于明确表头单元格的作用范围

    scope

    +
    或隐藏的

    提供补充说明
  • 若需兼容旧系统(极少见),也不应依赖 summary 作为主要可访问性手段
  • 不复杂但容易忽略:caption 是必须的语义标题,scope 是提升数据表可访问性的关键细节,summary 则该彻底丢掉。

    元素的属性,告诉辅助技术该表头关联哪一行或列的数据:
    • scope="row":表示该
    描述其所在行

    的全部
  • scope="col":表示该
  • 描述其所在列的全部
  • 多维表头可组合使用(如第一行表头用 scope="col",首列表头用 scope="row"
  • 避免在普通
  • 上使用 scope

    summary:已废弃,不要使用

    summary 属性曾用于提供表格的简要说明,但 HTML5 已将其移除:

    • 浏览器不再解析该属性,屏幕阅读器普遍忽略它
    • 替代方案:用