是表格不可替代的语义化标题，必须作为 的首个子元素；仅能出现一次，位置错误或用其他标签模拟会导致可访问性缺陷。

用 `

` 标签为表格添加标题说明，是语义正确、可访问性强的标准做法。它不是装饰文字，而是表格结构中不可替代的组成部分。

必须放在 `

` 的第一个子位置

`

` 只能且必须紧接在 `` 开始标签之后，不能嵌套在 ``、`` 或任何 `` 里。放错位置会导致屏幕阅读器完全忽略它，也失去 HTML 语义支持。

• ✅ 正确：<table> <caption>2024年用户活跃度统计</caption> <thead>... <li>❌ 错误：<code><table> <thead> <caption>错误！</caption> <tr>...</tr> </thead> <li>一个 `<table>` 中只能有一个 `<caption>`，重复使用会违反规范 <h3>控制显示位置要用 `caption-side`</h3> <p>默认标题在表格上方居中。想移到下方，不能靠 `margin` 或 `text-align` 硬调，而要通过 CSS 的 `caption-side` 属性设置：</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill9263" title="Html2md"><img src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="overflowclass">Html2md</a> <p class="overflowclass">使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p> </div> <a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <ul> <li>写在 `table` 元素上才生效：<code>table { caption-side: bottom; }
• 只推荐用 top 或 bottom 值，`left`/`right` 兼容性差，不建议使用
• IE8+ 支持 `top`/`bottom`，但需声明标准 DOCTYPE；旧版 Safari 对 `text-align` 居中可能有兼容问题

内容要具体，避免泛泛而谈

标题文字应准确反映表格内容，方便用户快速理解上下文，尤其对依赖屏幕阅读器的用户至关重要。

• ⚠️ 不推荐：“数据表”“表格1”“信息汇总”
• ✅ 推荐：“2024年Q3各地区销售额（单位：万元）”“用户注册渠道来源占比（截至2026-07）”
• 不要额外在 `

别用 div 模拟 caption

用 `

` 或 `

` 替代 `

` 外再加 `

` 类标题——会造成语义重复，干扰辅助技术识别

`，视觉上可能一样，但会切断与表格的语义关联：

• 屏幕阅读器无法将该文字识别为“这个表格的标题”
• 用户无法用快捷键（如 Ctrl+Alt+T）跳转到带标题的表格
• 不符合 WCAG 2.1 要求，属于可访问性缺陷
• 搜索引擎也无法从中提取表格主题信息

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