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

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

数据表格的一般运用

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

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

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

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

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

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

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

Titles + Labels + Data = Data Table

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

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

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

坚持使用简单的方格

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

使用图标

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

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

不要留空白单元格

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

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

高亮强调重要的行和列

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

更大更复杂的数据表格

至今为止，我们关注的主要是比较小和简单的表格，但怎样处理大型的复杂的数据非常多的数据吗？有不少专为大型数据表格的可用性思考：

让行列可移动

数据表格在很多软件应用中占有很重要的地位，无论是基于web的还是本地安装的。一般来说，开发者会根据用户的需求来让那些行列可移动和可组织。另外，应用程序通常允许用户删减行列。

允许行列的重新排序

在有大量数据或者在数据经常变动的表格中，你应该给用户重新排序内容和单元格的权限和能力。最常见的可变情况是，可以重新排序日期，字母和重要性。

为大型表格提供搜索功能

如果数据是外延的和表格非常大，这里一个搜索框是必需的。这样可改善总体的可用性，并让查找数据更快捷。

提供不同的视图

如果你的表格的信息带有缩略图或者别的可视化内容，你能加上另一个可用性特征就是用不同的方式查看信息的能力，提供只看文本，文本和缩略图，只有缩略图几种查看的方式。

看一下下面基于flash数据表格。它提供了很多用于大型表格的好方法，比如说搜索，重新排序以及不同视图。

数据表格和样式

添加样式，或者缺少样式，都会影响到用户怎样查看一个表格和接收数据。这个很重要。不过数据表格也不宜过度加样式。简洁和易读应是总体目标。阴影和艺术边框对别的网页元素可能效果会很好，但表格最好别和他们沾边。这里有一些样式元素能很好地服务表格。

交替颜色

数据最重要的是可读。一种方法就是给行和列加上交替颜色。这样让它更易读和扫描。

下面是个铺砌得很好的表格。表格的行有交替颜色，简洁，流动，高效。它虽然数据大但仍保持很好的可读性。

边框

用边框分隔单元格非常重要。边框使数据更有可读性和减少错误。在有巨大的数据的情况下，单元格的数据会看起来混合到到一块，但你要把它们分开来。

足够的空白

就像边框，在数据之间的空白有助于确保可用性。在每个单元格中，在数据和边框之间留下足够的内距(padding)。留至少20px的空白。

简单的背景色

好数据表格都会关注可读性（这个我们总是不厌其烦地在说）。颜色和可读性总是紧密相连的。表格应该是简单的，而保持简单的一个方法就是使用简单的颜色。避免使用明亮的，不愉快的背景色。

数据表格佳作展示

这里推荐一些网站的表格佳作。

Quantcast

一个简单和基本的表格，它使用了漂亮的字体和颜色图案

JukeFly

一个具有很多可用性特点和用户友好样式的大表格（基于flash）

eWedding

样式漂亮，简洁，可读性强

Media Temple

使用图标的小型表格，它提供了很好的可视化效果来代替文字

iTunes
表格不仅在web上有，很多应用程序上也使用它。

Mosso
一个很好看的表格，令人悦目的颜色和图标

Zibler

使用Flex的表格，提供搜索，移动行列以及重新排序的功能

Cleartrip
一个复杂的信息量大的表格，不过仍易读。另外还可排序和移动行列

Realmac Software

购物车也是建立在方格系统之上。来自Realmac Software的例子

MT Support
颜色和对比用得好

CBS
CBS 的节目表

Long Term Clients
一个有精彩的样式的表格，布局简洁大方，有交替颜色

Media Temple
来自 Media Temple另一个精彩表格

Fox
Fox.com的节目表，高亮了当天的内容

Quommunication

很多论坛首页是一个表格，这是一个例子

Viget
一个结构安排和数据组织得很好表格

Joomla! Forum
又是一个论坛的页面

翻译自Matt Cronin在noupe上的文章

来源：http://focusec.cn/index.php/数据表格的设计/