不建议用 排版复杂网页，因其语义本意是展示二维数据，用于布局会导致语义混乱、响应式困难、可访问性差、seo不友好、维护成本高且性能低下；现代开发应使用语义化html标签（如、）配合css grid或flexbox实现灵活、可维护、无障碍的布局。
不建议用 <table> 排版复杂网页
<p>HTML 表格标签（<code><table>、<code><tr>、<code><td>）是为结构化数据设计的，不是为页面整体布局服务的。强行用它做复杂排版，会导致语义混乱、响应式困难、可访问性差，且维护成本极高。
<h3>为什么 <code><table> 布局在现代开发中行不通
<p>浏览器渲染时，<code><table> 会触发复杂的重排逻辑，尤其嵌套多层后性能明显下降；屏幕尺寸变化时，<code>colspan 和 rowspan 无法自适应，必须配合 JS 才能勉强响应；读屏软件会把整个页面当作一张“数据表”朗读，导航顺序错乱，视障用户几乎无法操作。
<tr>/<code><td>，会降低页面内容权重
<li>样式覆盖成本高：要消除默认边距、对齐、换行行为，CSS 写法冗长且易冲突</li>
<li>移动端基本不可用：固定列宽 + 强制横向滚动，用户必须左右拖拽才能看全内容</li>
<h3>替代方案：用语义化标签 + CSS Grid 或 Flexbox</h3>
<p>真正适合复杂网页布局的是语义化容器（如 <code><header></header>、<main></main>、<aside></aside>）配合现代 CSS 布局模型。其中 display: grid 尤其适合二维结构（如仪表盘、多栏新闻流、带侧边栏的管理后台）。
- 用
<section></section>划分功能区块，比<tr> 更具语义 <li>用 <code>grid-template-areas直观定义区域位置，比如"header header header" "nav main aside" "footer footer footer" - 用
minmax(250px, 1fr)控制侧边栏最小宽度，同时允许主内容弹性伸缩 - 媒体查询中直接改
grid-template-areas，无需重写 HTML 结构 - 避免在
<td> 里再放 <code><div> + Flex/Grid —— 浏览器解析顺序混乱，容易导致渲染错位 <li>所有 <code><table> 必须有 <code>border-collapse: collapse，否则单元格间隙不可控 - 不要指望
<caption></caption>能替代<h2></h2>做标题——它只对辅助技术有效，视觉上仍需额外样式
如果必须兼容老系统，怎么最小化风险
极少数场景（如遗留 IE8 系统、邮件模板）仍需表格布局，此时应严格限制范围：只用于纯展示型模块（如价格对比卡、产品参数表），且禁止嵌套、禁止用 colspan 跨超过 3 列，<table> 必须加 <code>role="presentation" 显式声明“这不是数据表”。
复杂网页的布局本质是信息架构问题，不是标签选择问题。用错标签，后期重构成本远高于初期多花一小时学清楚 grid-area 和 flex-wrap 的行为差异。
