表格
Table
UI 组件也叫：数据表格、Data Table、Data Grid、数据网格
一句话：用行和列排列多条结构相同的数据，每行一条记录、每列一个字段，方便横向比较、排序和筛选。
详细解释
表格把一批结构相同的记录排成网格：每一行是一条记录，每一列是一个字段，表头写明字段名。因为同一字段上下对齐，用户扫一列就能比较数值、发现异常，所以后台的订单、用户、日志等数据几乎都用表格，常配合排序、筛选、分页和勾选批量操作。
表格、列表、卡片怎么选：条目同质、数量多、字段在四个以上且需要比较，用表格；每条只有标题加一两行说明、主要是逐条浏览，用列表；每条以图片等视觉内容为主、数量不多、不需要逐字段对比，用卡片。
字段只有两三个时用表格会显得空旷，列表更合适。在手机上，宽表格要允许横向滚动，或改成卡片式展示。
示例
灰度线框示意，只表达结构，不代表具体视觉风格。
怎么跟 AI 说
可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。
做一个订单表格，列依次为：勾选框、订单号、客户、金额（右对齐，带千分位）、状态（用标签显示）、下单时间、操作（编辑、删除链接）。表头固定，金额和时间列可排序；行悬停时背景变浅灰，勾选后顶部出现批量操作栏；底部放分页，数据为空时显示空状态。
结构与适用场景
结构描述
由表头行、数据行和单元格组成，常附带勾选列、操作列、排序和筛选图标，以及底部的分页。
适用场景
- 条目同质、数量多、每条有四个以上字段，用户需要逐列比较时
- 后台管理中需要对记录排序、筛选、批量勾选和操作时
- 金额、数量等数值数据需要上下对齐，方便看出大小和异常时
不适用场景
- 每条数据只有两三个字段，例如标题加时间，用列表更清爽
- 每条内容以图片、封面为主、需要视觉浏览时，应该用卡片
- 在手机窄屏上展示字段很多的数据，表格会被严重压缩，考虑改为卡片或列表
- 只展示一条记录的详细信息时，应该用描述列表
常见坏用法
- 只有两三个字段的数据也做成表格，留下大片空列，不如用列表
- 金额、数量等数字列左对齐且小数位数不统一，无法上下比较
- 单元格里塞进大段文字或大图，行高忽高忽低，失去表格便于扫读的优势
识别特征
- 顶部一行加粗或带底色的表头
- 下方多行数据按列对齐，行与行之间有细分隔线
- 首列常有复选框，末列常有编辑、删除等文字链接
DOM 线索
插件本地识别时匹配的 CSS 选择器（标签、ARIA role、常见组件库 class）。
table:not([role="presentation"]):not([class*="picker"]):not([class*="calendar"])[role="grid"][role="table"].table.ant-table.el-table[class*="MuiTable-root"][class*="MuiDataGrid-root"].arco-table.t-table.n-data-table[data-slot="table"]