HTML 網頁設計不可或缺的元素就是表格（Table），通常表格用來做版面的排版，而表格的用法包含了幾個重要的標籤，分別是 table、tr 與 td 這幾個重點，組合起來才是個完整的表格，以下做個簡單的表格範例。 呈現結果如下
　

這裡可以放表格內容

範例中使用了<table> 與 </table> 的標籤把內容包起來，<tr></tr> 標籤代表的是一行，而 <td></td> 標籤則代表一列，為了清楚呈現，我們還為 table 加上了 border="1" 的設定，這代表這個 table 的邊框粗細是 1，在實際使用上你也可以設定為其它的値，例如 border="0" 則不會顯示邊框。請注意 HTML 語法都必須用一個開始標籤與一個結束標籤把內容包起來，開始標籤與結束標籤是對等的，缺一不可。

除了可以寫一個單純的表格之外，我們還可以設定 table 的寬度、高度或邊框樣式，要做這些設定，你必須先了解幾個能夠控制表格的元素，例如 width、border、background ... 等。
　

• width：控制 table 的寬度
• border：控制 table 邊框的粗細
• background：控制背景圖片
• colspan：控制儲存格橫跨幾個欄位
• rowspan：控制儲存格垂直跨幾個欄位
  　

接著我們寫幾個範例

兩個欄位的 table 表格範例
　 呈現結果如下
　

這裡是第一個欄位

這裡是第二個欄位

兩行兩欄位的 Table 表格範例 呈現結果如下
　

這裡是第一行的第一個欄位	這裡是第一行的第二個欄位
這裡是第二行的第一個欄位	這裡是第二行的第二個欄位

接著我們把第一行變成一個欄位 呈現結果如下
　

這裡是第一行
這裡是第二行的第一個欄位	這裡是第二行的第二個欄位

最後做一個兩欄位的 Table，第一個欄位 rowspan="2"，第二個欄位有兩行 呈現結果

這是第一個欄位	這裡是第二個欄位第一行
	這裡是第二個欄位第二行

<td rowspan="要合併的行數">

<table border="1" cellpadding="5" style="border:2px #26FF26 solid;text-align:center;">
<tr><td rowspan="2">使用 rowspan 的欄位</td><td>表格欄位</td></tr>
<tr><td>表格欄位</td></tr>
</table>

使用 rowspan 的欄位	表格欄位
	表格欄位

<table border="1" cellpadding="5" style="border:2px #FFB326 solid;text-align:center;margin:15px 0px;">
<tr><td>表格欄位</td><td rowspan="2">使用 rowspan 的欄位</td><td>表格欄位</td></tr>
<tr><td>表格欄位</td><td>表格欄位</td></tr>
</table>

表格欄位	使用 rowspan 的欄位	表格欄位
表格欄位		表格欄位

<table border="1" cellpadding="5" style="border:2px #00DBDB solid;text-align:center;">
<tr><td>表格欄位</td><td rowspan="2">使用 rowspan 的欄位</td></tr>
<tr><td>表格欄位</td></tr>
</table>

表格欄位	使用 rowspan 的欄位
表格欄位

HTML 表格增加背景圖片的語法普遍分為兩種，第一種就是傳統的 HTML background 屬性，直接將背景圖片套用在表格上，第二種方式是用 CSS 的 background-image 屬性替表格增加背景圖片，兩者的差別在哪裡呢？傳統的 HTML background 使用簡便，但背景圖片較難跟表格大小配合，而 CSS 的 background-image 則可以讓圖片很輕易的與表格寬度、高度完美結合，以下分為這兩種設計方式的範例給各位參考，原則上是建議使用 CSS 的設計語法，畢竟 CSS 已經大規模的取代傳統 HTML 設計模式了。

範例一、用 HTML background 替表格增加背景圖片 範例呈現效果 範例一是個簡單的四欄位表格，我們使用了 HTML background 插入一個寬度為 200px 及高度為 133px 的背景圖片，如果單純的把背景圖片插入表格，其實效果不會這麼好，因為表格預設的欄位也沒有這麼大格，所以我們在後面加上了 CSS 的 style 來宣告表格的寬度與高度，讓整個表格的大小與背景圖片吻合，看起來會比較漂亮些，HTML background 屬性與 CSS 搭配在一起設計也是蠻容易的，若您對於網頁表格的設計規則或是傳統的 HTML 背景設計方式有興趣，請參閱這兩篇。
　

• HTML table 表格
• HTML 背景顏色 bgcolor 與背景圖片 background 設定

接著我們來進一步的看範例二如何純用 CSS 完成表格背景圖片的使用。

範例二、用 CSS background-image 替表格增加背景圖片 範例呈現效果 範例二與範例一最大的差異在於把 HTML backgroucd 取消，直接在 CSS 的 style 裡宣告 background-image 標準的背景圖片設計屬性，可以與後面的表格寬度（width:200px;）、高度（height:133px;）完美結合，CSS 對於網頁元素的尺寸設計比傳統的 HTML 更嚴謹。這裡有幾篇關於 CSS 的背景設計系列，建議仔細研究看看。
　

• CSS background-image 背景圖片
• CSS background-color 背景顏色
• CSS background-position 背景圖片位置

有了以上幾個 CSS 背景設計的技巧，不只是可以用在網頁表格上，其他許多的網頁元素如 DIV 區塊、span 區域甚至是整個網頁（body）的背景圖片都可以使用，應用範圍相當廣泛，這也是 CSS 設計的優點。
　

HTML Table 表格背景顏色可以用 HTML 傳統的 bgcolor 來設計，有興趣的讀者請參閱《HTML 背景顏色》內容的介紹，另外一種現在比較流行的表格背景顏色設計方式，是採用 CSS 的 background-color 屬性來設計，用法與傳統的 HTML bgcolor 其實很類似，而且可以與整體 css 語法有更好的整合度，新一代的網頁設計主流，為了讓各位能夠看到 HTML bgcolor 的用法以及 CSS background-color的設計方式，本篇內容將使用這兩種技巧分別做為範例，替 HTML 設計表格背景顏色，若您未來要使用 HTML5 做網頁設計，建議使用CSS 語法。

範例一、用 HTML bgcolor 設計表格背景顏色 呈現結果 範例一的表格開頭 table 標籤內使用了「bgcolor="black"」這樣的寫法，代表整個表格的背景顏色都是黑色，那為什麼三個欄位的背景顏色都不一樣呢？因為範例中的每個欄位（td）也都使用了 bgcolor 的背景顏色屬性，並分別設計了不同的顏色，所以最終的呈現效果就會看到像這樣有黑框線的表格，如果欄位沒有使用 bgcolor 的話，就會整個都是黑色的一塊，因為表格背景顏色是黑色的。

備註、表格設計基礎語法請參閱：HTML table 表格。

範例二、用 css background-color 設計表格背景顏色 呈現結果 範例二的表格呈現效果與範例一完全一樣，但語法已經改用 CSS 的 background-color 來設計，範例中的程式碼 style 開始的地方就是CSS 的語法宣告，其他的部分都與範例一相同，若想進一步研究 CSS 的背景顏色或背景圖片設計方式，請參閱這兩篇。
　

• CSS background-color 背景顏色
• CSS background-image 背景圖片

看完以上兩個範例，對於 HTML 表格背景顏色的設計方式應該有所認識，不過要從哪裡挑選不同的顏色呢？本站提供的《色碼表》有超過四百種以上的十六進位色碼，讓您輕鬆選擇不同的顏色，來設計表格的背景顏色。

HTML Table 表格邊框顏色與樣式可以用 css 的 border-width、border-color 與 border-style 三種屬性來設計，也可以直接使用 css border 邊框屬性一次直接寫完，語法更簡潔且容易維護，一般普通的情況，表格的四個邊框幾乎都是一樣的顏色，僅有少數的時候會需要替四個不同方向設計不同的邊框，無論是哪一種情況，css 都可以做得到，本篇介紹將提供幾個不同的範例，讓各位讀者看到不同的 HTML 表格邊框設計方式，這些範例幾乎所有主流的瀏覽器都支援。

HTML Table 表格邊框顏色與樣式設計範例一、四個邊框相同 呈現效果 範例一提供了兩種不同邊框顏色與樣式的表格，可以看到差異主要在 table 開頭標籤內的 border 設定，其他如 cellpadding 與 HTML 本身的 border 都只是要讓範例比較清楚而已。請注意、css 的 border 與 HTML 預設的 table border 不一樣，HTML 的 border 代表所有的框線而不是邊框，前兩個表格 border="1" 代表所有表格的框線都是 1，第三個表格的 border='0' 代表所有框線都是 0，所以各欄位間的框線也消失，若要進一步研究 HTML 表格設計的規則，請參閱這一篇：HTML table 表格。

在範例一中，我們都沒有使用到 border-color 或 border-style 獨立的寫法，若您對 css border 本身的框線設計技巧或各種效果的獨立寫法有興趣，這幾篇值得研究。

• CSS border 邊框
• CSS border-color 邊框顏色
• CSS border-style 邊框樣式

看完範例一的介紹，對於表格的四個邊框設計應該有所概念，範例二是不同邊框的設計方式，請繼續閱讀。

HTML Table 表格邊框顏色與樣式設計範例二、不同的邊框效果 呈現效果 範例二中使用了 css border 設計上邊框與下邊框的語法，其中 border-top 用來設計上邊框，而 border-bottom 則用來設計下邊框，css的四個邊框各有不同的表示方式，在需要獨立修改某個邊框的時候非常實用。

• border-top ← 用來設計上邊框。
• border-right ← 用來設計右邊框。
• border-bottom ← 用來設計下邊框。
• border-left ← 用來設計左邊框。

範例二只設計了上邊框以及下邊框的風格，所以左邊框與右邊框都是沒有顯示的，所以用 css border 屬性來設計表格邊框，有寫出來的才會顯示，沒寫出來的邊框預設為 none，即不顯示。分別替各個方向設計比較費時，但可以設計出獨具風格的邊框樣式。
　

HTML Table 表格的文字大小與字型在傳統的 HTML 網頁設計規則中，可以透過 HTML預設 font 文字標籤中的 size 與 face 分別設定文字大小與字型，這樣的寫法在 HTML5 以前是相當普遍的，而到了 HTML5 開始，修改表格文字大小與字型必須使用 css 來處理，因為HTML5 不支援傳統 HTML font 的 size 與 face 屬性，在 css 的規則裡，修改文字大小是用 font-size，而修改字型則是使用 font-famliy，以下範例分別使用 HTML 傳統的 font 標籤以及 css 的屬性來修改表格文字。

範例一、用 HTML font 文字標籤修改表格文字大小與字型 呈現結果 範例一中的表格共有兩個欄位，左邊的欄位先用 HTML 的 font size 屬性，將文字標示為 5 的大小，看起來就比網頁中的其他文字還要大一些，右邊的欄位用 font 的 face 屬性，將文字標示為標楷體，關於 font 的 size 與 face 屬性，可以參閱以下文章內容的詳細解說。

• HTML font 文字
• HTML 字型變化設定 face

誠如第一段所說，若要符合最新的 HTML5 網頁設計標準，表格內的文字大小與字型就必須使用 css 來設計，範例二就提供這樣的設計方式，除了可以像範例一這樣每個欄位不同的文字樣式，還可以一次設定整個表格的文字樣式，用起來效率非常好。

範例二、用 css 的 font-size 與 font-family 來修改表格文字大小與字型 呈現結果 範例二在 table 標籤開頭就先加入了『style="font-size:18px;font-family:serif;"』這樣的語法，代表將整張表格內的所有文字大小都預設為 18px，而且字型使用 serif，這可是傳統 HTML 的 font 標籤沒辦法做到的高效率設計方式，接著我們在表格的三個欄位，分別使用預設文字樣式、修改大小為 13px（font-size:13px;）、字型改為標楷體（font-family:DFKai-sb;），可以清楚的看到，只要在表格中任何欄位或一段文字，用 span 標籤包起來，就可以特別為文字做不同的樣式設計，這兩篇 css 對文字修飾的介紹可以閱讀。

• CSS font-size 文字大小
• CSS font-family 字型

這裡要提醒的是＂標楷體＂的字型屬於 Windows 預設的基本字型，若是非 windows 系列的作業系統，如 Apple 的 iOS、Google 的 Android 或 Linux 作業系統，可能會無法正常顯示，關於這個問題在上方的 css font-famliy 字型設計介紹篇中有比較安全的做法。
　

HTML table cellpadding 屬性可用來設計表格欄位內元素與邊框間的距離，屬於 HTML 表格的基本屬性，預設的 HTML 表格內的文字或圖片，會跟邊框黏在一起，我們可以透過 cellpadding 讓文字或圖片跟表格邊框之間產生一個距離，創造出較為美觀的表格與內容呈現效果。在 HTML Table 使用 cellpadding 的效果等同於在每個表格欄位（td）使用 css 的 padding 內距效果，待會兒用範例呈現兩者的語法差異。

HTML Table cellpadding 語法 這個 cellpadding 語法很簡單，只要將距離值寫入即可，整段語法放在 HTML Table 的開頭標籤裡面，語法中的距離值單位預設為 px。

HTML Table cellpadding 使用範例一、直接用 cellpadding 設計
　 呈現效果 範例共提供了兩個不同的 HTML Table，第一個沒有使用 cellpadding，也就是表格預設的樣子，第二個則使用了 cellpadding 屬性，語法中紅色標註的這段「cellpadding="8"」，這樣可以讓表格內的每一個欄位預設為＂內容與邊框間產生 8px 的距離＂這種效果，看起來就會比較好看，這就是 cellpadding 的主要功用。假設我們只有單一個欄位要用這種效果怎麼辦？可以用 css 的 padding 來處理，請看範例二。

HTML Table cellpadding 使用範例二、改用 css padding 設計
　 呈現效果 在範例二的開頭 table 標籤內，我們已經取消了 cellpadding 的語法，改為在左邊的欄位（td）內使用 css 的 style 來宣告一個 padding效果，也就是紅色標註的「style="padding:8px;"」這裡，在一個欄位的 td 內寫 padding 只會影響一個欄位，透過這種特性，就可以各別修改每個欄位不同的 padding 效果，這個 padding 就是 css 設計中，所謂的內距，可以用來修改表格欄位內元素與邊框的距離。

Table 的 cellpadding 常與 cellspacing 搞混，兩者是不同的效果，cellspacing 是用來設計表格元素彼此間的距離，例如每個欄位間的距離就可以用 cellspacing 來設計，請看這篇介紹：HTML Table cellspacing 屬性。