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