探讨网页制作中的数据表格设计

组织数据和信息是一个不可疏忽的能力。组织内容和文字的方式(一般以copy的形式)会在用户怎样接收内容上有直接的影响。网页设计需要找到一个方法组织内容以使其便于读者扫描和接收。其中一个简洁的方法就是运用数据表格。表格提供结构化的方式来展示大量的信息。

从web发展开始时起，表格就已被使用。表格的结构至今没变，也不会变，这才让它不至于不是表格。结构虽然没变动，不过样式风格却已经有了长远的发展;现在的表格仍然与早期的表格一样有可读性。

数据表格的一般运用

表格轻易就能用简洁和易读的方式来组织数据。它们可用于保存和展示大量的数据，小量的信息，静态数据以及即使在不断地变动的数据。

与图表布局相似的表格用于做对比时非常有用。很多网站在对比不同产品，服务，和我们将提到的价格上使用这类表格。

下面的表格是苹果公司在网站对比所有的麦金塔笔记本(MacBook)。这个图表带有大量的信息，但仍然是便于扫描阅读的。这是一个非常简单的表格，但在恰当的空间和边框的影响下，观之悦目。另外，这些手提电脑的图片和重要信息的加粗，让这表格可读性很非常高。

数据表格一般用做对比预算标价对比。它们提供空间来展示预算的名字，价格以及每种预算的特点。一般来说，预算计划显示成列，而价格显示成行。这样每个单元格都标记着每个预算计划带有那些具体的特征。

最后，表格还常常用在电视网络网站展示节目表。这类表格与一般的表格有不同的地方：单元格根据参差不齐的各个节目时间长度来决定自身的尺寸。除此之外，节目表与别的表格结构无异。

一个高效的数据表格的组成部分

虽然每个用户都知道怎样理解一个表格，但你仍然可以做一些事情来让你的作品在可用性上达到新的高度。

Titles + Labels + Data = Data Table

很明显，一个数据表格由列的标题(Titles)和行的标签文字(Labels)，以及在数据单元格(cells)中的数据(Date)组成的。不需多也不能少。

为表格加颜色时，你应当让那些单元格与列和行的标题形成对比。让列和行的标题的背景色和数据单元格的背景色不同。这样表格就更易读和减少错误。

下面由Goplan制作的表格在列和行的标题上使用了较暗的颜色。因为辨色的对比，读这个表格就比较容易了。

坚持使用简单的方格

所有的表格都是方格的，当然这样的效果很好，所以我们不需要改动它。方格之所以说是高效的是因为你的一个小的区域填写大量的信息，而浏览者还能轻易地理解里面的内容。

使用图标

图标是在页面中减少烦人的文字的优秀的方法。图标也可以帮助组织数据表格。

下面的表格非常高效地使用了图标，看起来很简洁。勾和X分别代表“是“和“不是“。

不要留空白单元格

表格有时会有一些单元格是没有数据的。要避免简单地让这些地方空白，相反，可以在里面填一个标记，比如说X号，图标或者像下面的表格那样，破折号。

这个简洁的表格使用了三个破折号来表示里面的数据是空白的。这样比简单地留空白看起来效果更好。

高亮强调重要的行和列

很多数据表格高亮一些提供非常重要或者有用的信息的行和列。在价格图表中，你会经常看到最佳的预算计划是被高亮着。看一下下面的表格，最重要的行–正在看的该天的日程安排表的那一列是用粗厚的边框和不同的背景色高亮着。