根本原因是语义错误，即<table>本义是展示二维数据，用于页面布局导致语义断裂、无障碍缺失、响应式失效、维护困难；现代标准推荐Flexbox处理一维布局、Grid处理二维布局。
HTML <table> 不再用于页面布局，根本原因不是它“不能用”，而是语义错误、维护困难、响应式失效、无障碍缺失——现代浏览器和标准早已不鼓励，甚至在可访问性审计中直接报错。
为什么 <table> 布局会被淘汰？
早期（1990年代末至2000年代初）开发者确实靠嵌套 <table>、<tr>、<td> 实现三栏、页眉页脚等结构，因为当时 CSS 支持弱、IE6 占比高、float 和 position 难控。但问题很快暴露：
- 语义断裂：
<table>表达的是“二维数据关系”，而导航栏、轮播图、卡片列表根本不是数据表 - 屏幕阅读器会把整个布局表格读作“3行2列的表格”，用户迷失在无意义的行列结构里
- 修改一栏宽度可能要改七八个
colspan和嵌套层级，动一处牵全身 - 移动端 viewport 下，固定像素宽的
<td width="200">直接溢出或堆叠错乱 - 浏览器必须等整个
<table>DOM 解析完才能开始渲染，首屏慢
table-layout: fixed 能救布局表格吗？
不能。这个 CSS 属性只控制单元格宽度计算方式（按第一行或按内容），它解决不了语义、响应式、可访问性任何一项。反而容易掩盖问题：
- 设了
table-layout: fixed后，<td>内容超长会直接溢出，不自动换行 - 配合
width属性（如<td width="30%">）在现代浏览器中已被忽略，实际由 CSS 控制 - 仍无法用媒体查询动态调整行列结构——
@media对<tr>无效
哪些场景下 <table> 还必须用？
仅当内容天然具备行列逻辑、需被机器/辅助技术正确识别时——这才是它的唯一合法用途：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 财务报表、课程表、API 参数对照表、产品规格对比
- 必须包含
<thead>+<th scope="col">或scope="row"，否则屏幕阅读器无法建立行列关联 - 复杂表头需用
colspan/rowspan，但仅限数据结构需要，而非为了“撑开空白区域” - 导出 Excel 或打印 PDF 时保留行列结构，
<table>是目前最稳妥的语义化载体
替代方案不是“选一个”，而是分层使用
现代布局不是非此即彼，而是按维度选择：
- 一维流式排列（导航菜单、按钮组）→
display: flex - 二维网格（仪表盘、相册、响应式栅格）→
display: grid - 局部定位（弹窗、浮层、工具提示）→
position: absolute或position: fixed - 兼容旧项目微调 →
float已基本弃用，inline-block有空白间隙问题，慎用
真正难处理的，是那些历史遗留表格中混着布局代码又混着真实数据的“半吊子”结构——这种情况下，优先抽离数据部分重写为语义化 <table>，其余全部转 CSS 布局，别试图用 JS 拦截或 hack 渲染行为。
