跳到主要内容
Termlib

布局模式 · 内容展示

数据表

Data Table

也叫：表格页、数据列表页、表格视图、Table View、Data Grid

用行和列展示大量同类记录，每行一条、每列一个字段，配合筛选、排序、分页和批量操作，方便逐行查找和比较。

点「标注」看每个部分叫什么，点「反例」看最常见的错误用法。

怎么跟 AI 说

改成你的业务内容再发

这里是订单管理页，请用数据表布局：顶部筛选栏包含关键词搜索、状态下拉和日期范围，右侧放「新建」「导出」按钮；表格列为勾选框、订单号、客户、金额（右对齐）、状态（标签）、下单时间、操作（查看/编辑），表头可排序，操作列固定在右侧；底部分页，每页 20 条并显示总条数。

发给

01判断

你的内容是这样吗？

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

符合这些情况，用数据表

  • 条目结构相同、数量多（几十到上千条），需要筛选、排序和翻页时
  • 每条记录字段较多（四个以上），需要逐列对照比较时
  • 用户需要对多条记录批量选择、批量操作时
  • 数据以文字和数字为主、不依赖图片挑选时

是这些情况，换成别的

  • 内容以图片为主、用户靠看图挑选时

    改用卡片网格画廊

  • 只有一条记录、需要完整展示其各项属性时

    改用描述列表

  • 每条只有一两个字段、不需要比较时

    改用简单列表

  • 主要在手机上浏览、屏幕放不下多列时

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

02避坑

常见坏用法

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

  1. 01

    把所有字段都做成列，横向十几列，要左右拖动才能看全

    下面的线框画的就是这种情况，红色虚线框是出问题的地方。

  2. 02

    金额、数量等数字列左对齐，或者小数位数不统一，没法竖着比较

  3. 03

    没有筛选和分页，一次性把几千行全部渲染出来

  4. 04

    操作列一行放五六个文字链接，挤满整个单元格

反例示意，对应第 01 条

03识别

怎么认出它

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

结构

上方是筛选栏和操作按钮，中间是行列对齐的表格（表头、数据行、右侧操作列），底部是分页器。

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

识别特征

  1. 1一行表头加多行数据，同一字段上下对齐成列
  2. 2行与行之间有细分割线或斑马纹底色
  3. 3表格上方有筛选栏，下方有页码分页

04解释

详细解释

数据表是后台系统里最常用的内容布局：上方是筛选栏和操作按钮（新建、导出、批量删除），中间是表格，每一行是一条记录，每一列是一个字段，比如「订单号、客户、金额、状态、下单时间、操作」；底部是分页。

表格的核心价值是对齐：同一个字段在同一列上下排开，用户可以竖着扫一列找出最大金额，或者点击表头排序，在几百上千条记录里快速定位和比较。这是卡片网格、瀑布流做不到的。

设计时要控制列数，只放最重要的五到八列，其余字段放进详情页；数字列右对齐，状态用标签表示，最右侧固定一列放「查看、编辑」等操作。字段很少、主要靠图片挑选的内容不适合用表格。

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

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

  • .ant-table
  • .el-table
  • .arco-table
  • .t-table
  • .n-data-table
  • [class*="MuiDataGrid-root"]
  • table:has(thead)
  • main:has(table):has([role="search"], [class*="filter" i], form[class*="inline" i], .el-form--inline, .ant-form-inline):has([class*="pagination" i], nav[aria-label*="pagination" i])
类名关键词

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

  • table-page
  • list-page
  • crud-page
  • records-page
  • table-view
结构特征

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

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