不应用做页面布局，因其语义错误，会导致可访问性差、响应式难适配、seo不友好、维护成本高；仅适用于二维结构化数据展示。
表格布局在现代前端开发中基本已被 flex 和 grid 取代，用 <table> 做页面整体布局不仅语义错误，还会导致可访问性差、响应式难适配、SEO 不友好等问题——别被“轻松搞定”误导，真这么干，后期改起来更费劲。
<h3>为什么 <code><table> 不该用来做页面布局
<p>浏览器确实能渲染嵌套的 <code><table> 并撑开结构，但问题不在“能不能”，而在“该不该”：
<ul><li><code><table> 的语义是“展示行列数据”，屏幕阅读器会按数据表逻辑播报，导航混乱
<li>单元格宽高受 <code>colspan/rowspan 和内容挤压影响大，width: 100% 在某些单元格里根本不起作用
@media 很难优雅控制 <td> 的流式折叠，常要 JS 强制重排
<li>React/Vue 等框架里动态渲染布局时，<code><table> 的 DOM 结构约束极强（比如必须有 <code><tbody>，不能直接 <code>v-for 在 <tr> 上）
<h3>哪些场景下还能放心用 <code><table><p>真正适合 <code><table> 的，只有明确具备“二维关系+可比数据”的内容：
<ul>
<li>财务报表（含表头、合计行、数字对齐）</li>
<li>课程表（时间/教室/教师交叉映射）</li>
<li>API 参数文档（字段名、类型、说明、是否必填）</li>
<li>纯静态的价目表（尤其需跨列合并“套餐名称”这类标题）</li>
</ul>
<p>这时候记得加 <code>role="table"（兼容旧读屏）、<caption></caption> 描述用途、用 <th scope="col"> 或 <code><th scope="row"> 明确表头作用域。
<h3>
<code>display: table 是不是个折中方案？
有人想用 CSS 的 display: table 模拟表格行为来规避语义问题——但实际效果很有限：
- 它不支持
colspan/rowspan，复杂合并仍得回退到真实<table> <li>IE8+ 虽支持，但 <code>display: table-cell的垂直居中在老版本 Safari 里有偏移 bug - Flex/Grid 已能 100% 覆盖其布局能力，且代码更直白、调试更直观（比如
gap替代手动算 padding） - 用了
border="1"这种过时属性，现代 CSS 重置样式会把它压掉，看起来像“没边框” - 在线环境默认禁用
document.write()，如果教程里教用它动态生成表格，直接报错
除非维护一个 2012 年的老系统且不能升级 CSS，否则没必要绕这个弯。
在线运行时最容易忽略的细节
很多在线编辑器（如 CodePen、JSFiddle）默认用 text/html MIME 类型，但如果你复制粘贴一段含 <table> 的代码进去，可能遇到：
<ul><li>没写 <code><thead> / <code><tbody>，某些编辑器自动补全后结构错乱，导致 <code>border-collapse: collapse 失效
真要在线试表格渲染，建议手写最小闭环：<table>
<thead><tr><th>A</th></tr></thead>
<tbody><tr><td>B</td></tr></tbody>
</table>，再逐步加样式。
表格布局的“轻松”假象，往往来自短期能出形。等要加动画、适配暗色模式、接入自动化测试时，才会发现那些被忽略的语义裂痕和 DOM 约束有多深。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
