必须紧跟后作为首个子元素，否则会被浏览器移出表格上下文，导致屏幕阅读器无法识别、CSS样式失效、JavaScript获取失败。

标签不是装饰用的，它是表格语义结构里不可省略的一环——没有它，屏幕阅读器可能跳过表格、搜索引擎难以准确归类内容、CSS 也失去对标题位置和样式的可控入口。

为什么 必须紧跟 后面

HTML 规范强制要求

是 的第一个子元素。一旦中间插入空格、注释、 或其他标签，浏览器会自动把 移出表格上下文，变成普通文本块，导致：

• 屏幕阅读器不再将其识别为该表格的标题
• CSS 中的 caption-side 和 text-align 失效
• document.querySelector('table').caption 返回 null

正确写法只有一种：

...>...>

caption-side 控制标题位置时的兼容性陷阱

想把标题放到表格下方？用 caption-side: bottom; 就行——但要注意：

• Firefox 和 Chrome 支持完整，Safari 15.4+ 才稳定支持 bottom 值（旧版 Safari 会忽略）
• caption-side 不接受 left/right，只认 top（默认）和 bottom
• 若同时设了 text-align: right 和 caption-side: bottom，标题在底部右对齐；但某些 Android WebView 会错位，建议加 display: table-caption 强制重置渲染上下文

动态生成

时容易漏掉的 DOM 绑定

用 JavaScript 插入标题，不能只写 table.innerHTML = '

' + table.innerHTML——这会破坏原有结构，且 caption 属性不会自动挂载。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

安全做法是：

• 用 table.insertAdjacentHTML('afterbegin', '

')

或创建元素：const cap = document.createElement('caption'); cap.textContent = '...'; table.insertBefore(cap, table.firstChild);

插入后检查 table.caption 是否为有效 DOM 元素，避免后续脚本读取失败

最常被忽略的是：即使视觉上标题“看起来”在表格上方，只要没按规范放在

月度销售统计

...

...

第一子节点位置，它就不是真正意义上的 ——语义断了，可访问性和样式控制就全失效了。

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