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>
呈現結果
第一個 TD 欄位第二個 TD 欄位
第一個範例先來講解一下表格的各個標籤所代表的意思,首先是 <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>
呈現結果
第一行的 TD 欄位
第二行的 TD 欄位
承襲自範例一的介紹,我們在範例二中使用了兩組 <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>
呈現結果
第一行的第一個 TD 欄位第一行的第二個 TD 欄位
第二行的第一個 TD 欄位第二行的第二個 TD 欄位
範例三結合了前面兩個範例,設計出共有兩行且每一行都有兩個欄位的 Table,就像程式碼這樣,用了兩組 <tr></tr> 標籤,每一組內含兩組 <td></td> 欄位標籤,就可以有這樣的結果,相信看到這裡,對於 HTML Table 表格設計應該有了很清楚的概念,可以透過這些標籤的組合,設計出各式各樣的表格,如果能夠清楚掌握表格的設計,接著就可以對表格進行美化囉!

延伸閱讀
© Copyright webtech.tw Since 2010