现代页面布局应禁用table嵌套，因其阻塞渲染、重排开销大、响应式差且可访问性低；推荐div+flex/grid配合语义化标签，兼顾性能、维护性与无障碍。
table 嵌套导致页面渲染阻塞
浏览器解析 <table> 时必须等整块标签闭合（即读到 <code>
）才开始渲染，尤其在多层嵌套、含大量 <tr>/<code><td> 的布局中，会显著拖慢首屏时间。而 <code><div> 是流式解析：遇到 <code><div> 就立即创建节点并尝试渲染，无需等待闭合标签。
<p>常见错误现象：页眉用 <code><table> 包裹、主内容区再套一层 <code><table>，结果用户看到长时间白屏，Network 面板里 <code>DOMContentLoaded 时间比同结构的 <div> 多出 200–500ms。
<ul><li>不要用 <code><table> 做整页框架，哪怕只为了“兼容旧 IE”——现代浏览器（Chrome/Firefox/Safari/Edge ≥ 2018）对 <code>flex 和 grid 支持已完备
<table> 拆成独立区块，避免跨区域嵌套
<li>用 <code>display: table 替代真实 <table> 标签可绕过解析阻塞，但语义和可访问性会受损，仅限紧急兜底
<h3>div + CSS 布局的重排重绘成本更可控</h3>
<p><code><table> 的列宽自动计算逻辑复杂：浏览器需遍历所有 <code><td> 内容宽度、合并单元格（<code>colspan/rowspan）、甚至回溯父级 <colgroup></colgroup>，才能确定每列基准宽度。一旦 DOM 变动或窗口 resize，整个表格重算代价高。
而 <div> 配合 <code>flex 或 grid 时，布局规则由 CSS 显式定义，浏览器只需按既定算法执行，响应式切换、动态增删子元素的开销低得多。
立即学习“前端免费学习笔记（深入）”；
-
flex适合一维线性布局（导航栏、卡片流），grid更适合二维网格（仪表盘、响应式图库） - 避免给
<div> 设置 <code>width: auto+float混搭，这会触发老旧的 BFC 计算，反而增加重排压力 - 慎用
table-layout: fixed强制表格列宽固定——虽能提速，但内容溢出或换行时易截断，且无法响应字体缩放 - 小屏优先时，
grid的auto-fit+minmax()能自动调整列数，flex的flex-direction: column一键翻转顺序 - 不要试图给
<table> 加 <code>overflow-x: auto来“适配手机”——横向滚动体验差，且无法触发 pinch-to-zoom 缩放 - 如果遗留系统必须保留 table 布局，至少用
display: block+width: max-content强制表格变宽，再包裹一层scrollable容器，而非放任其撑破 viewport
实际性能差异取决于具体写法，而不是“div 一定比 table 快”。但现代项目中，用
可访问性与 SEO 不再是 table 的优势项
过去认为搜索引擎“偏好 table”，实为误解：Google、Bing 等早已不因标签类型降权。真正影响排名的是 DOM 结构清晰度、语义正确性、首屏内容加载速度——而这三点，<div> + 语义化标签（<code><header></header>、<main></main>、<article></article>）反而更优。
屏幕阅读器对 <table> 的默认行为是逐行列播报，若用它做布局，会导致“第1行：导航链接；第2行：侧边栏标题；第3行：主文章正文……”这种完全脱离逻辑的朗读顺序，用户根本无法理解页面结构。
<ul><li>数据表格必须用 <code><table>，且需包含 <code><caption></caption>、<thead>、<code><th scope="col"> 等辅助标签
<li>布局类容器一律用 <code><div> 或更合适的语义标签，禁用 <code><table> 模拟栅格
<li>检查 Lighthouse 报告里的 “Accessibility > Table markup” 项，若提示“非数据表格使用了 table 元素”，就是硬伤</li>
<h3>移动端适配下 table 布局几乎不可维护</h3>
<p>响应式设计要求容器能随视口缩放、堆叠、重新排序。<code><table> 的行列刚性结构天然抗拒这些操作：你无法用媒体查询让 <code><tr> 变成垂直堆叠，也不能让 <code><td> 在小屏上换行或隐藏某列——只能靠 JavaScript 强行 DOM 操作，既增加代码量又引入运行时风险。
<p><code><div> + <code>@media + flex-wrap 或 grid-template-areas 则直接声明行为，CSS 引擎原生支持，无 JS 依赖。
<table> 做布局，等于主动放弃浏览器优化能力、可访问性保障和响应式弹性——这些坑，远比少写几行 CSS 代价大得多。</table>
