HTML Table 表格背景顏色

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

範例一、用 HTML bgcolor 設計表格背景顏色

<table bgcolor="black" cellpadding="5" border="0">
<tr>
　<td bgcolor="red">紅色的表格欄位背景顏色</td>
　<td bgcolor="yellow">黃色的表格欄位背景顏色</td>
　<td bgcolor="blue">藍色的表格欄位背景顏色</td>
</tr>
</table>

呈現結果

紅色的表格欄位背景顏色

黃色的表格欄位背景顏色

藍色的表格欄位背景顏色

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

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

範例二、用 css background-color 設計表格背景顏色

<table style="background-color:black;" cellpadding="5" border="0">
<tr>
　<td style="background-color:red">紅色的表格欄位背景顏色</td>
　<td style="background-color:yellow">黃色的表格欄位背景顏色</td>
　<td style="background-color:blue">藍色的表格欄位背景顏色</td>
</tr>
</table>

呈現結果

紅色的表格欄位背景顏色

黃色的表格欄位背景顏色

藍色的表格欄位背景顏色

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

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

延伸閱讀