基本组成

表格是由表头、若干行内容组成。每行被分割成若干单元格，每个单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

表格 ↑

设计优化

优化主要从 2 个方面进行思考：

1. 数据的显示方式和交互操作。
2. 数据的筛选和查找。

交互操作

易于理解

Q1: 如何让表格的数据更易于理解？
A1：
统一格式
存在很多相似列时可以约定格式。

1. 时间是精确到分还是秒？
2. 表头统一携带单位。
3. 如果是陌生字段，需要增加字段解释说明。
4. 对于链接类型的数据，使用链接特定的文字格式（斜体，下划线，淡蓝色）。
5. 对于状态，可以使用颜色提高辨识度（红色代表紧急、危险，黄色代表警告、威胁，蓝色代表普通、一般，绿色代表正常、安全。）
6. 可以使用 icon 代替文字（常见的删除，编辑，下载，设置等等），比起文字更利于理解。

减少元素

1. 为了减少行之间的误读，可采用间隔的淡色背景区分（又称 斑马纹），可以减少当前行数据与上一行数据以及下一行数据的视觉误差带来的误读。
2. 减少元素，增强视觉重点。例如当按钮过多时，根据按钮的主次，将次要的按钮通过一个名为更多的按钮触发显示。例如当鼠标移入数据行时，显示按钮。或者点击按钮时在按钮旁显示隐藏按钮。

页面数据数量

Q1：当前页面加载的数据量过多导致页面数据显示速度较慢 ？

A1：
对数据最重要的操作应该是查找和筛选。保存数据，是为了日后找到需要的数据。因此展示数据不必全部显示，可以将数据分成多份，依次显示每一份。一般是采取 分页显示 ，每页显示对应数量的数据，然后由多页组成，通过跳转到对应的页面，也就是翻页，依次显示所有数据。

Q2：当前页面显示的数据量过多或过少？
A2：
自定义默认每页显示的数据量，同时增加 自定义每页显示数据量 的功能。

行列较多

Q1：当 数据行较多 ，滚动到底部的数据行，想查看表头的单元格值，怎么处理？
A1：
当每一页展示的数据行过多，每一行的数据项较多时，在滑动查看数据时，数据项与数据项之间如果不存在明显的差异，便无法区分该数据项所代表的含义。如果固定表格标题，理解这个数据项所表示的含义将会变得简单。

Q2：当 数据列过多，滚动到尾部的数据时，想查看单元格头部的值，怎么处理？
A2：
当一行对应的单元格较多时，屏幕的宽度无法满足数据行的展示，此时会出现横向滚动条，滑动横向滚动条可以查看数据行所有的数据。而如果滑动到后面时，会出现无法比较前半部分数据和后半部分数据对应的值。当一行对应的单元格较多时，固定需要对比的列，左右滑动时，将会为后续的列提供更多的便捷。

Q3：当 数据列过多，以至于无法快速找到我关心的列或者想比较某几列的数据，但是列直接间隔太远？
A3：
1、通过第三方工具实现。 通过导出到 Excel 功能，借由 Excel 显示或加工处理数据。
2、可以增加展示选择列的功能，通过手动选择展示的列，而实现展示对应的列。

筛选和查找

顺序显示

Q1：通过搜索或者筛选得到的数据，希望把数据按照一定的顺序进行显示。

1. 例如在搜索成绩时，希望按照从高到低或者从低到高的顺序进行显示。
2. 在查看学生提交的作业时，希望按照学生提交作业的时间进行一个逆序显示，以便查看最后一天提交作业的学生名字。

A1： 对表格中的列增加排序功能，例如设置默认为顺序，然后可手动选择排序方式。常见的方式：顺序、逆序。

1. 时间顺序（昨天，今天，明天）、时间逆序（今天、昨天、前天）
2. 数值顺序（1,2,3）、数值逆序（3,2,1）

删除数据

Q1：需要可以便捷地删除单条数据或者批量删除符合某些性质的数据。
A1：
可以对每行数据增加选择框，可以选择某行，也可以选择多行，选中行时出现删除按钮。点击删除，则删除选中的所有项。对于需要删除符合某些性质的数据，可以先搜索或者筛选出目标数据，然后再通过选择所有需要删除的项进行删除。同时可以增加全选按钮，即当页中显示的数据，点击全选可以将所有项都选中。再次点击则取消选中，可以便利的操作所有项。对于导出数据功能也是类似的操作，可以设置默认导出所有数据，同时增加部分导出功能，首先对数据进行筛选和搜索，然后再选中对应的数据进行导出。

优化后的表格

图片来源