table标签只该用于二维结构化数据展示，不可用于页面布局；因其语义错误会导致响应式失效、SEO下降、可访问性中断及维护困难，仅当内容可直接导入Excel进行排序筛选时才适用。
table 标签只该用于展示二维结构化数据，不是页面布局工具——用它套导航栏、侧边栏或整页骨架，后续响应式、SEO、可访问性全会出问题。
为什么 table 不能当页面布局用
浏览器按表格语义解析嵌套结构，导致真实环境里几个典型翻车点：
-
width: 100%在多层<table>嵌套中常被忽略，移动端直接横向溢出 - 搜索引擎把
<tr>当数据行理解，不会识别“顶部导航”“右侧操作区”这类语义 - 屏幕阅读器按表头-数据关系播报，把菜单读成“第1列：首页，第2列：关于”，用户完全听不懂
- 改一个列宽要查三层
colspan="2"，稍不注意就错位，维护成本飙升
table 真正该用在哪
判断标准很简单：内容能否复制进 Excel 并直接排序、筛选、求和？能，就该用 table；不能，立刻换方案。
典型适用场景包括：
- 课程表：星期一 × 第3节 = 「高等数学」
- 价格对比表：基础版行 × API调用次数列 = 「1000次/月」
- 化学元素周期表：行=周期，列=族，单元格=元素符号+原子量
哪怕只是展示数据，这几个细节漏一个就崩
table 不是写完标签就完事，真实项目里最容易被跳过的硬性条件：
立即学习“前端免费学习笔记（深入）”；
-
<thead>和<tbody>必须显式包裹，否则 Safari 在overflow-x: auto下表头无法固定 - 慎用
rowspan：超过 2 行时，某些安卓 WebView 渲染错位率明显上升 - 移动端必须包一层
<div style="overflow-x: auto">，否则宽表格直接切掉右边内容 - 所有
<th>加scope="col"或scope="row"，否则读屏软件不知道它管哪一列
替代 table 做并排/分栏的现代写法
想让表格和右侧说明文字、操作按钮并排？别套 <table>，直接用容器级 CSS：
- 左右结构：
display: flex父容器 +flex-shrink: 0左栏（如 200px） +flex: 1右栏 - 三栏等宽：
.column { flex: 1; }，自动均分剩余空间，无视 padding/margin 干扰 - 仪表盘复杂区域：用
grid-template-areas命名区域，但每行单词数必须一致，空位用.占位
关键不是“怎么写”，而是父容器是否开启了对应布局上下文——没设 display: flex 却给子元素写 flex: 1，等于没写。
最常被忽略的是：所有响应式表格方案，都依赖 <meta name="viewport" content="width=device-width, initial-scale=1">。没这句，再细的 CSS 也白搭。
