锁定老帖子 主题:十个最简单实用的Table设计模板
精华帖 (0) :: 良好帖 (5) :: 新手帖 (1) :: 隐藏帖 (0)
|
|
---|---|
作者 | 正文 |
发表时间:2009-12-31
最后修改:2010-01-09
表格恐怕是 Web 设计中最困难的一个对象了,感谢神秘的标记语言,有太多的细节我们需要关注了,而且表格缺乏浏览器的兼容性。虽然表格只是一个简单的元素,但是它浪费了我们大量的时间。有人甚至说, 标签是垃圾。其实表格本身并没有什么,是你自己使用的不当,把简单的事情弄的复杂了。这就是我写下本篇文章的原因,它将向你展示十个最简单表格设计方法。
准备想必大家都知道 xhtml 1.0 strict 标准,下面是一个符合 xhtml 1.0 strict 标准的例子。
<!-- Table markup--> <table id="..." border="0"> <!-- Table header --> <thead> <tr> <th id="..." scope="col">...</th> ... </tr> </thead> <!-- Table body --> <tbody> <tr> <td>...</td> ... </tr> ... </tbody> <!-- Table footer --> <tfoot> <tr> <td>...</td> </tr> </tfoot> </table>
在我们开始之前,温习一下所谓的使用表格的规则:
好,下面我们开始进入正题。 1. 水平简约型所谓水平表格,顾名思义,就是水平地去看表格而不是竖直地看,它每一行都代表一个实体。你可以给这种表格设置最简约的风格:简单地给单元格(
因为水平表格是被每行每行的阅读,所以清楚的行边界会起到事半功倍的效果。如果没有行边界,而且行数很多的情况下,表格阅读起来是很困难的。所以下面的表格中,我给每个
请注意 tr:hover
在IE6下不能使用, 如果表格有很多的列,看起来会很混乱2. 竖直简约型虽然使用很少,但竖直简约型表格经常用于分类或比较对象的描述,每一列代表的一个实体。我们可以在竖直简约型表格列之间加入空格来进行分隔。
最好加上大数值的 tr:hover
3. 方块型所有表格风格中最常用的,方块风格适用于各种类型的表格,挑选出一个好的颜色方案,分配给所有单元格的
这种风格,可能是目前最常用的方式。最难的问题实际上是找到与你的网站匹配的配色方案。如果你的网站上的图像比较深沉,使用这种方式将比较困难。 4. 水平间隔型水平间隔型表格具有很强的吸引力和使用性。当阅读表格时,交替的背景色会使人感到很舒服。在设计水平间隔型表格时,只要简单地给每奇数行 ... <tr class="odd"> <td>...</td> ... </tr> <tr> <td>...</td> ... </tr> ...
class="odd"
是件很乏味的事情,在大多数情况下,你必须手工完成它。5. 竖直间隔型竖直间隔比水平间隔更容易定义,因为我们可以使用
<table> <!-- Colgroup --> <colgroup> <col class="vzebra-odd"> <col class="vzebra-even"> <col class="vzebra-odd"> <col class="vzebra-even"> </colgroup> <!-- Table header --> <thead> <tr> <th scope="col" id="vzebra-comedy">Employee</th> ... </tr> </thead> ... </table>
虽然竖直间隔型可能更适合面向竖直表格,但是其他类型表格也可以采用这种风格。 colgroup
元素6. 重点列型在某些表格中,有些列比其他列更加重要,在这种情况下,可以使用
你可以使用一个重点列来标示重点,比如说一个会计表格中的金额总计,或者一个比较表格中获胜的实体。 tr:hover
在 IE 下无效,所以这种类型只适用于特定类型的表格7. 报纸型要达到所谓的报纸型的效果,需要给表格添加边框,而在边框内部展示内容。一个简约的报纸型表格如下所示:
变换单元格((
border-collapse
,不要丢失表格的外部边框8. 圆角型圆角给人的感觉是很光滑很有现代感,很容易就可以把圆角应用到一个表格上,但是你需要为这些圆角创建图像。理论上,在不需要额外的标记就可以给
9.背景图片型如果你想很快且有特色的定义表格的风格,那么就简单的挑选出一个有吸引力的图片作为表格的背景。你也可以使用50%的灰度来定义单元格的背景图片,来提高可读性。你可以使用下面的 CSS -hack 技术是它能够在IE6下正常工作。
* html table tbody td { /* IE CSS Filter Hack goes here*/ } 表格例子如下:
10. 单元格背景色型你可以给单元格添加背景图片,实现一致的风格。这样你至少要花费半个小时才能得到你想要的东西,打开 Photoshop,生成一个像素大小的渐变图片,把它们设置为单元格的背景图片,这样你就得到了一个渐变效果的表格。
同样,选择一个模式,并将其设置为背景图片,可以得到一个模式风格的表格:
注:有几种表格需要背景图片和CSS的支持,论坛显示不出来,请参考 我的博客 前几天我的博客的服务器当机了,现在换了服务商,已经可以访问了。
声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |
发表时间:2010-01-02
我最近就在为table和css在烦着, 前台功底太差。。
谢谢楼主的资料。 |
|
返回顶楼 | |
发表时间:2010-01-03
楼主的博客登不上
|
|
返回顶楼 | |
发表时间:2010-01-04
帖子看到的效果都一样,想去博客看看,可博客上不去啊。
|
|
返回顶楼 | |
发表时间:2010-01-04
可以参看一下
http://www.smashingmagazine.com/2008/08/13/top-10-css-table-designs/ |
|
返回顶楼 | |
发表时间:2010-01-05
sorry各位,我的博客的服务器有问题了,正在处理,可能需要几天。
|
|
返回顶楼 | |
发表时间:2010-01-06
最后修改:2010-01-06
capaccino 写道 可以参看一下
http://www.smashingmagazine.com/2008/08/13/top-10-css-table-designs/ 很不错 |
|
返回顶楼 | |
发表时间:2010-01-07
我的博客已经恢复正常了,大家可以在上面看到本文章的完整版本。
http://www.fogtowerblog.com/web/css/top-ten-table-design.html |
|
返回顶楼 | |
发表时间:2010-01-09
最后修改:2010-01-09
修改了文章,原来的表格都看不清楚效果,现在都抓图下来了,可以看清楚了,但是mouseover等效果还是没有的,完整的效果请参照我的博客。
|
|
返回顶楼 | |
发表时间:2010-04-26
capaccino 写道 可以参看一下
http://www.smashingmagazine.com/2008/08/13/top-10-css-table-designs/ |
|
返回顶楼 | |
浏览 43444 次