[HTML] 快快樂樂學習table tag

因為喜歡css與html架構分離的簡潔,因此我幾乎沒有碰過table這個標籤。這次因為工作的關係,讓我跟table能有更深的接觸,以下是簡單的筆記。

以此表格為例:

Table caption
TitleTitle2
Content1content2
基本表格型態:

<table><br></br> <tr><br></br> <td>title1</td><td>title2</td><br></br> </tr><br></br> <tr><br></br> <td>1</td><td>2</td><br></br> </tr><br></br></table><br></br>

但實際上可以變成:

<table><br></br> <thead><br></br> <tr><br></br> <th>title1</th><th>title2</th><br></br> </tr><br></br> </thead><br></br> <tbody><br></br> <tr><br></br> <td>1</td><td>2</td><br></br> </tr><br></br> </tbody> <br></br></table><br></br>

兩者差異,除了加上thead, tbody之外,標題也改用th標籤表示。
Code似乎和範例有些差異,少了標頭(caption)欄位寬度(width)
<table><br></br> <caption>Table Caption</caption><br></br> <colgroup><br></br> <col class="c1"><br></br> <col class="c2"><br></br> <colgroup><br></br> <thead><br></br> <tr><br></br> <th>title1</th><th>title2</th><br></br> </tr><br></br> </thead><br></br> <tbody><br></br> <tr><br></br> <td>1</td><td>2</td><br></br> </tr><br></br> </tbody> <br></br></table><br></br>

通常比較常見大家會使用跨欄位來處理顯示標頭(caption)。
<!-- .... --><br></br> <tr><br></br> <td colspan="2">Table Caption</td><br></br> </tr> <br></br><!-- .... --> <br></br>

但是使用caption標籤會比較接近html語意上的表達。
在欄位寬度的表現,可以利用col就訂定出每一個欄位寬度(注意!col 標籤不需要結尾) <table><br></br> <caption>Table Caption</caption><br></br> <colgroup><br></br> <col class="c1"><br></br> <col class="c2"><br></br> <colgroup><br></br> <thead><br></br> <tr><br></br> <th>title1</th><th>title2</th><br></br> </tr><br></br> </thead><br></br> <tbody><br></br> <tr><br></br> <td>1</td><td>2</td><br></br> </tr><br></br> </tbody><br></br></table><br></br>

在最後做個總結說明,thead,* tbody*的好處在於將表格內的資訊做適當地分群之外,其次在css, javascript tag select更加容易辨識,而一個table裡面,可以有很多個thead、tbody,只要是語意上恰當即可。

通常table 的寬度會因為某一欄位設定了不同的寬度,而造成整列寬度的差異,因此預先在col標籤中,做出適當寬度的調整,以方便欄位寬度變化時的檢查。

底下是實際的範例展示。

CaesarChi

Web developer, focus on website fullstack, special JavaScript, and love sharing developing experience and communicate with developers. http://about.me/clonn