HTML表格怎么设置居中对齐？ALIGN属性控制页面位置-html教程-PHP中文网

html5 中 align 属性已废弃，表格居中应使用 margin: 0 auto（需显式设 width），单元格内容水平居中用 text-align: center，垂直居中用 vertical-align: middle（仅对 td/th 有效）。

html表格怎么设置居中对齐？align属性控制页面位置

align 属性在 HTML5 中已完全废弃，不能用于控制表格在页面中的位置，也不能可靠控制单元格内容对齐 —— 浏览器可能兼容，但验证失败、无障碍支持缺失、移动端 WebView 易失效。

为什么 `align="center"` 在 `<table> 上看似有效却不可靠<p>常见错误现象：本地测试时 <code><table align="center"> 看起来居中了，但上线后被 CSS 覆盖、或在 iOS WKWebView / Android Chrome 低版本中偏左；W3C 验证器直接报错 <code>Attribute align not allowed on element table`。
根本原因：`align` 是 HTML4 时代遗留属性，HTML5 规范明确移除，它不参与 CSS 盒模型计算，也不响应现代布局上下文（如 Flex/Grid 容器）。

别把它当“还能用的快捷方式”——这是技术债，不是权宜之计

若项目需通过 WCAG 或企业级合规审计，`align` 属于必须清理项

服务端渲染（如 ASP.NET Web Forms 的 `HtmlTable.Align`）属框架封装层行为，输出到浏览器仍是无效 HTML

让整个表格在页面中水平居中：只用 `margin: 0 auto`

这是最轻量、兼容性最好（IE8+）、语义清晰的方案，前提是 <table> 是块级元素且宽度未占满父容器。<p>正确写法：</p> <pre class="brush:php;toolbar:false;"></pre> <table style="margin: 0 auto; width: 800px;"><tr><td>内容</td></tr></table> <ul> <li> <code>width 必须显式设置（像素、百分比、max-content 均可），否则 margin: 0 auto 无效

父容器不能是 display: inline 或 float: left，否则 <table> 无法触发块级居中逻辑<li>避免给 <code><table> 设 <code>width: 100% —— 它会撑满父容器，margin 失效

让单元格内容水平居中：只用 `text-align: center`

text-align 控制的是单元格内**行内内容**（文本、<img>、<span></span>）的水平位置，和 align 无关，也和单元格自身位置无关。

常用做法：

单个单元格：<td style="text-align: center;">文字</td>
整列统一：<col class="center-col"> + .center-col { text-align: center; }
整表默认：table td, table th { text-align: center; }，再用更具体选择器覆盖例外项

容易踩的坑：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

<td style="text-align: center;"><div>块级元素</div></td> → <div> 不会居中，因为它默认 <code>display: block，需额外设 margin: 0 auto 或 text-align: center 在 <div> 自身<li>图片加了 <code>display: block 后，text-align: center 对它失效，得用 margin: 0 auto 或 Flex