跳到主要内容
Termlib

UI 组件 · 数据展示

表格

Table

也叫：数据表格、Data Table、Data Grid、数据网格

用行和列排列多条结构相同的数据，每行一条记录、每列一个字段，方便横向比较、排序和筛选。

点「标注」看每个部分叫什么。

怎么跟 AI 说

改成你的业务内容再发

做一个订单表格，列依次为：勾选框、订单号、客户、金额（右对齐，带千分位）、状态（用标签显示）、下单时间、操作（编辑、删除链接）。表头固定，金额和时间列可排序；行悬停时背景变浅灰，勾选后顶部出现批量操作栏；底部放分页，数据为空时显示空状态。

发给

01判断

你的内容是这样吗？

对照两列，确认表格是不是你要找的。

符合这些情况，用表格

  • 条目同质、数量多、每条有四个以上字段，用户需要逐列比较时
  • 后台管理中需要对记录排序、筛选、批量勾选和操作时
  • 金额、数量等数值数据需要上下对齐，方便看出大小和异常时

是这些情况，换成别的

  • 每条数据只有两三个字段，例如标题加时间

    改用列表

  • 每条内容以图片、封面为主、需要视觉浏览时

    改用卡片网格卡片

  • 在手机窄屏上展示字段很多的数据，表格会被严重压缩

    改用卡片列表

  • 只展示一条记录的详细信息时

    改用描述列表

拿不准？上传页面截图，页面分析会逐块判断该用什么布局。

02避坑

常见坏用法

看起来能用，其实会给用户添麻烦。

  1. 01

    只有两三个字段的数据也做成表格，留下大片空列，不如用列表

  2. 02

    金额、数量等数字列左对齐且小数位数不统一，无法上下比较

  3. 03

    单元格里塞进大段文字或大图，行高忽高忽低，失去表格便于扫读的优势

03识别

怎么认出它

先看整体结构，再对照几个一眼能认出的特征。

结构

由表头行、数据行和单元格组成，常附带勾选列、操作列、排序和筛选图标，以及底部的分页。

组成部分点一下，在上面的线框里标出来

识别特征

  1. 1顶部一行加粗或带底色的表头
  2. 2下方多行数据按列对齐，行与行之间有细分隔线
  3. 3首列常有复选框，末列常有编辑、删除等文字链接

04解释

详细解释

表格把一批结构相同的记录排成网格：每一行是一条记录，每一列是一个字段，表头写明字段名。因为同一字段上下对齐，用户扫一列就能比较数值、发现异常，所以后台的订单、用户、日志等数据几乎都用表格，常配合排序、筛选、分页和勾选批量操作。

表格、列表、卡片怎么选：条目同质、数量多、字段在四个以上且需要比较，用表格；每条只有标题加一两行说明、主要是逐条浏览，用列表；每条以图片等视觉内容为主、数量不多、不需要逐字段对比，用卡片。

字段只有两三个时用表格会显得空旷，列表更合适。在手机上，宽表格要允许横向滚动，或改成卡片式展示。

开发者信息
术语 ID
component-table
DOM 选择器

插件在本地识别时匹配这些 CSS 选择器（标签、ARIA role、常见组件库 class）。

  • table:not([role="presentation"]):not([class*="picker"]):not([class*="calendar"]):not([class*="descriptions"]):not([class*="descriptions"] *)
  • [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"]
类名关键词

类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。

  • table
  • data-table
  • datatable
  • data-grid
  • datagrid
  • grid-table
  • table-container
组件名

React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。

  • Table
  • DataTable
  • DataGrid
结构特征

根据元素的排列和样式算出来的特征，只用来加分，单独不判定。

  • 表格结构
优先级
1 · 同一层有多条命中时，优先级高的胜出
版本
v2 · 更新于 2026/09/30