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