表格被公认为是展示结构化数据最为清晰、高效的形式，表格的数据与功能操作、详情入口，与平台的导航一同构成整体的表格页面布局。

布局

• 侧边导航为可选项，有的页面不存在侧边导航；
• 表格内容区：
  • 距离左右24px（建议设置为变量，后续可能调整），距离页头16px；
  • 填充色为纯白色#FFFFFF，圆角值为2px；
  • 宽度随屏幕自适应，高度根据内容自适应；
• 页头区：
  • 距离侧边导航0px，距离右边屏幕边缘0px；
  • 标题距离左侧24px，与表格内容区域左沿对齐；
  • 高度不定，存在多种变体情况，下面做具体罗列；

页头

页头的组成有面包屑、标题、页面操作、自定义标签、信息组、Tab选项卡，全量情况如下：

结构解析

标注解析

表格

表格情况较为复杂，存在多种结构，以适应不同的使用场景。

结构一

标注解析：

结构二

标注解析：

对于情况B的布局需要特别说明：

• 采用24栅格划分；
• 一个筛选项占8col，包含字段名称与录入组件，录入组件可为输入框、下拉框、日期选择框等；
• 字段名称占2col，文字右对齐，有冒号；
• 录入组件占6col，不完全填满6col，需要在右侧留出24px的间距，最后一个筛选项除外（因为外层已经预留了24px）
• 字段名称的字数原则上不超过6个字，可通过提示图标对标题做解释；
• 6个字+提示图标的极限情况下，2col宽度不够，此时2col调整为3col，对应的6col调整为5col；
• 2col变3col的原则是2col宽度小于「字段+提示图标」的长度时，2col调整为3col，对应的6col调整为5col，只要某一行发生了这样的调整，则整一列都要调整以保证表单的对齐；
• padding-left由16px调整为0px的原则是当第一列由2col调整为3col时，为了保证视觉的平衡感，特此调整；

结构三

当操作项≤2项，筛选项≤3项时，或者操作项≤3项，筛选项≤2项时，可使用结构三，该结构常见于WinCloud的表格页。

标注解析：

结构四

标注解释：

表格主体

表格的基本构成如下：

风格样式

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

注意要点
1、颜色的使用尽量克制，不抢视觉，降低视觉疲劳，以更好的突出内容，分割线颜色使用#EBEEF5，表头文字色#454852，表头单元格填充色#F6F8FA，这些色值建议设置为变量：

2、减少不必要的装饰与颜色，行内操作统一采用蓝色的链接文字的样式：

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

表头设计

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

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

数据结构比较复杂时，可使用多级表头即表头分组来体现数据的层次关系，需要注意，除最底层的表头是左对齐外，上层的如顶层、第二层的表头均居中对齐：

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

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

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

单元格设计

1、高度、宽带定义：
采用前端盒子模型的思想，便于设计更加落地。单元格高度是个变量，受其内容高度的影响：单元格高度 = 内容高度 + 上边距 + 下边距

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

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

单元格定义2种规格，对应着表格的两种类型：默认型表格与紧凑型表格

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

用于表格状态标签Tag，根据状态所代表的含义，使用不同的状态标签：

• 代表成功：绿色green；
• 代表进行中，正常状态：极客蓝geekblue；
• 代表错误、失败：红色red；
• 代表警示、提示：默认金色 gold（当有两个状态都代表警示时，更严重的警示用日暮volcano，次警示用金色gold ）；

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

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

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

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

行设计

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

2、行的对齐方式：
多行内容时，默认采用垂直居中对齐

3、行的交互：
有三种状态，分别是正常态Normal、已选择Selected、鼠标移入Hover：

此外，行的选中方式除了点击复选框选中整行，还需支持点击行内任意位置选中整行。

4、默认行数：
每页的默认行数为：10条/页，用户可自定义每页的行数，

列设计

1、列宽：
上文单元格设计有提到关于宽度处理的方法，需要补充说明的是列的最小宽度，或者说单元格的最小宽度为4个字的宽度，即72px。

另外，列数最好控制在「7±2」的范围，过多的列数反而会让用户迷失在大量数据里，更好的做法应该是基于用户使用场景和目标为用户展示最为关注的数据，更多的信息放在详情页中展示。

2、列的对齐方式：
列的对齐方式有3种：

3、展示列设置：
表格提供展示列设置，作为每个表格公共的功能属性，用户可通过自定义列的展示，查看自己想看的信息

滚动与固定

列数增多导致表格宽度大于页面可展示宽度时，需要对首列和尾列操作进行固定，中间列水平左右滑动

行数增多导致表格高度超出页面可展示范围时，为了让用户在纵向滚动时清楚每一列是什么数据，可对表头做吸顶处理或者固定表格高度

查看详情

详情的查看入口统一由点击名称进入，操作列无“详情”操作

详情根据信息量、与母页面的连贯性展示形式有以下4种：

加载与空状态

表格内容加载时间大于1秒时，需要展示加载状态，缓解用户等待的焦虑

表格为空时，根据不同类型展示不同的空状态：

其他表格类型

树形表格