html5 中 caption 的 align 属性已废弃，应改用 css 的 caption-side 控制位置（top/bottom/left/right），text-align 控制内部文字对齐；现代浏览器均支持，但 left/right 需慎用以保障可访问性。
caption 标签的 align 属性在 HTML5 中已完全移除，硬写进去不会生效，浏览器会忽略它。
HTML5 中 caption 的 align 属性无效
你如果还在用 <caption align="bottom"></caption> 或 <caption align="right"></caption>，这些写法在现代浏览器中只是“看起来好像起了作用”——实际是靠浏览器默认样式或隐式 fallback 行为撑着，不是标准行为。HTML5 规范明确废弃了 align 属性，W3C 文档里连该属性的定义都删干净了。
- Chrome、Firefox、Safari、Edge 均不解析
align值，哪怕写了"top"或"bottom" - 部分旧版 IE（如 IE8）曾支持，但早已退出主流支持周期
- 验证工具（如 W3C Validator）会直接报错：
Attribute align not allowed on element caption
用 caption-side 控制标题位置（上/下/左/右）
caption-side 是 CSS 专门用于替代 align 的属性，控制 caption 相对于表格的整体方位，只接受四个值：top、bottom、left、right。它必须配合 display: table-caption（caption 默认就是这个值）才能生效。
- 默认值是
top，所以不写也显示在表格上方 - 要放到下方：加
caption-side: bottom; - 要放左侧或右侧：需同时设
caption-side: left;+text-align: center;（否则文字会挤到角落） - 注意：
left/right在某些屏幕阅读器中可能影响无障碍体验，慎用于语义关键表格
示例：
<style>
.bottom-caption {
caption-side: bottom;
}
.right-caption {
caption-side: right;
text-align: center;
}
</style>
| 1月 | ¥2,450 |
用 text-align 控制标题内部文字对齐
text-align 管的是 caption 元素内部文字的水平对齐，和 caption-side 完全正交。它不影响标题在表格上的位置，只影响文字在 caption 框内的排布。
-
text-align: left;→ 文字左对齐（整个caption区域仍按caption-side决定在哪边） -
text-align: center;→ 默认行为，无需额外写 -
text-align: right;→ 文字右对齐 - 若
caption-side: left;且text-align: right;，文字会紧贴caption右边缘，而非表格左边缘——这点容易误判
兼容性与可访问性提醒
所有现代浏览器（Chrome 110+、Firefox 115+、Safari 16.4+、Edge 112+）都完整支持 caption-side 和 text-align 组合。但要注意两个易被忽略的点：
-
caption-side: left或right时，表格宽度可能被压缩，尤其当caption内容较长又没设white-space: nowrap或max-width - 屏幕阅读器通常按 DOM 顺序读取
caption，不管它视觉上在哪儿；但若用position: absolute强行移位，会导致语义脱节——千万别这么干
真正需要“标题在表格右侧”的场景极少，多数时候是设计稿误导；优先考虑 caption-side: top + text-align: right，更健壮也更符合语义预期。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
