必须作为的第一个子元素，置于最顶部；若放外部或内则非法，浏览器纠错不可靠；默认居中显示于表格上方。
用 <caption></caption> 放在 <table> 内部最顶部
<p><code><caption></caption> 必须作为 <table> 的第一个子元素，否则浏览器可能忽略或渲染异常。它默认居中显示在表格上方，不需要额外 CSS。
<p>常见错误是把它写在 <code><table> 外面，或者放在 <code><thead> 里——这两种写法都不合法，HTML 解析器会尝试纠错，但结果不可靠。
<ul>
<li>✅ 正确位置：<pre class="brush:php;toolbar:false;"></pre>
<table>
<caption>销售汇总表</caption>
<thead>...</thead>...</table>
</li>
<li>❌ 错误位置：<code><caption>...</caption>
<table>...</table>
<table>
<thead><caption>...</caption></thead>...</table>
<caption> 默认样式和微调方式</caption>
所有现代浏览器都让 <caption></caption> 水平居中、加粗、字号略大于表格内容（通常为 font-weight: bold，text-align: center）。如果需要调整，直接写 CSS 即可，无需 hack。
注意：用 caption-side 可以控制标题出现在表格上方（top）还是下方（bottom），但不能用 margin: auto 或 text-align 强行“再居中”——它本来就是居中的。
- 让标题在下方：
caption { caption-side: bottom; } - 取消加粗：
caption { font-weight: normal; } - 改字体大小：
caption { font-size: 0.9em; }
语义重要性：屏幕阅读器依赖 <caption></caption> 理解表格用途
对无障碍访问而言，<caption></caption> 不只是视觉装饰。屏幕阅读器会把它的文本作为表格的“名称”播报出来，比如：“表格：2024 年各季度营收（共 4 行 5 列）”。没有它，用户只能靠上下文猜这张表是干啥的。
所以别用 <div> 或 <code><p></p> 模拟标题——即使看起来一样，语义丢失了，辅助技术就失效了。
- ✅ 语义正确：
<caption>用户注册时间分布统计</caption> - ❌ 语义缺失：
<p style="text-align:center;font-weight:bold">用户注册时间分布统计</p>
兼容性与常见陷阱
<caption></caption> 是 HTML 4 就支持的标签，IE6+ 全都支持，不存在兼容问题。真正容易出错的是嵌套结构和 CSS 覆盖。
比如给整个 <table> 设了 <code>text-align: left，会导致 <caption></caption> 也左对齐——因为部分老浏览器（如 IE8-）不完全隔离 caption 的文本对齐逻辑。这时候得单独重置：caption { text-align: center; }。
- 避免在
<table> 上设全局 <code>text-align，或务必单独覆盖caption - 不要给
<caption></caption>套<div> 或 <code><span></span>—— 它只接受流内容，嵌套块级元素会破坏验证 - 如果表格动态生成（如 JS 渲染），确保
<caption></caption>是第一个插入的子节点
实际用的时候，最常被忽略的是语义价值和 DOM 位置约束——写对了位置，样式几乎不用调；写错了位置，怎么加 CSS 都救不回来。
