HTML Table 表格設計 - WebTech 網頁設計教學站

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

範例一、多欄式Table表格 第一個TD欄位 第二個TD欄位 呈現結果第一個TD欄位第二個TD欄位第一個範例先來講解一下表格的各個標籤所代表的意思，首先是

以及最後一個標籤，標準的HTMLTable必須由這兩個標籤，將其他表格標籤包含在內，就像範例這樣的寫法，至於開頭這個部分多出來的border="1"代表的是這個表格的邊框粗細是1的單位。

HTMLTable有分為欄位與行（也許有些教科書不是這樣寫），這裡就以水平方向稱為欄位，垂直方向稱為行，水平方向的欄位是根據與標籤定義，每組標籤代表一個欄位，標籤間可以放入內容；垂直方向的行則是透過與標籤所定義，每一組標籤代表一個行，如範例中這樣只有一組就是只有一行的表格，但這一行裡面有兩組標籤，所以呈現出兩個欄位，有這樣的概念，我們就可以繼續看下一個範例。

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

範例三、混和多欄與多行的HTMLTable表格 第一行的第一個TD欄位 第一行的第二個TD欄位 第二行的第一個TD欄位 第二行的第二個TD欄位 呈現結果第一行的第一個TD欄位第一行的第二個TD欄位第二行的第一個TD欄位第二行的第二個TD欄位範例三結合了前面兩個範例，設計出共有兩行且每一行都有兩個欄位的Table，就像程式碼這樣，用了兩組標籤，每一組內含兩組欄位標籤，就可以有這樣的結果，相信看到這裡，對於HTMLTable表格設計應該有了很清楚的概念，可以透過這些標籤的組合，設計出各式各樣的表格，如果能夠清楚掌握表格的設計，接著就可以對表格進行美化囉！延伸閱讀修改HTMLTable表格的背景顏色修改HTMLTable表格的邊框顏色修改HTMLTable表格的邊框樣式修改HTMLTable表格內的文字大小與顏色 您可能會想看 HTMLspan標籤用法 如何修改HTMLDIV區塊內的文字字型 如何替HTMLDIV增加背景顏色 HTMLDIV標籤用法 設計具有超連結效果的HTMLolli自動排序項目清單 設計具有超連結效果的HTMLulli項目清單 HTMLolli列表(數字編號項目清單) HTMLulli列表(項目清單) HTMLtextarea表單多行文字輸入欄位背景圖片設計 HTMLtextarea表單多行文字輸入欄位背景顏色設計 即時熱門文章 如何替HTMLDIV區塊增加邊框效果 如何在HTMLDIV區塊內插入圖片 如何修改HTMLDIV區塊內的文字顏色 HTMLspan標籤用法 如何修改HTMLDIV區塊內的文字字型 如何替HTMLDIV增加背景顏色 HTMLDIV標籤用法 PHPstripslashes函數 PHPstrip_tags函數消除PHP或HTML標籤符號 PHPaddslashes函數替字符增加斜線 今日熱門文章 如何替HTMLDIV區塊增加邊框效果 如何在HTMLDIV區塊內插入圖片 如何修改HTMLDIV區塊內的文字顏色 HTMLspan標籤用法 如何修改HTMLDIV區塊內的文字字型 如何替HTMLDIV增加背景顏色 HTMLDIV標籤用法 PHPstripslashes函數 PHPstrip_tags函數消除PHP或HTML標籤符號 PHPaddslashes函數替字符增加斜線 ©Copyrightwebtech.twSince2010