HTML5中<table>不可用于页面布局，因其语义错误、可访问性差、响应式困难；应使用Flexbox或Grid实现布局，二者语义清晰、控制灵活且符合现代标准。
HTML5 布局中，<table> 不该用来做页面结构布局——这是明确的规范共识。用它排版会导致语义混乱、可访问性差、响应式困难，且现代 CSS 已完全能替代。
为什么 <table> 布局在 HTML5 中是错的
表格标签的语义是「展示行列数据」，不是「控制页面位置」。屏幕阅读器会按表格逻辑朗读，搜索引擎也按语义解析结构。用 <table> 套导航栏或三栏页脚，等于告诉辅助工具“这是一张数据表”，实际却不是。
- WCAG 可访问性检测会直接报错
table-used-for-layout - 响应式断点下，
<table>的display: table-cell行为难以用媒体查询覆盖 - Flexbox 或 Grid 能天然支持垂直居中、等高列、源码顺序与视觉顺序分离，而
<table>强制依赖 HTML 顺序和固定行/列结构
用 display: flex 替代两栏/三栏表格布局
绝大多数曾经靠 <table> 实现的横向分栏（如左导航+右内容），现在用 Flexbox 更简洁、可控。
示例：替代一个两行一列（头部 + 主体）再加底部的旧表格布局：
立即学习“前端免费学习笔记（深入）”；
<div class="layout"> <header class="layout-header">Header</header> <main class="layout-main">Content</main> <footer class="layout-footer">Footer</footer> </div>
CSS 关键部分：
.layout {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.layout-main {
flex: 1; /* 自动撑满剩余空间，替代 table 的 height:100% hack */
}- 不需要额外 wrapper 或
<tbody>嵌套 -
flex: 1比height: 100%更可靠，不依赖父级显式高度 - 换为横向三栏时，只需改
flex-direction: row和子项flex-basis，无需重写 HTML 结构
用 display: grid 替代复杂表格布局（如仪表盘、卡片网格）
当需要精确控制行列间距、跨区、对齐（比如左栏固定宽、中间自适应、右侧窄工具栏），Grid 比 Flexbox 更直接，也比嵌套 <table> 清晰得多。
示例：替代一个 3×2 的功能区块表格：
.dashboard {
display: grid;
grid-template-areas:
"header header"
"nav main"
"nav aside";
grid-template-rows: auto 1fr auto;
grid-template-columns: 200px 1fr;
}-
grid-template-areas让 HTML 结构和视觉布局解耦，语义仍由<nav>、<main>等标签承载 - 响应式时，可直接用
@media重定义grid-template-areas，比如把"nav main"改成"main" "nav"实现移动端堆叠 - 避免了
<table>中常见的colspan/rowspan维护噩梦和打印样式失效问题
老项目迁移时最容易忽略的兼容点
不是所有旧 <table> 都能无痛替换。真正卡住的往往是那些依赖表格默认行为的细节：
-
<table>默认有border-collapse: collapse和单元格内边距，Flex/Grid 没有，需手动加gap或padding - 表格单元格自动等高（同一行所有
<td>高度一致），Flexbox 需要父容器设align-items: stretch（默认就是），Grid 默认也是等高，但若子项用了align-self: start就会破掉 - IE11 对 Grid 支持有限（不支持
grid-template-areas字符串语法），如需兼容，可用 Autoprefixer +grid: false回退到 Flexbox，或用display: -ms-grid手写前缀
真正麻烦的从来不是“能不能替”，而是“替完后那个像素对不齐、那个文字基线偏了、那个空隙多了一像素”——这些细节得盯着渲染结果调，而不是只看代码是否合法。
