表格
Table
别名:表格数据表格数据列表二维表可排序表格后台数据列表订单列表那种表
这是什么
用行与列精确对齐数据的二维表格：一行一条记录、一列一个字段，适合逐列比较、排序与大容量数据浏览。 行可悬停高亮、点击选中，列头通常带排序控制。
交互实验室
试一试，再决定怎么用尝试排序、选择行与操作，比较表头和内容的对齐。
正在加载实验室…
使用时关注什么
- 01数值对齐方便比较，排序方向有明确提示。
- 02窄屏可横向查看表格，但页面本身不应溢出。
✓ 适用场景
- 字段多、需要逐列比较的数据
- 后台管理列表（订单、用户、日志）
- 需要排序、筛选、批量操作的密集数据
✕ 不适用场景
- 移动端窄屏放不下列（转为卡片列表）
- 内容以浏览为主、比较为辅（用 card 流）
- 每条记录字段很少且强调视觉（用卡片或列表）
常见形式
带边框
Bordered
单元格描线，最传统
斑马纹
Striped
隔行底色，长表格更易读
固定表头
Sticky header
滚动时表头常驻
实现要点
border-collapsetext-alignoverflow-x: autoposition: sticky容器 overflow-x-auto 处理窄屏；数字列右对齐、文本列左对齐；斑马纹用 odd 行底色。 排序：th 内放按钮并标记 aria-sort，二次点击反向。固定表头用 sticky top-0 配表头底色。 行密度用 py 控制紧凑（约 8px）或舒适（约 16px）。
平台 API
<table><thead><tbody>横向对比
查看完整对比 →相关概念
卡片Card
用圆角边框或底色围出一块自包含内容的矩形容器，一块卡片聚合一组相关信息： 封面图、标题、摘要与操作。是内容流、仪表盘与电商列表的通用显示单元。
组件替代方案分页Pagination
用带页码的控件把长结果集切分为离散页面：用户显式点击页码或上一页 / 下一页 按钮取回对应片段，当前位置永远可知、可分享、可回退。与无限滚动的"失控 漂移"相对，它是数据浏览中最可控的方式，也是搜索结果与后台表格的默认选择。
组件相似概念筛选面板Filter Panel
集中承载筛选条件的面板，常驻列表侧边或以抽屉、浮层唤起：复选组、单选、滑杆组合出当前查询。 与列表实时联动刷新结果数，并支持已选条件回显与一键清除。
组件相似概念主从视图Master Detail
左侧一列摘要条目，右侧展示选中项的完整详情，点击左侧条目右侧即时联动更新。 它解决的是"在列表页与详情页之间来回跳转"的问题——总览与细读同屏共存， 用户切换条目不丢方向感，浏览和比对多个条目的成本大幅降低。
交互模式搭配使用