必须紧跟后作为首个子元素，否则会被浏览器移出表格上下文，导致屏幕阅读器无法识别、CSS样式失效、JavaScript获取失败。
<caption></caption> 标签不是装饰用的，它是表格语义结构里不可省略的一环——没有它，屏幕阅读器可能跳过表格、搜索引擎难以准确归类内容、CSS 也失去对标题位置和样式的可控入口。
生成HTML格式PPT
下载
从零开始创建惊艳、动画丰富且自包含的 HTML 演示文稿，或通过转换 PowerPoint 文件生成。当用户希望制作幻灯片、构建演示文稿、打造路演资料（pitch deck）、将 PPT/PPTX 转换为网页格式，或增强现有 HTML 演示文稿时，应使用此能力。该能力帮助用户通过视觉预览而非抽象选项来发掘自身审美偏好。
为什么 <caption></caption> 必须紧跟 <table> 后面
<p>HTML 规范强制要求 <code><caption></caption> 是 <table> 的第一个子元素。一旦中间插入空格、注释、<code><tbody> 或其他标签，浏览器会自动把 <code><caption></caption> 移出表格上下文，变成普通文本块，导致：
- 屏幕阅读器不再将其识别为该表格的标题
- CSS 中的
caption-side 和 text-align 失效
-
document.querySelector('table').caption 返回 null
caption-side 和 text-align 失效document.querySelector('table').caption 返回 null
正确写法只有一种：<table>
<caption>月度销售统计</caption>
<thead>...</thead>...</table>
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强制重置渲染上下文
动态生成 <caption></caption> 时容易漏掉的 DOM 绑定
用 JavaScript 插入标题，不能只写 table.innerHTML = '<caption>...</caption>' + table.innerHTML——这会破坏原有结构，且 caption 属性不会自动挂载。
安全做法是：
- 用
table.insertAdjacentHTML('afterbegin', '<caption>...</caption>') - 或创建元素：
const cap = document.createElement('caption'); cap.textContent = '...'; table.insertBefore(cap, table.firstChild); - 插入后检查
table.caption是否为有效 DOM 元素，避免后续脚本读取失败
最常被忽略的是：即使视觉上标题“看起来”在表格上方，只要没按规范放在 <table> 第一子节点位置，它就不是真正意义上的 <code><caption></caption>——语义断了，可访问性和样式控制就全失效了。
