用途:在涉及数据表格、网格、列表、可排序列或结构化数据展示的设计、审查与重构时使用。
主要能力:
- 表格与卡片、列表的选型判断:值需跨行比较才用表格,4 列以上结构化数据表格更有优势,两列更适合列表。
- 语义化:使用 table/thead/tbody/th,列头加 scope="col",行头加 scope="row",caption 描述表格(可视觉隐藏),不使用 div 网格承载表格数据。
- 密度与对齐:紧凑 32px、默认 48px、舒适 56px;文本左对齐,数字、货币、百分比右对齐,日期左对齐,状态与布尔居中或左,操作列右对齐;数字列使用 font-variant-numeric: tabular-nums。
- 粘性表头:position: sticky; top: 0,可选首列黏左,背景必须不透明。
- 斑马纹:通常不必要,用 1px 细边框更好;仅在极宽或 32px 极密行使用,且对比度仅 2–4%。
- 排序:激活列显示箭头,悬停显示预览箭头;点击升序→降序→(可选)未排序;th 上使用 aria-sort,默认按最有意义列排序而非 ID。
- 分页、无限滚动与虚拟化的选择:≤1000 行分页,10,000+ 行虚拟化,始终显示总数如“Showing 1–50 of 1,247”。
- 行操作:频繁操作用尾部操作列,4 个以上用 kebab 菜单,批量操作用复选框加操作栏。
- 空状态分三类:初始、过滤无结果、加载错误,均需提供操作路径;加载状态首次用骨架行,后续排序过滤用 60% 透明度遮罩并保留原行。
- 移动端三种策略:横向滚动、折叠为卡片、隐藏次要列;不压缩文字。
- 列宽由内容驱动,操作/状态/日期可定宽,文本用 min-width 并允许截断;截断文本需在悬停和键盘聚焦时显示完整值。
限制与注意:资料给出反模式清单、审计清单与决策树,但未提供具体实现框架或组件库、安装命令、收费与授权信息。