网页设计应:提高网页表格可读性设计技巧

表格的应用

由于工作原因，经常接触到表格。我们发现，表格不但广泛的运用在各类数据收集和分析，同时通过表格这样一种二维矩阵来整理和陈列信息时（即便最后的展示方式并非一个典型的表格样式），能够很好的表达信息之间的逻辑关系，易于帮助理解横纵信息之间的关系。

在实际的网页设计应用中，表格横纵相互独立又相互关联的模式尤其适用于：

1.组织和展示大量的信息

表格简单的结构不但能包含大量的信息，且同时保证信息的可读性,便于读者快速扫描信息、从大量的条目中找到所需的信息。

2.展示对比性信息

通过合理的布局，表格能清晰的展示出同类对比信息，便于读者分辨不同条目信息之间的关联和区别，从而关注到关键、问题条目。

总的来说，一个构造清晰的表格布局，将大大提升读者对信息的接收速度和理解程度

例如下图中苹果官网对不同型号mac book的信息陈列方式，就采用了表格的结构，清晰的展示了4款不同的macbook，及各自的性能、售价等属性，同时读者第一眼就可以扫描到并理解表格结构，横向是4款macbook的排列，纵向分别列出了各自的属性，然后进一步就可以根据自己的兴趣点就4款macbook的不同属性进行对比，信息完整且便于扫描。

如上所述，表格常用来展示大量的、对比性的信息，因此提高表格的可读性、便于用户快速扫描，是表格设计的关键。本文仅就笔者阅读过的几篇关于表格设计的文章结合工作中的一些拙见，整理成文，分享如下。

表格的要素

研究如何提高表格可读性之前，我们先简要阐述下表格的组成要素，这里我们暂且这么总结：表格 = 标题 + 表头 + 行标签 + 单元格数据（信息），如下图

表格标题是对表格整体的描述，应包含表格数据的来源及属性，使读者对表格内容有所认识，例如数据收集的日期、地区及其表格数据的其他属性。

行标签和列标签（表头） 是对本行/本列数据的描述，可以理解为是表格的骨架，是用户快速扫描并接收表格布局的关键要素。

单元格数据（单元格信息）这里就不在多说，是表格的主体内容。