經典背景音樂

2022年3月12日 星期六

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 表格背景顏色的設計方式應該有所認識,不過要從哪裡挑選不同的顏色呢?本站提供的《色碼表》有超過四百種以上的十六進位色碼,讓您輕鬆選擇不同的顏色,來設計表格的背景顏色。

沒有留言: