正文
如果处理得当，复杂的数据也能让用户轻松浏览和比较；处理不善，简单的表格也会令用人难以理解。要平衡用户的浏览目的和设计者的传达目的，对部分信息进行强调或弱化处理。其中，如何让表格在表现层传达更好，考验UI的视觉表现功底；如何让表格在结构层更合理、在操作层更易用，则考验交互设计师的数据整合功力。
表格是为可读性而生的，一个结构清晰的布局能大大提升用户对信息的接收速度和理解程度。因此，设计易读，易扫视，易比较，易操作的表格结构是表格设计的首要目标。
设计技巧：视觉篇
精简数据，明确信息优先级
虽然终极技巧是
“在全面了解实际业务需求的基础上进行灵活设计”
，但对于不熟悉业务的交互设计师而言，数据的取舍和处理却是最难的。对表格内容的取舍要建立在对业务的了解之上，尽量精简指标，隐藏不必要信息，减少干扰，避免无主次的铺出所有信息。不要让用户一次性接收过于庞大的信息量，尤其不要超出用户的视线范围，避免通过拖拽的方式查看信息。建议默认只展示用户所必须的信息，其他次要信息通过展开下拉等方式展示，为辅助信息提供深层入口。
表头的优化
（1）精简表头信息
表头标签应该简炼准确，以达到节省表头空间和减轻视觉压力的作用，让用户注意力聚焦在数据本身。如果精简后的生僻字段难以自我解释，可以跟一个释义标识，鼠标悬停时出现该字段的详细解释，同时满足新手用户、普通用户以及专家用户的需求。
（2）情况允许时，去掉表头
如果表格数据可以自我解释，表头就不是必须的。
（3）采用多级表头整合信息
数据结构比较复杂的时候，可使用多级表头来体现数据的层次关系。
（4）功能复合型表头
除了容纳行标签之外，表头也可以包含排序、搜索、筛选等功能。
行的优化
（1）合适的行高
行高是非常重要的参数，直接影响着阅读体验。较小的行高能承载更多信息，让用户无需滚动鼠标即可看到更多数据，但会降低扫描效果，导致视觉解析错误。适宜的行高使得页面更透气，但并不是越大越好。设置行高的原则是：A.单行显示时，数据显示紧凑、有序。B.多行显示时，弱化表格形式，提供丰富的视觉展现。因此，对于单行显示的表格，建议行高为字体高度的2.5倍到3倍；对于多行显示的表格，建议内容区到上下边框的距离略小于文字高度。当然，也可以提供切换按钮让用户自己控制显示密度。
（2）横向斑马线
斑马线又称作间行换色、隔行变色、行交替样式。它能让行间界限更为明显，同时加强视觉流的横向引导，避免在阅读过宽表格时出现错行、迷失的情况，要注意两种颜色不能反差过大。另外，可以根据实际情况选择是否与1像素边框同时使用。
（3）行的强调
有时为强调行内信息的连续性（此时不强调行间数据的对比），可去掉单元格的纵向分割线，仅使用横向分割线和底色分割，使横向信息更加连续通畅，以提升阅读效率。此时，可以对行内信息进行扩充（例子：淘宝商品页），进一步弱化表格形式，丰富各类信息的视觉呈现，同时兼顾行与行之间的关键信息的对比。
列的优化
（1）合适的列宽
列宽的处理有三种方式。第一，可以按字段类型和内容给出固定宽度，如姓名100px，手机号150px，地址200px；第二，可以固定部分列的宽度，其余列则按百分比处理；第三，在固定宽度的基础上，允许用户自由拖动调整列宽的大小。
（2）纵向斑马线
即间列换色，是垂直版的隔行变色，用于强化列与列之间的差异，用处有限。
（3）列的强调
一般列的强调是配合表格列排序功能使用的，如点击率、访问量的排序。有时会使用不同粗细的纵向分割线对信息进行区隔，增加同类信息对比性。
分割线的处理
正确使用分割线可以实现对表格行与列的强调。首先，做纯粹客观的数据展示时会使用同样颜色和透明度的横纵分割线或斑马线，此时不强调单个数据或者数据之间的关系，避免带来错误的引导。其次，展示独立数据时需要弱化纵向分割线，会采用斑马线和悬浮高亮底色的方式以体现一条数据的完整性。
