HTML表格如何实现文字自动对齐？ALIGN属性控制左右布局

align属性在HTML5中完全被废弃，W3C不再支持，验证器报错，浏览器仅靠向后兼容“看似有效”，实为非标准行为，新项目必须用text-align和vertical-align等CSS替代。

ALIGN属性在HTML5中已失效，别再用

直接说结论：align 属性（比如 <td align="center">）在 HTML5 中**完全被废弃**，W3C 不再支持，验证器会报错，部分 WebView 或严格模式下直接忽略。你看到它“好像还有效”，只是浏览器做了向后兼容，不是标准行为。

常见错误现象：本地开发时 <td align="right"> 看似居右，上线后被 CSS 覆盖、或在 iOS Safari 某些版本里失效；用无障碍工具检测时，该属性被跳过，影响可访问性。

• HTML4 时代遗留，align 和 valign 都不该出现在新项目里
• <table align="center"> 是控制整张表在页面中的左右位置，不是单元格内容对齐 —— 这个也已被 margin: 0 auto 取代
• 所有现代框架（React/Vue/Svelte）默认不解析 align，JSX 或模板中写它等于无效代码

text-align 是控制单元格文字水平对齐的唯一可靠方式

text-align 必须作用在 <td> 或 <th> 上，<tr> 上设无效，<table> 上设只影响继承行为，不可靠。

实操建议：

立即学习“前端免费学习笔记（深入）”；

• 单个单元格：直接加内联样式 <td style="text-align: right;">金额</td>
• 整列对齐：用 <col> 标签配类名，例如 <col class="num-col">，再写 CSS .num-col { text-align: right; }
• 整行对齐：给 <tr> 加 class，如 <tr class="header-row">，再用 .header-row td, .header-row th { text-align: center; }
• 避免写 !important 强行覆盖 —— 很可能是因为父级 <table> 或 <tbody> 设了 text-align: left 且未被正确重置

vertical-align 控制垂直对齐，但只对单元格内容生效

vertical-align 默认值是 middle，所以表格单元格内容天然垂直居中 —— 但这是“相对于单元格自身”的居中，不是整行统一高度下的视觉居中。

容易踩的坑：

• <tr style="vertical-align: top"> 完全无效，vertical-align 对 <tr> 不起作用
• 某列内容多、单元格撑高后，其他列即使设了 vertical-align: top，也会看起来“错位”，因为每格高度不同
• 想让一整行所有单元格内容都顶着上边沿？必须给这一行每个 <td> 和 <th> 都设 vertical-align: top
• vertical-align: middle 对图片、图标等行内元素有效；但对 <div style="display: block"> 无效 —— 它不是行内元素，得换 flex 或重设 display

复杂场景下，text-align 的边界要清楚

text-align: center 只对“行内内容”起作用：纯文本、<img>（默认 inline）、<span> 都能居中；但 <div>、<p> 默认是块级，不会被居中，只会左对齐。

如果你在 <td> 里嵌套了一个 <div>，又只给 <td> 设了 text-align: center，结果是文字居中了，<div> 还是贴左 —— 因为 text-align 不控制块级子元素的位置。

此时要么：

• 给那个 <div> 加 margin: 0 auto（前提是它有明确宽度）
• 把 <td> 设成 display: flex，再用 justify-content: center
• 或者干脆不用 <div>，改用 <span> + 行内样式

真正容易被忽略的点是：对齐从来不是孤立操作，它依赖于元素显示类型、父级继承链、以及是否混用了块级/行内语义 —— 一个 text-align 失效，大概率不是属性写错了，而是上下文没理清。