align属性在html5中已彻底失效，w3c明确废弃并报错，浏览器仅向后兼容导致行为不一致；必须用text-align（水平）和vertical-align或flex（垂直）替代，且text-align须作用于td/th元素。
align属性在HTML5中已彻底失效，不能靠“兼容性”混过去
浏览器解析align（比如<td align="right">）只是向后兼容的临时兜底，不是标准支持。W3C验证器会明确报错：<code>Attribute align is obsolete. Use CSS instead.。更麻烦的是，它在不同环境表现不一致：iOS Safari某些版本直接忽略；Outlook邮件客户端优先用align但覆盖CSS；React/Vue模板里写它等于无效代码。真正在意交付质量的项目，必须清理所有align和valign。
text-align才是控制单元格文字水平对齐的唯一可靠方式
text-align必须作用在<td>或<code><th>上才生效，写在<code><tr>或<code><table>上是无效的。常见误操作包括：
<ul><li>给<code><tr>加<code>style="text-align: right" → 不起作用，得用tr .numeric td { text-align: right; }这类后代选择器
<table>设<code>text-align: center → 所有单元格文字会继承居中，但一旦某列有class="numeric"并设了text-align: right，就容易被意外覆盖
<div style="display: block">，只设<code>text-align: center → 文字居中，但<div>本身仍左贴边，需额外加<code>margin: 0 auto或display: inline-block
vertical-align控制垂直对齐，但只对和
有效
vertical-align不是valign的简单替换，它只在display: table-cell（即默认的<td>/<code><th>）或行内元素上起作用。<code><tr style="vertical-align: top">完全无效。实际调试中常遇到的问题：
<ul>
<li>多行文本单元格设了<code>vertical-align: middle却“看起来偏上” → 因为middle是对齐行框中线，不是视觉中心；建议配合line-height或改用display: flex; align-items: center
单元格含图片时，vertical-align: middle只影响图片盒模型整体，若图片设了display: block则失效
整行统一顶部对齐，必须给该行每个<td>和<code><th>都显式设置<code>vertical-align: top，不能只写在<tr>上
<h3>表格整体居中别用align="center"，用margin: 0 auto加width</h3>
<p><code><table align="center">实际触发的是<code>display: inline-table行为，在Flex/Grid父容器里极易失效，且无法响应式。正确做法是：
- 必须设置明确宽度：
width: 600px、width: 80%或max-width: 800px；width: 100%会让margin: 0 auto失效
- 确保
<table>处于块级上下文（默认就是），避免被<code>float、display: inline或父级overflow: hidden干扰
- 推荐写法：
<table style="margin: 0 auto; width: 100%; max-width: 800px;">，兼顾居中与响应式
<li>不要用Flex父容器包裹表格来居中 —— 会破坏<code>colspan/rowspan渲染，打印预览和部分屏幕阅读器可能出错
真正难的不是“怎么写新样式”，而是清理历史残留时，发现某处align被新CSS覆盖后突然失效，而你根本没留注释说明它当初为什么存在。
vertical-align不是valign的简单替换，它只在display: table-cell（即默认的<td>/<code><th>）或行内元素上起作用。<code><tr style="vertical-align: top">完全无效。实际调试中常遇到的问题：
<ul>
<li>多行文本单元格设了<code>vertical-align: middle却“看起来偏上” → 因为middle是对齐行框中线，不是视觉中心；建议配合line-height或改用display: flex; align-items: center
vertical-align: middle只影响图片盒模型整体，若图片设了display: block则失效<td>和<code><th>都显式设置<code>vertical-align: top，不能只写在<tr>上
<h3>表格整体居中别用align="center"，用margin: 0 auto加width</h3>
<p><code><table align="center">实际触发的是<code>display: inline-table行为，在Flex/Grid父容器里极易失效，且无法响应式。正确做法是：
- 必须设置明确宽度：
width: 600px、width: 80%或max-width: 800px；width: 100%会让margin: 0 auto失效 - 确保
<table>处于块级上下文（默认就是），避免被<code>float、display: inline或父级overflow: hidden干扰 - 推荐写法：
<table style="margin: 0 auto; width: 100%; max-width: 800px;">，兼顾居中与响应式 <li>不要用Flex父容器包裹表格来居中 —— 会破坏<code>colspan/rowspan渲染，打印预览和部分屏幕阅读器可能出错
真正难的不是“怎么写新样式”，而是清理历史残留时，发现某处
align被新CSS覆盖后突然失效，而你根本没留注释说明它当初为什么存在。
