表格是按照行和列或者采用更复杂的结构排列的数据，表格广泛应用于通信、研究和数据分析。其实表格并没有一个确定的定义，它会因为不同的行业和谈论环境而存在差异。
对于B端设计师而言，表格是一个最不陌生的组件，当我们设计产品的时候，最初的需求往往就是由一堆各式各样表格构成，其中非常重要的一项技能就是将冰冷的表格，转化为更直观、更高可读性、更美观的展示形式，如图表、图形、指标卡等形式。
【结构简单】结构简单，分隔和归纳明确，可以详细的展现各个维度的数据值；
【精准高效】可以快速筛选和定位所需的数据，使信息之间更易对比；
【使用简单】更接近用户使用习惯，提升用户对信息的接收效率和理解程度；
表格页可以查看和处理大量的条目，常有导航至详情的作用。用户可在列表页对条目进行筛选、对比、新增、分析、下钻至条目完整详情页等操作。
在我们对表格的设计思考过程中，需要注意两项原则：易读与易用
前者是提升使用者在表格浏览时的体验，主要是从信息密度、色彩分隔、以及视觉节奏三个方面去理解；后者是使用表格时的操作感受，比如快捷操作、多数据编辑等方面去理解。无论是B端的任何页面，表格都是必不可少的部分。
用户需要提取关键信息以了解当前情况或找出根本原因。呈现数据的方式对于为他们提供采取正确行动所需的见解至关重要。
表格被公认是展示结构化数据最为清晰、高效的形式。常和按钮、搜索、筛选、分页等元素一起协同，构成表格页。通常被分为：数据查看、数据操作、数据过滤。
让我们回顾一下表格的基本构成，最上面的为表头，横为行，纵为列，内容区每一组展示数据区域为单元格。
表格的设计，虽然看似简单，但是作为用户最常用的组件之一，我们需要对视觉和交互的精准把握，才能保证用户在使用表格时更加高效。
这里我推荐表格的”四维自检法“，对我们设计的表格是否合理，做出一个标准的判断。
信息降噪：
分别对表格内容和视觉层面进行重要性梳理，剥离不重要的元素，使表格轻量化；
呼吸适中：
保持内容和元素之间合适的间距，使表格页拥有一个好的呼吸感，将给用户营造一个舒适的操作环境；
高效易读：
通过对需求内容的解读，对内容形式加以分类辨别，做出可读性最强的样式；
详情查看：
b端系统往往伴随着表格数据类目庞大的问题，通常会采用另一种形式去展示全部信息。
当表格的字段非常重要时，一定要将字段全部展示出来让用户更清晰地了解数据。
如果你的用户只需要了解部分字段，那么全部展示是没有必要的，只需展示最重要的字段即可，被省略的字段可以通过其他交互方案解决。
如果用户需要了解的内容列数特别多，并且需要将字段全部展示出来，可以通过自定义的方式选择需要展示的字段，或采用横向滚动轴的方式展示更多列数；
当我们去设计表格的时候，通常会发现表格需要承载的信息量是非常大的，有时候为了表现出字段的准确含义，在定义字段名称时往往会非常的长。但是当这些字段同时出现在一个表格里时，过长的字段名称，又会显得冗余，让本就不大的页面空间更加杂乱。
所以当我们设计表格的时候，可以分析字段名称，对字段名称做精简，看看是不是少一个字用户就无法理解字段的含义。
当字段名称过长，又必须展示，才能有效的理解字段含义时。我们可以定义一个专有名词代替，并且在字段名称后使用添加字段说明的形式，来对字段加以说明。
这样一来用户既可以清晰的理解字段含义，又可以在有限的页面空间下获取到更多的数据信息。
早期表格的设计，出发点主要以拟物形式，以最接近现实表格的样式去设计。
但是随着互联网的普及度加深，极简的表格设计，使界面更加轻盈，让用户更加专注于数据内容。
去除纵向列的分割线，仅以浅色的横向分割线区分行，但是要注意分割的颜色不能过于浅而缺乏辨识度，部分人群对颜色的辨识度会偏低，显示器的硬件性能也会影响颜色的可辨识性。
表格设计中一定不要使用过多的颜色区做状态或操作的区分，过多的颜色细分会使表格变得更加混乱，影响用户体验。
对状态的区分，仅用轻量的颜色区分即可，操作栏保持主色按钮色。
了解单元格的结构，以及实现单元格的基本逻辑，有助于我们更好的去把控我们的设计。
单元格内的可控尺寸包含：单元格高度、文字字号、文字/段落行高、文字上下间距。
我们基于视觉呼吸感，赋予各个元素合适的尺寸，我在这里给出一套参考方案：
单元格高度（取整数值） = 内容高度 + 上间距 +下间距
首先我们要了解列的两种类型，第一种是定宽列，第二种是自适应列。
顾名思义就是它的宽度是固定的，比如：第一列我们设置宽度为300px，第二列我们设置为200px，五六七列分别设为100px，那么我们这个列表的宽度就等于200 + 300 + 100*3 = 1100px，在任何分辨率尺寸下你的这个列表都会保持这个宽度不变。
列会随着分辨率变化而产生宽度的变化，比如：列表有五列，我们定义列表的宽度为界面宽度的50%，假定界面宽度为1200px，那么列表宽度就为600px，而每一列的宽度则为120px。此时我们将界面的宽度缩小到600px时，那么列表的宽度就为300px，而每一列的宽度则为60px。
在实际设计案例中，我们往往会面临由于每一列的内容不同，所需要的宽度也就不同，我们希望在列不多时可以保持宽度自适应，但是如果每一列都做成自适应列的话，内容多的列无法展示全内容，内容少的列空间又会很大。
所以，固定列 + 自适应列的综合运用，可以让我们更好的实现想要的设计方案。
然后，我们一起来了解列的结构。每一列分为内容区和左右间距区，在固定列里面内容区和左右间距区都是保持不变的。但是在自适应列中却不同，它的内容区是随界面分辨率变化而变化，左右间距区的宽度是保持不变的（在代码里间距区被叫做Padding）。
当表格字段数量不确定时，通常我们会为自定义列的内容区写一个最小值(min-width)，以确保字段很少时可以自适应宽度，字段较多时仍然能保证完整展示表格数据，不影响对内容的阅读。
当表格的列过多又必须全部展示时，固定必需固定的列(如姓名、任务名称、操作项等)，其他字段横向滚动。
基于人的惯性浏览顺序，设计每列合理的对齐方式，能够辅助用户更高效的完成工作。
使用等宽字体，在有长短不一的数字时(序号除外)：右对齐，方便比较 ;
从心理学的角度讲，人对未知事物会产出恐惧情绪。我们在设计表格的时候，要考虑到表格的各种展示情况，非特殊情况不要出现单元格空白。
表格是一种可以承载大量数据的组件，当数据行数很多时我们通常会选择分页器，使用分页器有哪些优点：
清晰易读：由于界面的空间是有限的，通过分页展示数据，有助于缓解用户的阅读压力；
灵活便捷：在总页数以内，可以通过输入数值，直接跳转到具体想要查看的页；
当界面空间有限、表格列数很多时，如果表格的操作项过多，会占用很多页面空间，需要有选择的展示，将低频操作项收起，用点击更多按钮去触发选择。
如果是1.0的产品，我们可以和产品经理沟通，分析每个功能按钮的优先级。
如果是上线的产品，我们还可以通过按钮点击PV(页面成功访问次数)，来了解按钮的使用频率，做出按钮优化。
如果产品没有特殊需求，那么默认最近创建的在最上面。可以用带有排序的表头，让用户自定义排序。
如果表格的内容项很多，我们通常会在表格上只展示部分重要数据，而其余数据放在详情页面展示。
b端系统往往伴随着表格数据类目庞大的问题，通常会采用另一种形式去展示全部信息。
