table只该用在真正有行列关系的地方：仅用于展示二维结构化数据，如订单列表、API字段说明等；报表整体布局应使用CSS Grid或Flexbox，纯指标用dl/dt/dd，图表区域禁用table，并须严格遵循caption、thead/tbody、scope等可访问性规范。
table只该用在真正有行列关系的地方
HTML table 不是页面布局工具，也不是“画格子”的万能容器。它只适合展示二维结构化数据——比如订单列表、API字段说明、财务明细表。拿它套整个报表页（含标题、图表区、指标卡），会导致屏幕阅读器把导航栏读成“第1行第1列”，键盘焦点路径错乱，打印样式崩溃，后续加排序或导出也难扩展。
常见错误包括：table里嵌div+float模拟卡片；所有表头都用td；colspan撑开表头却不包thead；用嵌套table做分组。
- 报表页整体布局用
CSS Grid或Flexbox，只在明确需要「行×列」语义处插入table - 纯指标展示（如“总销售额：¥2,450,000”）用
div+ 语义化标签（dl/dt/dd），别硬塞进表格 - 图表区域必须用
<canvas></canvas>或<svg></svg>容器，不是table的子元素
必须写全
和scope属性
缺了这些，表格就不是“可访问的报表”，而是“视觉上像表格的HTML片段”。WCAG 2.1 要求所有数据表必须有 caption，否则视障用户听到的只是“表格，共5行6列”，完全丢失业务含义。
浏览器和辅助技术靠 thead/tbody 区分结构，JS 框架（如 DataTables）也依赖这个划分来操作数据行。漏掉 thead，document.querySelectorAll('tbody tr') 就返回空数组，脚本静默失败。
立即学习“前端免费学习笔记（深入）”；
-
caption 必须紧贴 table 开始标签后，不能用 title 或纯 CSS 居中文字替代
- 单列表头用
<th scope="col">，单行表头用 <code><th scope="row">
<li>多级表头必须用 <code>id + headers 显式绑定，不能靠位置猜测归属
- 数值列建议加
data-value="12345.67"，避免 JS 解析 “¥12,345.67” 这类格式化字符串出错
让表格在小屏可滚动且不崩塌
直接给 table 设 overflow-x: auto 没用——table 会优先满足内容宽度，溢出部分被裁剪，也无法拖拽。固定表头也容易失效，除非父容器有 display: block 和明确高度限制。
- 外层用
div 包裹 table，设 overflow-x: auto
- 不要给
table 设 width: 100%，让它由内容自然撑开
- 移动端慎用
table-layout: fixed，除非同时配 word-break: break-all
- 固定表头需确保
thead 单独包裹，且父容器有 height 和 overflow: hidden
数值列对齐和列宽控制要用
逐个给 td 写 style="text-align:right" 不仅冗余，列顺序一调就得全改；用 td:nth-child(3) 在有 colspan 时还会失效。导出 Excel 时列宽也常丢失。
- 用
<colgroup></colgroup> 提前定义每列行为：<col style="text-align: right; width: 140px">
-
<col> 顺序必须和实际列严格一致，哪怕某列用了 colspan，对应位置仍需占位
- 设
width 比 min-width 更可控，尤其对导出场景
- 金额列加
class="numeric"，CSS 中统一设 text-align: right，比空格对齐可靠
最易被忽略的是 caption 和 scope 的组合——它们不是“锦上添花”，而是可访问性合规的硬门槛。没有它们，报表再漂亮，在 WCAG 审查下也是不合格的。另外，data-value 这种结构化标记看似多写几字，但能避免后期 JS 处理千分位、货币符号时的正则脆弱性，值得一开始就加上。
缺了这些，表格就不是“可访问的报表”，而是“视觉上像表格的HTML片段”。WCAG 2.1 要求所有数据表必须有 caption，否则视障用户听到的只是“表格，共5行6列”，完全丢失业务含义。
浏览器和辅助技术靠 thead/tbody 区分结构，JS 框架（如 DataTables）也依赖这个划分来操作数据行。漏掉 thead，document.querySelectorAll('tbody tr') 就返回空数组，脚本静默失败。
立即学习“前端免费学习笔记（深入）”；
-
caption必须紧贴table开始标签后，不能用title或纯 CSS 居中文字替代 - 单列表头用
<th scope="col">，单行表头用 <code><th scope="row"> <li>多级表头必须用 <code>id+headers显式绑定，不能靠位置猜测归属 - 数值列建议加
data-value="12345.67"，避免 JS 解析 “¥12,345.67” 这类格式化字符串出错 - 外层用
div包裹table，设overflow-x: auto - 不要给
table设width: 100%，让它由内容自然撑开 - 移动端慎用
table-layout: fixed，除非同时配word-break: break-all - 固定表头需确保
thead单独包裹，且父容器有height和overflow: hidden - 用
<colgroup></colgroup>提前定义每列行为：<col style="text-align: right; width: 140px"> -
<col>顺序必须和实际列严格一致，哪怕某列用了colspan，对应位置仍需占位 - 设
width比min-width更可控，尤其对导出场景 - 金额列加
class="numeric"，CSS 中统一设text-align: right，比空格对齐可靠
让表格在小屏可滚动且不崩塌
直接给 table 设 overflow-x: auto 没用——table 会优先满足内容宽度，溢出部分被裁剪，也无法拖拽。固定表头也容易失效，除非父容器有 display: block 和明确高度限制。
数值列对齐和列宽控制要用
逐个给 td 写 style="text-align:right" 不仅冗余，列顺序一调就得全改；用 td:nth-child(3) 在有 colspan 时还会失效。导出 Excel 时列宽也常丢失。
最易被忽略的是 caption 和 scope 的组合——它们不是“锦上添花”，而是可访问性合规的硬门槛。没有它们，报表再漂亮，在 WCAG 审查下也是不合格的。另外，data-value 这种结构化标记看似多写几字，但能避免后期 JS 处理千分位、货币符号时的正则脆弱性，值得一开始就加上。
