用CSS3润色的table表格

时间:2013-07-27 作者:剧中人

用CSS3润色的table表格

体验效果

说点题外话,最近小剧一直在做node前后端的同步开发,从未有过node开发经验的我,独立处理博客项目事件很坑爹的事情,博客系统也在逐步完善中,祝福小剧吧!

关于table表格

自从web标准推广开之后,table布局的页面几乎很少再能看得见了。然而总会有些极端的同仁们会完全抛弃table,比如在处理表格的时候用蹩脚的div或ul来实现简单的表格。

显然这种方式是不可取的,因为table标签的本意即为:定义 HTML 表格。因此在处理表格的时候,table标签自然是我们不二的选择。table有它自身天然的优势,就是在对内容适应上的一致性,以及强烈的二维表格外观。

如何处理table样式

table标签在各浏览器下均有不同的显示样式,在视觉要求不高的后台页面里,默认样式能正常显示table的所有内容。

在需要统一表格样式的情况下,要保证一点,就是除了cellspacing之外,不在table、tr、td标签上保留任何行内样式,至于样式可以在css文件中书写。

CSS3下的table样式

其实小剧这里提到的效果,在css2标准的页面里也经常见得到,只不过实现方式都是靠JS渲染及DOM事件驱动来完成的。

小剧的这个案例可以应用在不需要考虑IE6/7/8,或者可以配合JS在相应浏览器中做全兼容处理的项目中。

至于今天展示的demo,用到的CSS3的地方主要是CSS的伪类上,有:隔行变色:nth-child(2n+1)、悬停响应:hover上。

样式处理很简单,效果也不是很炫,但可以用尽可能简洁的代码完成常用的表格样式。