表格是使用最广泛，也是最实用的数据可视化工具，它可以承载数据的统计和归纳及数据之间的对比等功能。表格看似简单，跟 Excel 差不多，但却有很多设计技巧，同时也考验设计师对 B 端产品业务的理解和交互设计能力。表格设计除了需要文字排版、数字呈现及字体使用的知识，同时还要搭配其他交互组件，如搜索框、筛选框、时间选择器、按钮、分页器等，甚至还可以与图形结合，让数据呈现的更加直观。

一、表格的构成

一个功能完整的表格（Table）通常由以下部分组成：

1.标题/面包屑区：即表格内容的整体概况，该区域也会当做面包屑来使用。

2.搜索/筛选区：表格信息检索区，方便快速定位数据，通常是搜索框和条件筛选项的组合。

3.按钮操作区：一般将增删改查审的功能按钮放在这里。

4.表头：相当于 excl 的列标签，对列信息内容的概括描述。

5.表体操作区：即对单元格内容进行全局处理的按钮操作区域。

6.表体：表格的主体，由 excl 一样的单元格组成，承载信息数据。

二、搜索/筛选区

1.切换属性搜索

属于单属性搜索的扩展应用。本质上还是一个搜索框对应一个字段接口。

适用场景：多属性搜索字段具有一定模糊性，搜索结果可能是多个，需要搭配条件筛选才能精准搜索。多用于空间有限，筛选条件多的场景。

2.多属性组合搜索

功能上更像是切换属性和多属性搜索的组合。可同时组合不同属性字段进行组合搜索，提高搜索结果的精准度。

适用场景：用于空间有限，无其他筛选项的场景，需要进行多属性组合搜索来获取精确结果。

三、筛选框

筛选框（Filter）主要用于帮助用户缩小搜索范围，通常包含下拉选择器（Select）、单选框（Radio）/复选框（Checkbox）、日期选择框（DatePicker）、切换标签页（Tabs）。

1.单选框（Radio）：常用于在多个备选项中选中单个状态。和下拉选择器不同的是，单选框所有选项默认可见，方便用户在比较中选择。

2.日期选择器（DatePicker）：是输入或选择日期的控件，通过点击输入框弹出日期面板来进行操作。

3.下拉选择器（Select）：弹出一个下拉菜单给用户选择操作。选项根据需求可以单选也可以多选。当选项过多时，也可以加入搜索功能。

4.复选框（Checkbox）：用于在一组可选项中进行多项选择的时候，用以缩小搜索范围提高搜索精准度。