现在不该用 HTML <table> 做页面布局，该用 CSS Grid 或 Flexbox；因其语义是展示行列结构化数据，而非搭建页面结构，硬用会导致维护难、响应式崩、无障碍差、SEO 不友好。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

直接说结论：**现在不该用 HTML `` 做页面布局，该用 CSS Grid 或 Flexbox**。表格标签 `` 的语义是“展示行列结构化数据”，不是“搭页面架子”。硬拿它布局，后期维护难、响应式崩、无障碍差、SEO 不友好。

为什么 <table> 布局会出问题 <p>浏览器对 `</p> <tr>` 的子元素有严格限制——只允许 `<td>` 和 `</td> <th>`。你写 `</th> </tr> <tr><td><div><table>...</table></div></td></tr>`，看着嵌套了，实际 DOM 里 `<table>` 很可能被自动移出 `<td>`，跑到 `<table>` 外面去。结果就是： <ul> <li> <code>document.querySelector('.nested') 查不到节点

样式失效，比如给 `

table` 写的 width 或 margin 完全不生效

打印预览时子表消失

屏幕阅读器跳过整块内容，不符合 WCAG

table-layout: fixed 只管列宽，不管页面结构

这个 CSS 属性只影响 `

` 内部列宽计算逻辑，和“用 table 布局整个页面”完全无关。它解决的是“第一行 td 宽度决定所有列宽”这类渲染控制问题，典型用法是配合 `` 控制固定列宽：

<table style="table-layout: fixed; width: 600px;">
  <col style="width: 120px">
  <col style="width: 200px">
  <col style="width: 180px">
  <col style="width: 100px">
  <tbody><tr><td>A</td><td>B</td><td>C</td><td>D</td></tr></tbody>
</table>

但如果你把它套在“页头-侧边栏-主内容-页脚”这种页面级结构上，table-layout 不起作用，因为那是容器级布局问题，不是表格内部渲染问题。

真正该用什么替代 <table> 布局

现代方案干净、可控、可响应：

立即学习“前端免费学习笔记（深入）”；

• 单行/单列结构 → 用 display: flex，比如导航栏、卡片列表
• 二维网格（如仪表盘里 8 个独立表格）→ 用 display: grid，配 grid-area 精确落位
• 需要兼容老 IE？优先降级到 float + 清除浮动，而不是退回 <table>
• 真要保留表格语义（比如导出 Excel、排序、屏幕阅读器识别），就把 `

` 严格限定在数据展示区域，外层用 <div class="dashboard"> + Grid 包裹 最常被忽略的一点：**表格布局的“方便”是假象**——它省了初期几行 CSS，但换来的是后期改一个间距就要通读三页 HTML、加个响应断点得重写整个 `` 结构、换主题色要逐个改 `

`。真正的效率来自语义清晰 + 样式解耦，不是标签嵌套越深越省事。