不推荐用table实现页面布局，因其语义本意是展示二维数据，用于布局会导致语义混乱、响应式困难、可访问性差、SEO不友好；现代开发应使用Flexbox或Grid替代。
不推荐用 table 实现页面布局——它会让语义混乱、响应式困难、可访问性差，现代开发中应使用 flexbox 或 grid。
为什么浏览器能渲染但你不该这么做
table 元素的语义是“展示行列数据”，不是“划分页面区域”。屏幕阅读器会把整个页面读成一张表，导航逻辑错乱；CSS 媒体查询对 table 布局的干预能力极弱，手机端几乎无法合理重排；SEO 也倾向降权结构混乱的页面。
常见错误现象：display: table-cell 在 IE8+ 虽能模拟表格行为，但 colspan/rowspan 一嵌套就失控，vertical-align 行为在不同浏览器中不一致。
如果必须兼容老系统（比如 IE7）怎么办
仅限极端遗留场景，且需接受维护成本高、扩展性差的结果。此时应：
立即学习“前端免费学习笔记（深入）”；
- 用最简结构：只用
table、tr、td，禁用th（非数据表头易误导辅助工具） - 禁止嵌套
table：每层table都增加 DOM 深度和重绘开销 - 固定宽度 +
table-layout: fixed：避免内容撑开列宽导致整体错位 - 用
aria-hidden="true"包裹纯装饰性td，减少无障碍干扰
示例（顶部导航 + 左侧菜单 + 主内容）：
<table class="layout" role="presentation">
<tr>
<td colspan="2"><header>导航栏</header></td>
</tr>
<tr>
<td width="200"><nav>菜单</nav></td>
<td><main>内容区</main></td>
</tr>
</table>
替代方案怎么平滑迁移
已有 table 布局的老项目，可逐步替换，无需一次性重写：
- 先给
table加class="legacy-layout"，方便后续全局定位 - 用
display: grid模拟相同行列结构，例如三栏布局：grid-template-areas: "header header" "nav main" - 用
display: flex替换单行多列（如按钮组），注意设置flex-wrap: wrap防止溢出 - 检查所有
width/height内联样式，转为 CSS 类控制，否则flex/grid的弹性计算会被强制打断
真正卡住的地方往往不是语法，而是团队对“布局”和“数据展示”的认知混用——一个 td 里塞了按钮、图标、文字，还加了 onclick，这时候重构的第一步不是换标签，是先拆语义。
