表格Table
内容与数据展示按行和列比较多条结构化数据
订单、成员和库存等拥有相同字段的数据，适合放进表格比较。排序、筛选和分页需要单独设计；列很多时还要处理小屏、横向滚动和表头关系。
项目状态更新时间 ↓
官网改版进行中刚刚
年报设计已完成昨天
支付重构已逾期3 天前
什么时候用
- 多行同构数据要一眼对比：用户、订单、日志任务状态登录页进行中支付流已完成
- 需要排序、筛选才能快速找到目标数据名称价格 ↑库存键盘¥ 99210鼠标¥ 19986
- 每行都要带行内操作：编辑、删除、查看项目状态操作官网改版进行中编辑 删除年报设计已完成编辑 删除
- 后台管理页的主体视图，配合搜索和批量操作🔍 搜索用户名新建用户林小hu管理员阿油成员
什么时候不用
- 只有两三行、几个字段 → 用 描述列表 Descriptions 更清爽字段值版本v2.4.0就一行数据，表头比内容还重
- 新品发布图和段落挤进格子，全变形了
- 手机窄屏直接显示过多列，导致频繁横向滚动列太多，手机上得一直左右滑
- 只展示层级时用树形控件 Tree；还要比较多列时再考虑树形表格名称大小src/—components/—层级关系靠缩进硬猜
组成结构 · Anatomy
项目状态负责人
官网改版进行中林小hu
1表格Table整张表：一个表头 + 若干数据行
2表头Header说明每列含义，排序入口也在这
3数据行Row一行就是一条记录
4单元格Cell行列交叉的最小格子，内容要克制
常见变体 · Variants
基础表格Basic
名称库存
键盘210
鼠标86
数据量不大、没有特殊需求时的默认选择
斑马纹Striped
名称库存
键盘210
鼠标86
行数很多时,帮视线横向扫不串行
紧凑Compact
名称库存
键盘210
鼠标86
显示器42
一屏要塞进更多行的密集后台场景
带排序Sortable
名称价格 ↑
键盘¥99
鼠标¥199
用户需要按某列大小快速找目标时
典型使用场景
后台用户管理
用户角色状态
林小hu管理员正常
阿油成员已禁用
订单列表
全部待付款待发货已完成
订单号商品金额状态
2026071801无线耳机¥ 299.00待付款
2026071796机械键盘¥ 199.00待发货
数据报表
7 月销售报表
周次销售额 ↓订单数环比
第 29 周¥ 286,4003,146↑ 12.5%
第 28 周¥ 254,6002,903↓ 3.2%
操作日志
操作日志
时间操作人操作
14:32:05林小hu发布了「官网改版 v2」
14:28:41阿油删除了文件 旧版首页.sketch
13:56:12KK修改了成员权限