HTML表格元素<table>不应用于页面布局，因其语义是展示二维数据而非划分区域，会损害可访问性、响应式和打印样式；应改用CSS Grid/Flex或display: table模拟布局。
HTML 表格元素（<table>）本身不是为页面布局设计的，现代开发中用它做整体页面布局会破坏语义、损害可访问性、增加维护成本——浏览器已不鼓励这种用法，多数 CSS-in-JS 或组件库甚至默认禁用表格布局逻辑。
为什么 <table> 不该用于页面模块划分
表格标签的语义是「展示二维数据」，不是「划分区域」。当屏幕阅读器遇到嵌套多层的 <table> 布局时，会逐行逐单元格播报，用户完全无法感知“这是导航栏”或“这是侧边栏”。另外：
-
colspan和rowspan会让响应式断点变得不可预测 - Flexbox 或 Grid 可以通过
display: contents或grid-template-areas直接映射视觉区块，而表格需要额外 wrapper 和空<td>占位 - 打印样式中，表格会强制分页截断，导致模块被撕裂
替代方案：用 display: table 模拟表格行为但保留语义
如果你真需要表格式的等高列、自动宽度分配（比如表单左右对齐、卡片网格），可以用 CSS 的表格显示模型，而不是 HTML 标签：
<div class="form-row"> <label>用户名</label> <input type="text"> </div>
配合 CSS：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
.form-row {
display: table;
width: 100%;
}
.form-row > * {
display: table-cell;
vertical-align: middle;
}
.form-row label {
width: 120px; /* 固定标签宽度 */
}
这样既获得表格的对齐能力，又没污染 DOM 结构，还能无障碍聚焦 <input>。
真正需要表格语义时：只用 <table> 包裹数据，用 <caption> 和 scope 属性增强可读性
如果内容确实是二维结构（如价格对比、API 参数列表、课程课表），就该用原生 <table>，但必须补全语义：
- 用
<caption>描述表格用途，例如<caption>2024 年各地区服务器延迟（ms）</caption> - 表头用
<th scope="col">或<th scope="row">明确归属关系 - 避免用
<th>仅为了加粗样式；没语义的加粗请用 CSS - 复杂表格用
<thead>/<tbody>/<tfoot>划分，而非靠<tr>数数
表格布局模块划分这个需求背后，往往其实是“怎么让几块内容横向对齐且等高”或“怎么让表单左右结构稳定”，直接套用 <table> 是绕远路。真正的难点不在写法，而在判断：这个结构到底是不是数据？如果不是，CSS 的 display: grid 或 flex 才是第一选择——而且它们对键盘导航、缩放、暗色模式的支持都更可靠。
