caption标签必须紧贴table开头且唯一，是表格语义核心；display默认为table-caption，左对齐需设display:block；不参与尺寸计算但影响无障碍焦点流。
caption 标签必须放在 table 开头且紧贴
正确写法只有一种顺序：
| 城市 | 1月 | 7月 |
|---|---|---|
| 北京 | -4 | 26 |
caption 默认居中且加粗，但样式受限于 display: table-caption
很多人想用 text-align: left 或 margin-left 把标题左对齐，结果无效——因为 <caption></caption> 的默认 display 是 table-caption，它不响应普通块级布局属性。必须显式重置：
- 用
display: block才能用text-align、margin等常规控制 - 若保留
table-caption，只能靠caption-side: top | bottom控制上下位置，对齐方式仅支持left/right（需配合text-align，但行为不稳定） - 注意：IE 8–10 对
caption-side支持差，移动端 Safari 在某些版本里会忽略text-align设置
稳妥的左对齐写法：
caption {
display: block;
text-align: left;
font-weight: normal;
margin-bottom: 0.5em;
}
一个 table 只能有一个 caption，不能靠多个 caption 实现副标题
HTML 规范明确禁止在单个 <table> 中出现多个 <code><caption></caption>。试图这样写：
会导致第二个 <caption></caption> 被浏览器忽略或解析为普通文本，语义完全断裂。真需要多行标题，应该：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 用换行符
\n+white-space: pre-line控制（适合简单换行） - 在
<caption></caption>内嵌<div> 或 <code><span></span>，再用 CSS 区分样式（注意：这会让部分读屏器把副标题读成“内联内容”，而非标题的一部分） - 更推荐方案：把副标题移出
<caption></caption>，放在<table> 外部并用 <code>aria-labelledby关联caption 不参与表格尺寸计算，但会影响可访问性焦点流
视觉上，
<caption></caption>不占表格单元格行列空间，也不影响<colgroup></colgroup>宽度计算。但它在 DOM 顺序和键盘导航中排在表格首位——按 Tab 键进入表格时，焦点会先落在<caption></caption>上（如果它可聚焦，比如加了tabindex="0"），再进表头。容易被忽略的点：
- 如果 caption 文字过长又没设
max-width或overflow，可能撑宽整个表格容器 - 用 JavaScript 动态生成表格时，别漏掉 caption ——
insertRow()和insertCell()不处理 caption，得单独用insertAdjacentHTML('afterbegin', '<caption>...</caption>')或appendChild() - 服务端渲染或模板引擎里（如 Jinja、EJS），caption 很容易被写成字符串拼接，一不小心就漏闭合标签，导致后续 HTML 结构错乱
caption 的核心作用从来不是“让表格看起来有标题”，而是告诉机器“这是表格的正式名称”。写对位置、避开多 caption、留意 display 行为，比加多少样式都关键。
- 如果 caption 文字过长又没设
