表格布局不应用于整体页面结构，仅适用于结构化数据或表单对齐；须用<thead><tbody>确保语义与可访问性，禁用嵌套table，CSS控制宽度与滚动，统一行高，collapse边框，并在长表中启用虚拟滚动。
表格布局在现代页面中不推荐用于整体页面结构，但若必须展示结构化数据或快速对齐表单控件，优化关键不在“多炫酷”，而在语义正确、可访问、不破屏、不卡顿。
用 <thead>、<tbody> 明确划分语义区域
浏览器和屏幕阅读器依赖这些标签理解表格结构。没有 <thead> 的长表格，滚动时表头会消失，用户无法判断当前列含义；缺失 <tbody> 则可能被解析为单一大行，影响性能与可维护性。
- 必须把所有列标题包在
<thead><tr>...</tr></thead>中，哪怕只有一行 -
<tbody>不是可选装饰——它让浏览器能对内容区单独渲染/虚拟滚动（尤其配合overflow-y: auto时） - 避免嵌套
<table>：它会破坏语义层级，导致 JAWS/NVDA 解读混乱
控制宽度要靠 CSS，别信 width 属性
HTML 属性 width="50%" 或 width="200" 在现代浏览器中行为不可靠：它可能被内容撑开、被父容器截断、在 flex/grid 容器里完全失效。真正可控的是 CSS 的 table-layout: fixed 配合 width 和 min-width。
- 给
<table>加style="table-layout: fixed; width: 100%;"，再给每列<th>或<td>设width（如width: 120px或width: 20%） - 想让某列自适应剩余空间？用
width: 1fr不行（<table>不支持 Grid 语法），改用width: auto+min-width: 0防止文字溢出 - 移动端横向滚动必须加容器：
<div style="overflow-x: auto"><table>...</table></div>，否则 iOS Safari 会强制缩放或截断
<label> 和 <input> 对齐别硬调 vertical-align
表格里放表单时，最常见错误是给 <label> 和 <input> 同时加 vertical-align: middle——这看似对齐，实则在不同字体、不同 zoom 级别下仍会偏移，且破坏可访问性基础。
立即学习“前端免费学习笔记（深入）”；
- 必须用
for属性绑定<label for="name">姓名</label>和<input id="name">，这是键盘用户点击聚焦的前提 - 让
<label>所在<td>右对齐：style="text-align: right;"，输入框所在<td>左对齐 +padding-left: 8px，视觉间距干净 - 禁用
line-height拉伸单元格：统一设td, th { line-height: 1.4; }，避免因字体度量差异导致行高突变
长表格卡顿？先关掉 border-collapse: separate
默认的 border-collapse: separate（即带 cellspacing 效果）会让浏览器为每个单元格单独计算边框盒模型，100 行 × 10 列的表格可能触发重排重绘风暴。真实瓶颈常在这里，而非数据量本身。
- 一律用
border-collapse: collapse，再通过border控制内外边框 - 去掉所有
cellpadding/cellspacing属性，全用 CSS：td, th { padding: 8px 12px; } - 超过 50 行建议加虚拟滚动：用
position: relative包裹<tbody>，只渲染可视区 3–5 行，其余用空白占位
最容易被忽略的是：表格不是布局工具，哪怕它“看起来很稳”。一旦需求从“展示数据”滑向“响应式切换列数”或“拖拽排序”，立刻换 display: grid 或 display: flex ——不是因为它们更时髦，而是表格的 DOM 结构和渲染机制天生不支持动态重组。
