网页设计技巧:网页表格设计技巧总结

jQuery Column Filters
Cut & Paste HTML Table filter script

去除冗余Don’t Overload the Table with Redundancies

应用开发者喜欢通过表格显示其有多种强大的功能。然而，有时候设计者会给表格增加许多没用的多余的信息，而 他们本可以以更好的方式来显示。

看一下Invoice Machine的例子，表格里除了最上面的三种功能，其他功能的四个条目项都一样。该表格因此增加了没有必要的15行。解决方法可以通过一个简单的公告列表说明“我们的计划都包括以下功能”，用户能够快速看到，他们无论选择哪个计划，都会具备这些功能。表格只需要缩短成3-4行，用来显示不同的部分。我再次重申，表格应该让信息更易读。如果您的表格不符合这一目标则会适得其反。

创建可扩展区域Create Expandable Areas

另外一个功能是给表格的特定行增加展开功能。可以把大量内容放置到一个相对整齐的空间。一个简单的jQuery小 插件jExpand可以实现这个功能。具体实现可以查看 tutorial from jankoatwarpspeed

如果你的表格使用了展开功能，那么表头一定要设计得能让用户清晰地找到这个功能。不要让用户重重筛选才能找到他们所需要的信息。

高亮突出关联性Highlight Relationships

这种技术增加了复杂表格或矩阵的可读性。无论用户鼠标悬停到单元的列还是行，都会高亮突出整个单元。请见详例.

点击如下“Ask The CSS Guy”里的例子可以看到如何实现这种效果。

如何创建类似Orbitz’s airline的航空时刻和价格矩阵表格

增加动态选择效果Add a Dynamic Selection Effect

这里是“Ask The CSS Guy”里的另一个例子，允许用户选择表格的给定列（价格表），当前选择会高亮突出显示，并且能展开显示更多信息。这种方式和上一个例子是一致的，但是有不同的效果。查看demo 具体实现请点击：

创建类似Crazy Egg’s价格列表动态高亮列效果的表格

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!