最大限度的分离table的样式与结构

用table布局,相信大家都知道这是前端很诟病的事.但从HTML标签角度来看table标签,它的功能强大也是毋庸置疑的, 不然, 它也不会曾主导网站布局模式数年(甚至于现在仍有N多整站用table布局的网站). 但CSS+XHTML的兴起,使很多人开始妖魔化table这一标签,甚至以页面中是否有table来评判页面质量,这是不对的. table也有它存在的作用,很多页面功能(比如数据表格类,表单对齐等)用table实现远比用div实现起来简单明了.当然,本文不是为table平反的, 我只是想告诉大家如何最大限度的分离table的样式与结构.
分离样式,当然离不开CSS,而对于table标签,还有更多私有HTML属性可以利用.比如,thead,tr,th,td,tbody,tfoot,colgroup,scope.而本文正是利用这些属性,把样式从table中分离出来.
请看下图:

这是一个有6种背景色的table,如果按常规的table定义,想必大家都知道这个表格写出来该有多麻烦,你得一个个单元格的去加样式,加属性.其实,上面的效果完全可以有着很明了简洁的结构,也可以不通过修改html页面来改变它的样式.
HTML代码:点此查看DEMO

< table id = " itab " >
< caption > 最大限度的分离table的样式与结构,Uh Oh! </ caption >
< colgroup >
< col class = " linenum " >
< col class = " id-1 " >
< col class = " id-2 " >
< col class = " id-3 " >
</ colgroup >
< thead >
< tr >< th > LINENUM </ th >< th > ID-1 </ th >< th > ID-2 </ th >< th > ID-3 </ th ></ tr >
</ thead >
< tbody >
< tr >< td > 1 </ td >< td > A </ td >< td > CY </ td >< td > I </ td ></ tr >
< tr >< td > 2 </ td >< td > Br </ td >< td > S </ td >< td > KMQ </ td ></ tr >
< tr >< td > 3 </ td >< td > HTC </ td >< td > LLI </ td >< td > P </ td ></ tr >
< tr >< td > 4 </ td >< td > ACC </ td >< td > G </ td >< td > QO </ td ></ tr >
< tr >< td > 5 </ td >< td > Z </ td >< td > AHD </ td >< td > M </ td ></ tr >
</ tbody >
< tfoot >
< tr >< th > LINE.NO </ th >< th > ID-1 </ th >< th > ID-2 </ th >< th > ID-3 </ th ></ tr >
</ tfoot >
</ table >

CSS代码:

table#itab { border-collapse: collapse   ; border: 1 px solid #999 ; width: 50 em ; margin: 0 auto }
#itab caption { font-size: 1 em ; font-weight: normal ; color: #a40000 }
#itab thead { background: #ffc }
#itab td , table#itab th { border: 1 px solid #ccc }
#itab td { padding-left: 0.8 em }
#itab tfoot { background: #fcc }
#itab .linenum { width: 15 % ; background: #0cf }
#itab .id-1 { width: 20 % ; background: #cf9 }
#itab .id-2 { width: 25 % ; background: #eee }
#itab .id-3 { width: 30 % ; background: #9ff }

如此一看,是不是明了很多.无非是把表格结构化,然后充分利用thead,th,tfoot等table私有属性定义不同的样式.这里不得不提一下colgroup标签,在本文DEMO中,它起到了很重要的作用.但个人认为,它也只能做一些定宽背景定义.它有一个很致命的弱点,不兼容. 比如用它来给列定义字体颜色,ie6下是正常,但其他浏览器好像都是不支持的(如果一定要用它来定义列的字体颜色和对齐方式,可以利用CSS高级选择器first-child为ie6外的浏览器定义样式,暂不详述).但不可否认colgroup是一个很实用的标签.
表格样式的分离,个人觉得完全用CSS分离也不是一个明智的选择,当有些效果CSS无法实现时,或者实现起来比较麻烦时,我们完全可以用JavaScript来实现你想呈现的效果.比如隔行换色,鼠标划过变色等效果(可扩展阅读奇或偶数行高亮显示及鼠标划过高亮显示类).
多思考,多发现,多实践.HTML的每一个标签如同我们身体的每一个器官,都有个它特定的功能,好好利用它们,相信能带给你很多惊喜.

 

原文发布于Mr.Think的博客: http://mrthink.net/csshtml-colgroup-col-style/  转载请注明出处