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