同类记录、字段一致、要横向比较 ≥1 列——订单、成员、价格档位、权限矩阵。
订单表：排序、选中、分页都长在物件上
亲手点列头切换排序、勾选若干行、翻到下一页，观察表头箭头、选中行与计数、分页页码怎样各自变化——这些状态不靠记忆，也不只靠底部说明。
第 0 步：这是「订单管理」表。点列头排序（升/降/取消三态）、勾选行、翻页—— 排序方向、选中计数、当前页码分别长在列头、工具条、分页条上，不用靠记忆。
| 客户 | ||||
|---|---|---|---|---|
| #1017 | 何夕 | ¥412 | 已取消 | |
| #1022 | 高远 | ¥320 | 已取消 | |
| #1021 | 沈青 | ¥256 | 已支付 | |
| #1018 | 阮立 | ¥188 | 已支付 |
第 1 / 2 页 · 共 7 条
对照：当前排序「金额 ↓」，已选 1 项，第 1/2 页。原因：排序方向长在列头、选中计数长在工具条、页码长在分页条，三处都不靠记忆。下一步：点列头切换排序，或点「导出选中」按当前选中导出。
面板教会的知识点
把刚才操作里看到的现象命名为六条规则。
- 列对齐让记录可比：同一字段成一列，眼睛横向扫就能比金额、状态；这是表格区别于卡片列表的核心。
- 排序方向长在列头：列头按钮带 ↑/↓/↕ 与 aria-sort，再点一次切换升/降，第三次取消；不用猜当前顺序。
- 选中态长在行与计数：勾选行立刻高亮，工具条「已选 N 项」同步更新；表头全选框还区分「本页全选」与「部分选中」。
- 分页位置长在分页条：当前页/总页数/总条数都写在条上，上一页/下一页在边界自动禁用。
- 空导出被锁住：未勾选时「导出选中」禁用，避免导出空集；导出完成后选中集合保持不变。
- 窄屏保留关键列：屏宽不足时先隐藏客户列，订单、金额、状态三条决策列仍可读，不强迫横向滚动。
什么时候用表格
从是否需要跨记录比较判断，而不是看数据多不多。
只看单条详情（→ 卡片）、字段差异巨大（→ 描述列表）、或主要按时间线阅读（→ 时间线）。
怎么用：从列到窄屏的最短路径
一次到位的检查顺序。
- 定义列：每个字段一个 th，用 scope 关联行/列，表头与单元格语义对应。
- 给排序：仅给用户会比较的列加排序按钮，列头写清当前方向，支持取消回到默认顺序。
- 给选中：行 checkbox + 表头全选，选中态既在行也在计数，导出/批量操作按计数启用。
- 给分页：明确当前页/总页数/总条数，边界禁用上一页/下一页；排序变化时回到第 1 页。
- 给窄屏：先保留决策所需的关键列，其余隐藏或转成可展开的卡片摘要，而不是强迫横向滚动。
正反例：同一个「订单管理」需求
只改一个关键判断——是否让状态长在物件上。
列头带方向箭头、勾选行有计数、分页有页码；用户一眼知道在看哪一段、选了哪些。
表头纯文字、勾选无计数、分页只剩两个箭头；用户排序后看不出方向、翻页后不知在第几页。
快速自测
订单表排序后用户看不出当前按哪列、哪个方向，最直接的改进是？
继续查证
术语的技术定义和行为以这些一手或权威资料为准。
下一步学
和本知识点经常一起出现的概念。