十个最简略实用的Table设计模板

2012-10-06

十个最简单实用的Table设计模板表格恐怕是 Web 设计中最困难的一个对象了，感谢神秘的标记语言，有太多的细

十个最简单实用的Table设计模板

表格恐怕是 Web 设计中最困难的一个对象了，感谢神秘的标记语言，有太多的细节我们需要关注了，而且表格缺乏浏览器的兼容性。虽然表格只是一个简单的元素，但是它浪费了我们大量的时间。有人甚至说，

标签是垃圾。其实表格本身并没有什么，是你自己使用的不当，把简单的事情弄的复杂了。这就是我写下本篇文章的原因，它将向你展示十个最简单表格设计方法。

准备
想必大家都知道 xhtml 1.0 strict 标准，下面是一个符合 xhtml 1.0 strict 标准的例子。
?
<table id="..." border="0"> <thead> <tr> <th id="..." scope="col">...</th> ... </tr></thead><tbody> <tr> <td>...</td> ... </tr> ...</tbody> <tfoot> <tr> <td>...</td> </tr></tfoot></table>
?
?
?
在我们开始之前，温习一下所谓的使用表格的规则:
表格的宽度
根据内容，小心的设置表格的宽度，如果你不知道确切的宽度的话，设置成100%准没错。如果内容很多把表格撑的很大的时候，把表格的宽度设置的大一些肯定比小一些要好看的多。给 td 加点 padding
虽然在表格中 td 的排列很整齐，但是这并不是说，我们要把它们排列地很紧凑，给它们点间距，这样看起来就不那么难以阅读了。表格就是文字
阅读表格与阅读文字是很类似的，而且会花费更多的时间去理解表格。所以当表格中有金额的时候，注意它的对比度。使用柔和的颜色，使之看起来更舒服一些。总之，要使表格的风格更容易阅读，而不是相反。
好，下面我们开始进入正题。
1. 水平简约型
所谓水平表格，顾名思义，就是水平地去看表格而不是竖直地看，它每一行都代表一个实体。你可以给这种表格设置最简约的风格：简单地给单元格（`td` and `th` ）设置足够的 `padding` ，在表头下设置2个像素的边框。
?
?
因为水平表格是被每行每行的阅读，所以清楚的行边界会起到事半功倍的效果。如果没有行边界，而且行数很多的情况下，表格阅读起来是很困难的。所以下面的表格中，我给每个 `td` 下加了一个像素的下边界。
?
?
请注意 `tr:hover` 一个很有用的辅助人们阅读表格的方法。当鼠标停留在一个单元格上时，这个单元格所在的行就会被标亮。如果表格有很多列时候，这个方法会很容易的追踪到你关注的行。
?
?
最好加上大数值的 `border-left` 和 `border-right` ，使用相同的颜色作为背景色。如果你愿意可以使用透明边框，但是IE6会把表格弄的面目全非。因为竖直简约型表格中，数据被从上到下（竖直）阅读的，所以添加 `tr:hover` 毫无用处，反而会使表格更难以理解。当然可以使用基于 JavaScript 解决方案，当鼠标移动到某列时，使其高亮显示，但是这超出了本文讨论的范围。
?
?
?
?
?
这种风格，可能是目前最常用的方式。最难的问题实际上是找到与你的网站匹配的配色方案。如果你的网站上的图像比较深沉，使用这种方式将比较困难。
... <tr src="/img/2012/09/24/1331366647.jpg">
?
?
<table>  <colgroup> <col id="vzebra-comedy">Employee</th> ... </tr> </thead> ...</table>
?
?
?
?
?
虽然竖直间隔型可能更适合面向竖直表格，但是其他类型表格也可以采用这种风格。
?
?
你可以使用一个重点列来标示重点，比如说一个会计表格中的金额总计，或者一个比较表格中获胜的实体。
?
?
变换单元格（(`td` and `th` )）色彩，边框，边距，背景色和 `tr:hover` 效果后，其它风格的报纸型表格如下所示：
?
?
?
?
?
?
?
* html table tbody td{ /* IE CSS Filter Hack goes here*/ }
?
表格例子如下:
?
?
?
?
同样，选择一个模式，并将其设置为背景图片，可以得到一个模式风格的表格：
?
?
?
?
?
?

热点排行