最大限度的分離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代碼:

<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:1px solid #999; width:50em; margin:0 auto}
#itab caption{font-size:1em; font-weight:normal; color:#a40000}
#itab thead{background:#ffc}
#itab td,table#itab th{border:1px solid #ccc}
#itab td{padding-left:0.8em}
#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的每一個標簽如同我們身體的每一個器官,都有個它特定的功能,好好利用它們,相信能帶給你很多驚喜.