不能用<table>实现网页布局，因其本质是语义错误，会导致渲染阻塞（DOMContentLoaded延迟200–500ms）、可访问性失效（屏幕阅读器误读页面结构）、SEO权重混乱，且响应式与维护成本极高；仅真实二维结构化数据（如课程表、财务报表）才合法使用。
不能用 <table> 实现网页布局——这不是兼容性问题，而是语义错误、渲染阻塞、可访问性失效的必现后果。
为什么 table-layout: fixed 也救不了整页表格布局
即使你加了 table-layout: fixed、写了 <col>、设了明确宽度，浏览器仍必须等整个 </table> 标签闭合才开始渲染。首页用多层嵌套 <table><tr><td>...</td></tr></table> 包裹 header + main + footer，DOMContentLoaded 时间普遍多出 200–500ms。白屏时间肉眼可见，且无法被 lazyload 或流式 SSR 缓解。
- 屏幕阅读器会把
<header>当成第一行表头，把<nav>当成第二行数据，把整个页面读成一张“内容错位的财务报表” - SEO 爬虫不识别这种结构为页面骨架，标题、正文、侧边栏的权重关系全乱
- 任何
colspan或rowspan都会让列宽重算逻辑爆炸，resize 时卡顿明显
display: table 双栏在 IE8–IE10 外已无存在必要
现代项目里写 display: table 模拟双栏，等于主动放弃语义、可访问性与响应式能力。它只在一种场景下勉强成立：维护银行/政府老系统，且构建工具无法注入 polyfill、JS 也被策略禁用。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 外层容器必须写
display: table; width: 100%，漏掉width在 IE 下直接塌陷 - 左右栏必须是同级
div，分别设display: table-cell；中间插个<span>或<fieldset>就断层 - 小屏下无法用媒体查询切单列，
display: table-cell强制横排，只能靠 JS 切换 class - 左右栏高度不同会导致背景色错位，
vertical-align: middle对多行文本支持极差
哪些地方还能合法用 <table>？
只有真正二维结构化数据才该用 <table>——它不是“能用”，而是“非用不可”。
立即学习“前端免费学习笔记（深入）”；
- 课程表、API 字段对照表、财务报表、带合并表头的统计结果
- 需要原生
colspan/rowspan表达逻辑单元（如“Q1–Q4”跨四列） - 后台数据录入表，要求增删整行后行列语义绑定不丢失
- 邮件模板或微信公众号编辑器等 CSS 支持残缺环境（此时必须配
table-layout: fixed+<col>+vertical-align: middle）
真正的难点不在怎么写，而在判断“这到底是不是二维数据”。把商品列表、首页导航、个人资料页塞进 <table>，相当于用 Excel 打开 Word 文档——格式能凑合，但语义和维护成本已经崩了。
