Zi 字媒體

HTML Table 表格設計 HTML Table 就是表格的意思，他的用途非常多，早年網頁排板幾乎都是使用 Table 在做規劃，後來 CSS 出現後才漸漸被取代，但表格本身的特性依然相當實用，例如文章中偶爾也會需要用到表格來讓資料能夠更完整的表達，以下將 HTML Table 拆分為三種常見的基本寫法，有了這些技巧，就可以隨心所欲的設計自己所需要的表格欄位囉！所有的瀏覽器都支援 HTML Table 表格元素。 範例一、多欄式 Table 表格 第一個 TD 欄位第二個 TD 欄位 呈現結果 第一個 TD 欄位 第二個 TD 欄位 第一個範例先來講解一下表格的各個標籤所代表的意思，首先是 以及最後一個 標籤，標準的 HTML Table 必須由這兩個標籤，將其他表格標籤包含在內，就像範例這樣的寫法，至於開頭 這個部分多出來的 border="1" 代表的是這個表格的邊框粗細是 1 的單位。HTML Table 有分為欄位與行（也許有些教科書不是這樣寫），這裡就以水平方向稱為欄位，垂直方向稱為行，水平方向的欄位是根據 與 標籤定義，每組 標籤代表一個欄位，標籤間可以放入內容；垂直方向的行則是透過 與 標籤所定義，每一組 標籤代表一個行，如範例中這樣只有一組 就是只有一行的表格，但這一行裡面有兩組 標籤，所以呈現出兩個欄位，有這樣的概念，我們就可以繼續看下一個範例。 範例二、多行 Table 表格 第一行的 TD 欄位 第二行的 TD 欄位 呈現結果 第一行的 TD 欄位 第二行的 TD 欄位   承襲自範例一的介紹，我們在範例二中使用了兩組 標籤，讓最終呈現的結果出現兩行的表格，這裡要注意的是每一組 標籤內，至少都必須搭配一組 標籤才算完整。 範例三、混和多欄與多行的 HTML Table 表格 第一行的第一個 TD 欄位第一行的第二個 TD 欄位 第二行的第一個 TD 欄位第二行的第二個 TD 欄位 呈現結果 第一行的第一個 TD 欄位 第一行的第二個 TD 欄位 第二行的第一個 TD 欄位 第二行的第二個 TD 欄位   範例三結合了前面兩個範例，設計出共有兩行且每一行都有兩個欄位的 Table，就像程式碼這樣，用了兩組 標籤，每一組內含兩組 欄位標籤，就可以有這樣的結果，相信看到這裡，對於 HTML Table 表格設計應該有了很清楚的概念，可以透過這些標籤的組合，設計出各式各樣的表格，如果能夠清楚掌握表格的設計，接著就可以對表格進行美化囉！