修改 HTML Table 表格的背景顏色

從早期的 HTML 設計開始，表格的背景顏色就可以修改，隨著 HTML 版本的持續演進以及 CSS 的普及，也延伸出了 CSS 的修改網頁表格背景顏色的方式，本篇就以兩種不同的方法做簡單的範例，設計師可以根據自己當時的需求而決定要用哪一種方式去修改表格背景顏色，原則上目前主流的瀏覽器都支援這樣的寫法，但未來可能會以 CSS 為主流，漸漸淘汰 HTML 傳統的寫法。

HTML 修改方式
<table border="1" bgcolor="#FF7878">
<tbody>
<tr><td bgcolor="#FFD78C">表格內容</td></tr>
</tbody>
</table>
範例輸出
表格內容
傳統的設計重點在於 <table> 標籤內使用 bgcolor 來設定表格所要呈現的背景顏色，也就是範例中紅色標示的語法，至於顏色的表示方式則可以使用各種顏色的英文名稱，或使用 Wibibi 提供的網頁版《色碼表》查詢所需要的顏色，除此之外，bgcolor 還可以套用在 <td> 的標籤內，用來設定欄位內的背景顏色，關於表格中的各種標籤用法，請參閱：HTML Table 表格設計。

CSS 修改方式
<table border='1' style="background-color:#FF7878;">
<tbody>
<tr><td style="background-color:#FFD78C;">表格內容</td></tr>
</tbody>
</table>
範例輸出
表格內容
透過 CSS 來修改表格背景顏色，就不是使用 bgcolor 的語法，而是採用 style 樣式標示的方式修改，瀏覽器看到 style 就知道是要根據 CSS 的標準來顯示呈現風格，而 style 內的 background-color 就是背景顏色，同樣可以使用色碼表查詢顏色。

延伸閱讀參考網頁
© Copyright webtech.tw Since 2010