快速业务通道

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

作者 佚名技术 来源 CSS技术 浏览 发布时间 2012-02-02

一个好的表格应该以易于理解,简单明了的方式传递大量的信息。真正的重点应该 放在信息上, 对表格的过度设计会抵消这种作用。从另一方面来说,巧妙的设计不仅可以使一个表格更具吸引力, 而且可以增加可读性。

表格信息通常是很乏味的

从某种意义上来说,的确如此。一个好的表格应该以易于理解,简单明了的方式传递大量的信息。真正的重点应该 放在信息上, 对表格的过度设计会抵消这种作用。从另一方面来说,巧妙的设计不仅可以使一个表格更具吸引力, 而且可以增加可读性。

今天我们来看看提升表格功能和美观的几种方式。我们经常会在网上的价格页上看到表格的应用,因此主要以该种表 单为例。请记住这些原则可以应用到任意类型的信息列表上(不仅限于 <table>).

垂直,水平或矩阵?Vertical, Horizontal or Matrix?

一如以往,我们从最明显的地方开始。第一步是决定表格的整体结构。结构取决于呈现数据的类型和复杂性。选择 垂直的列还是水平行,通常取决于个人偏好。大致规划下表单的内容,然后决定采取哪种方法能更好地传递信息。很显然,如果信息包含多变量,那么选择矩阵来表示。下面分别以几个简单案例来开始。

垂直

水平

矩阵

从Excel中开始Start in Excel
希望这是我第一次也是最后一次建议用Microsoft Office来进行相关设计。事实上,表格确实很容易用Excel来完成,这正是Excel的强项。用HTML来组织结构需要写复杂代码,通常会比Excel耗时。

我偶然发现了一个小的web应用程序:Tableizer ,它可以把Excel里的表格粘贴进来转换成HTML。利用这种方式你仍然需要自己写一些样式,但是会节省前期的表格构建时间。

Tableizer

使用表格生成器Use a Table Generator

痛恨Excel吗?别急,我也是。如果你想节省自己生成简单结构的HTML表格时间,网上有成千上万的表格生成器可以选用。请注意我说的是“简单结构”。不要以为用了这些生成器你就什么都不需要做了。

这里有几款简单的免费表格生成器:

QuackIt
Table Generator
Kotatsu
Spectrum Research

一个小样式走了好长一段路A Little Styling Goes a Long Way

现在你已经有了一个简单的表格,下面需要加一些CSS.当然你可以花大量时间选用各种样式。只需要记住,即使一 点点的颜色和字体样式都可以大幅度提高表格的可读性和吸引力。

这里有一些如何正确给表格添加样式的指南。

CSS的技巧:利用基本的CSS样式表格

Veerle: 一个CSS样式表格

增加特征组Add a Featured Section

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

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号