表格作为结构化数据的载体，被公认为是展现结构化数掘最为清晰、高效的形式，承载着对数据的保存、展示、对比分析、排序、筛选、新增、下钻至详情页等操作，常和按钮、搜索、筛选、分页等其他组件或界面元素一起协同，构成表格页。

构成

数据查看

表格的基本构成如下：

风格样式

基于信息降噪、高效易读的设计原则，结合对业务的考虑，选定带竖向分割线的样式，兼顾普通表格与复杂表格（如报表、分组表格）的展示：

注意要点
1、分割线颜色使用#EBEEF5，不抢视觉，降低视觉疲劳，突出内容：

2、减少不必要的装饰与颜色：

3、表格不能使用衬线字体：

表头设计

表头名称简单清晰，精简字段名称，遵循“少一个字不可”原则：

字段名称过长又必须展示才能理解其意思时，用专有名词代替，给一个提示图标，鼠标悬停时出现 Tooltip ：

数据结构比较复杂时，可使用多级表头即表头分组来体现数据的层次关系：

表头的交互
1、表头排序：分升序和降序，一般情况下，默认按创建的顺序由新到旧排序，即最新创建的排在最上面。可根据实际业务需要或用户使用场景灵活调整表格的默认排序规则。并非所有列都需要排序，要根据业务做出选择，同时支持排序的列用需要做出标识，反馈当前排序状态：

2、表头筛选：支持提供更快捷的单次筛选，通过「漏斗」图标触发，具体哪一列需要表头筛选需要结合业务做出判断，支持筛选的列用需要做出标识，并反馈当前排序状态：

3、表头拖拽：允许用户拖拽调整列宽的大小，以显示因字段过长而被隐藏的内容：

单元格设计

1、高度、宽带定义：采用前端盒子模型的思想，便于设计更加落地。

单元格高度是个变量，受其内容高度的影响：单元格高度 = 内容高度 + 上边距 + 下边距

单元格宽度影响列宽，处理方法有三种：固定列宽、自适应列宽、手动拖动。在实际设计方案中，一般综合采用这三种方法：

• 列宽度允许用户自由拖动调整列宽；
• 当列字段是「状态」「时间」等固定格式时，采用固定列宽的方法，其余列按百分比或等分自适应；
• 当字段值为非固定格式，无法确定内容长度时，需根据业务定义好内容的最大宽度与行数；
• 当内容过长超过列宽及行数时，以“…”显示，鼠标悬停时出现气泡，显示完整内容；

为了展示更多内容，将文字大小设置为12px，则根据规范行高为20px。单元格定义2种规格，对应着表格的两种类型：默认型表格与紧凑型表格

2、单元格内容：
单元格内容一般为文字、图标等，也可以为其他想要格外突显的内容，这些内容称为关键数据标识，用于帮助用户快速定位目标信息，如进度条、状态等等。

3、空白单元格处理：
单元格空白会给用户造成到底是“没有数据”还是“数值为零”的困惑或误解，所以对于无数据或者为零的情况，正确的做法是：

• 数据为零时，用“0”表示，且小数点后位数要与所在列的数据格式保持一致；
• 没有数据时，用“-”表示；

4、度量单位：
单元格是数字时，数据的度量单位使用规则：

• 单位统一时，在表头标识，如“容量(GB)”，单位用英文状态下的括号包围；
• 单位不能统一时，不在表头标识，如“240GB”、“1.24TB”；

行设计

1、行高：
一个个横向单元格组成行，行的高度由单元格高度决定，单元格高度的定义参照上文。

• 一行内容高度为44px，即文字行高20+上间距12+下间距12
• 两行内容高度为64px，即段落行高40+上间距12+下间距12 | 规格 | 高度 | | 行高 | 上下间距 | | —- | —- | —- | —- | —- | | | 一行 | 两行 | | | | 默认 | 44 | | | | | 紧凑 | 64 | | | |

2、行的对齐方式：

3、行的强调：

4、默认行数：

列设计

列宽

滚动与固定

查看详情

数据过滤

数据操作

其他类型