caption 元素必须置于 table 开头，放底部会导致 dom 不合法且可访问性受损；应保持其为 table 第一子元素并用 caption-side: bottom 控制视觉位置，禁用已废弃的 align 属性。
CAPTION 元素必须放在 TABLE 开头，放底部会失效
CAPTION 的语义和渲染行为决定了它只能作为 <table> 的第一个子元素，浏览器会自动将其渲染在表格上方（默认位置）。想让它“视觉上”出现在底部，不能靠移动 HTML 位置——那样会导致 DOM 结构不合法，部分屏幕阅读器可能忽略或报错，且 CSS 也难以可靠修正。
<p>真正可行的做法是用 CSS 控制显示位置：</p>
<ul><li>保持 <code><caption></caption> 在 <table> 内部最前（符合规范）
<li>给 <code><caption></caption> 设置 caption-side: bottom
caption-side，如需兼容，得用其他方案ALIGN 属性已废弃，别再写 align="bottom"
align 是 HTML4 的旧属性，在 HTML5 中已被完全废弃。写 <caption align="bottom"></caption> 虽然部分浏览器仍能解析，但属于无效 HTML，W3C 验证器会报错，且行为不可靠（比如 Firefox 会忽略该属性，Chrome 表现也不一致）。
替代方案只有 CSS：
- 水平对齐用
text-align（left/center/right） - 垂直定位用
caption-side（仅top或bottom） - 若要更精细控制（如右对齐 + 底部 + 偏移），需配合
margin或transform，但要注意影响可访问性
实际用法示例：底部居中说明文字
这是合规、现代、可维护的写法：
| 地区 | 满意度 |
|---|---|
| 华东 | 86% |
对应 CSS：
caption {
caption-side: bottom;
text-align: center;
font-size: 0.85em;
color: #666;
}
注意：caption-side 必须作用于 caption 元素本身，不能写在 table 上；且它只接受两个值，没有 left/right 选项。
容易被忽略的可访问性影响
把 <caption></caption> 放在 DOM 顶部但视觉到底部，对屏幕阅读器来说仍是“表标题”，读出来顺序不变——这反而是优点，语义没被破坏。但如果用 position: absolute 把 caption 拉到底部，就可能脱离表格上下文，导致读屏软件无法关联 caption 和 table，或者跳过不读。
所以优先用 caption-side，避免绝对定位、flex 重排或 JS 移动节点。真遇到老系统必须兼容 IE8，就放弃 <caption></caption>，改用 <tfoot> 里加 <code><tr><td colspan="X"> 模拟，但语义降级了。</td></tr>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
