Alan的異想世界

HTML Table 表格設計

HTML Table 就是表格的意思，他的用途非常多，早年網頁排板幾乎都是使用 Table 在做規劃，後來 CSS 出現後才漸漸被取代，但表格本身的特性依然相當實用，例如文章中偶爾也會需要用到表格來讓資料能夠更完整的表達，以下將 HTML Table 拆分為三種常見的基本寫法，有了這些技巧，就可以隨心所欲的設計自己所需要的表格欄位囉！所有的瀏覽器都支援 HTML Table 表格元素。

範例一、多欄式 Table 表格

<table border="1">
<tbody>
<tr><td>第一個 TD 欄位</td><td>第二個 TD 欄位</td></tr>
</tbody>
</table>

呈現結果

第一個範例先來講解一下表格的各個標籤所代表的意思，首先是 <table> 以及最後一個 </table> 標籤，標準的 HTML Table 必須由這兩個標籤，將其他表格標籤包含在內，就像範例這樣的寫法，至於開頭 <table border="1"> 這個部分多出來的 border="1" 代表的是這個表格的邊框粗細是 1 的單位。HTML Table 有分為欄位與行（也許有些教科書不是這樣寫），這裡就以水平方向稱為欄位，垂直方向稱為行，水平方向的欄位是根據 <td> 與 </td> 標籤定義，每組 <td></td> 標籤代表一個欄位，標籤間可以放入內容；垂直方向的行則是透過 <tr> 與 </tr> 標籤所定義，每一組 <tr></tr> 標籤代表一個行，如範例中這樣只有一組 <tr></tr> 就是只有一行的表格，但這一行裡面有兩組 <td></td> 標籤，所以呈現出兩個欄位，有這樣的概念，我們就可以繼續看下一個範例。

範例二、多行 Table 表格

<table border="1">
<tbody>
<tr><td>第一行的 TD 欄位</td></tr>
<tr><td>第二行的 TD 欄位</td></tr>
</tbody>
</table>

呈現結果

承襲自範例一的介紹，我們在範例二中使用了兩組 <tr></tr> 標籤，讓最終呈現的結果出現兩行的表格，這裡要注意的是每一組 <tr></tr> 標籤內，至少都必須搭配一組 <td></td> 標籤才算完整。

範例三、混和多欄與多行的 HTML Table 表格

<table border="1">
<tbody>
<tr><td>第一行的第一個 TD 欄位</td><td>第一行的第二個 TD 欄位</td></tr>
<tr><td>第二行的第一個 TD 欄位</td><td>第二行的第二個 TD 欄位</td></tr>
</tbody>
</table>

呈現結果

範例三結合了前面兩個範例，設計出共有兩行且每一行都有兩個欄位的 Table，就像程式碼這樣，用了兩組 <tr></tr> 標籤，每一組內含兩組 <td></td> 欄位標籤，就可以有這樣的結果，相信看到這裡，對於 HTML Table 表格設計應該有了很清楚的概念，可以透過這些標籤的組合，設計出各式各樣的表格，如果能夠清楚掌握表格的設計，接著就可以對表格進行美化囉！