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），别硬塞进表格
• 图表区域必须用 或 容器，不是 table 的子元素

必须写全 和scope属性

缺了这些，表格就不是“可访问的报表”，而是“视觉上像表格的HTML片段”。WCAG 2.1 要求所有数据表必须有 caption，否则视障用户听到的只是“表格，共5行6列”，完全丢失业务含义。

浏览器和辅助技术靠 thead/tbody 区分结构，JS 框架（如 DataTables）也依赖这个划分来操作数据行。漏掉 thead，document.querySelectorAll('tbody tr') 就返回空数组，脚本静默失败。

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

• caption 必须紧贴 table 开始标签后，不能用 title 或纯 CSS 居中文字替代
• 单列表头用 ，单行表头用
• 多级表头必须用 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 时列宽也常丢失。

• 用 提前定义每列行为：
• 顺序必须和实际列严格一致，哪怕某列用了 colspan，对应位置仍需占位
• 设 width 比 min-width 更可控，尤其对导出场景
• 金额列加 class="numeric"，CSS 中统一设 text-align: right，比空格对齐可靠

最易被忽略的是 caption 和 scope 的组合——它们不是“锦上添花”，而是可访问性合规的硬门槛。没有它们，报表再漂亮，在 WCAG 审查下也是不合格的。另外，data-value 这种结构化标记看似多写几字，但能避免后期 JS 处理千分位、货币符号时的正则脆弱性，值得一开始就加上。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！