表格能够形象具体的展示数据，同时又具有复用度高，拓展性强优势，是常见的信息展示形式，也是对数据进行浏览和使用非常便捷的设计方式，合理的表格设计能给用户带来很高的信息获取率。
今天我就利用浮木云做一个包括表格设计的页面，感兴趣的小伙伴也可以去尝试使用一下啦！
1、容器选择
在之前对浮木云的了解过程中，发现容器是我们制作页面设计的基础组件，因此本次表格制作会用弹性容器做页面的布局框架，查询容器做页面的查询筛选功能，同时用栅格容器作为页面的统计卡片。本次我用模板中心的电商后台管理系统的“订单管理”页面，示例图如下：
2、确定页面布局
该页面框架布局由三部分组成，分别用来放置页面标题内容、统计卡片内容和表格内容，放置统计卡片的栅格容器与放置表格内容的弹性容器设置相应的外间距，本次将放置统计卡片的栅格容器的下外间距设置为10，确保页面分布层次清晰，所有容器的背景颜色填充为“rgba(255, 255, 255, 1)”。
3、内容填充
3.1标题
标题是由一个布局容器和文字组件组成，布局容器宽度、高度分别设置为6px、20px，背景颜色设置为“rgba(104, 157, 244, 1)”，这样文字组件之前的标题标识就做好了，文字组件的文字内容填写“订单管理”，水平对齐设置为“居左”，垂直对齐设置为“居中”，在“文字样式”中设置字体大小“16”，颜色设置为“#689DF4”，这样标题内容就填写完毕。
3.2数字统计
放置数字统计内容的是栅格容器，将栅格容器上、下、左内间距设置为“20”，按照页面示例将统计卡片分栏设置为“3”，分栏间隔设置为20，分栏占比值统一设置为“5”，在每个分栏里放置弹性容器，弹性容器宽度和高度都占满插槽容器。并在每个弹性容器中放置一个图片组件和弹性容器，用来填充图片标识和文字内容，如果还是不清楚，可以观看我之前写的关于统计卡片设计的相关内容，结果示意图如下：
3.3查询容器
一个好的表格设计是离不开表格筛选功能的，利用浮木云制作表格的筛选功能需要用到查询容器，在查询容器内放置合适的筛选组件。这个页面放置组件有三种，包括输入框、下拉框和日期范围，四个组件的名称分别在【属性配置】中的“标签”根据表格中的字段来确定组件的标签名字，从而方便用户的查询与筛选。下图图例是两个下拉组件的“下拉选项”根据自己的需求设置对应的下拉选项。
3.4高级表格
利用浮木云进行表格设计方便多了，他有一个专门的高级表格组件，将其拖拽至弹性容器内，对表格设置相应的宽度和高度，接下来设计的就是表格的具体内容，具体包括表格的基础列，表格列，表格数据和表格的功能按钮设置，基础列主要设置多选框、序号以及按钮是否显示，表格列设置就是添加表格的具体字段，表格数据是对设置好的表格框架填充具体的数据内容，可在线填写，也可导入表格；表格的第四项设置中主要是对表格的功能按钮进行设置，主要包括按钮名称、按钮类型、按钮颜色、按钮的左间距设置。效果图如下：
不得不说，用浮木云制作表格简直太方便了，我们只要清楚这个表格有哪些功能、哪些字段即可快速制作出简单的表格设计。不过，也可以看出我制作的表格和示例图的表格还是有点差别，模板的表格值有标签区分，显得更美观。下一步，我将对高级表格组件进行更加深入细致的研究了解，制作出更为美观的表格。
