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

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

caption 是表格的标题，必须作为 <table> 的第一个子元素，用 <code><caption></caption> 标签包裹，不使用 summary 或 scope 属性。

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

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

• 把表格标题文字放在 <caption>表标题文本</caption> 中
• <caption></caption> 必须紧接在 <table> 开始标签之后 <li>支持 CSS 样式（如 <code>caption-side: bottom; 可置底）
• 对屏幕阅读器友好，自动被识别为表格描述

scope：用于明确表头单元格的作用范围

scope 是 <th> 元素的属性，告诉辅助技术该表头关联哪一行或列的数据： <ul><li> <code>scope="row"：表示该 <th> 描述其所在行的全部 <code><td> <li> <code>scope="col"：表示该 <th> 描述其所在列的全部 <code><td> <li>多维表头可组合使用（如第一行表头用 <code>scope="col"，首列表头用 scope="row"）

• 避免在普通 <td> 上使用 <code>scope

  summary：已废弃，不要使用

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

  

  Bardeen AI

  使用AI自动执行人工任务

  下载

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

  • 浏览器不再解析该属性，屏幕阅读器普遍忽略它
  • 替代方案：用 <caption></caption> + <details></details> 或隐藏的 <p class="visually-hidden"></p> 提供补充说明
  • 若需兼容旧系统（极少见），也不应依赖 summary 作为主要可访问性手段

  不复杂但容易忽略：caption 是必须的语义标题，scope 是提升数据表可访问性的关键细节，summary 则该彻底丢掉。