table布局已实质废弃，因违背语义、损害可访问性、拖慢首屏且无法响应式适配；html5明确废弃其布局用途，w3c/wcag将其列为可访问性错误。
Table 布局在现代浏览器中不会报错，但已实质废弃——它不阻断渲染，却会拖慢首屏、混淆语义、破坏可访问性，且无法响应式适配。迁移不是“要不要做”，而是“拖得越久，成本越高”。
为什么 <table> 布局在 HTML5 中被标记为废弃
<p>W3C 和 WCAG 明确将 <code>table-used-for-layout 列为可访问性错误，不是因为浏览器不认，而是因为它违背了 HTML 的核心原则：标签描述内容结构，而非视觉表现。<table> 的语义只适用于二维结构化数据（如成绩单、航班表），用它包 <code><header></header>、<nav></nav> 或三栏页面，等于告诉屏幕阅读器“这是一张表”，结果导航栏被读成“第一行：首页、关于、联系”，页脚变成“最后一行数据”。搜索引擎也按此理解，可能把你的页脚索引为表格尾行。
- HTML5 已废弃
cellspacing、cellpadding、border 等属性，仅保留 CSS 控制方式
- 浏览器仍能渲染，但会触发更重的布局计算逻辑，尤其在含大量嵌套
<td> 的页面上，首屏时间明显增加
<li>媒体查询对 <code>display: table-cell 支持极差，@media (max-width: 768px) 下几乎无法可靠实现单栏切换
Flexbox 替代两栏/三栏 <table> 布局的最小改动点
<p>90% 的旧式 <code><table> 页面结构（header + sidebar + main + footer）用 Flexbox 可以直接平替，无需重写 HTML 结构，只需改 CSS。
<ul>
<li>父容器加 <code>display: flex，子元素默认水平排列；垂直居中用 align-items: center，顶部对齐用 align-items: flex-start
- 侧边栏固定宽、主内容自适应：给侧边栏设
width: 240px，主内容设 flex: 1（注意不是 flex: auto，后者在收缩时行为不可控）
- 避免误用
flex-wrap: wrap：它只在空间不足时换行；若需强制单行，必须加 flex-shrink: 0 防压缩
- 慎用
order 属性调整视觉顺序——DOM 顺序不变，屏幕阅读器仍按原始 HTML 读取
Grid 替代复杂嵌套表格的适用边界
cellspacing、cellpadding、border 等属性，仅保留 CSS 控制方式<td> 的页面上，首屏时间明显增加
<li>媒体查询对 <code>display: table-cell 支持极差，@media (max-width: 768px) 下几乎无法可靠实现单栏切换Flexbox 替代两栏/三栏 <table> 布局的最小改动点
<p>90% 的旧式 <code><table> 页面结构（header + sidebar + main + footer）用 Flexbox 可以直接平替，无需重写 HTML 结构，只需改 CSS。
<ul>
<li>父容器加 <code>display: flex，子元素默认水平排列；垂直居中用 align-items: center，顶部对齐用 align-items: flex-start
width: 240px，主内容设 flex: 1（注意不是 flex: auto，后者在收缩时行为不可控）flex-wrap: wrap：它只在空间不足时换行；若需强制单行，必须加 flex-shrink: 0 防压缩order 属性调整视觉顺序——DOM 顺序不变，屏幕阅读器仍按原始 HTML 读取CSS Grid 不是 Flexbox 的升级版，而是解决不同问题的工具。它适合真正二维结构：后台仪表盘、多区域响应式栅格、卡片网格。别用它排一行按钮或简单导航——那是 Flexbox 的舒适区。
- 用
grid-template-areas命名区域比硬写行列更直观，例如："header header" "nav main" "footer footer"，移动端只需改一行就能切换为"header" "nav" "main" "footer" -
grid-auto-flow: dense有风险：它会让小格子自动填空，可能打乱你预设的区域顺序，调试时建议先关掉 - IE11 不支持原生 Grid（仅支持旧版
-ms-grid），如需兼容，要么降级用 Flexbox，要么引入 Autoprefixer + postcss-grid-kiss，但构建成本远高于放弃 IE - 打印样式易被忽略：
@media print下 Grid 布局可能错位，建议用@supports (display: grid)条件包裹，fallback 到 block 流
最容易被忽略的废弃陷阱：display: table 同样危险
很多人以为只要不用 <table> 标签就安全了，其实 CSS 的 <code>display: table、display: table-cell 同样触发表格渲染逻辑。它仍会阻塞渲染、影响可访问性、破坏响应式能力，且在 Lighthouse 等审计工具中同样被标为“布局语义错误”。
- 即使你只用
display: table-cell实现等高列，也绕不开表格的渲染开销和语义污染 - 某些旧 CMS 或编辑器生成的内联样式里藏着
display: table，容易被当成“只是 CSS 问题”而漏查 - 迁移时务必全局搜索 CSS 文件中的
display: table、display: table-cell、display: table-row，一并替换
真正难的不是写新代码，而是识别哪些 <table> 是“真表格”、哪些是“假布局”——后者往往藏在老系统导出的 HTML 模板、邮件模板、CMS 后台页面里，不翻 DOM 根本发现不了。</table>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
