HTML Table 表格文字顏色

HTML Table 表格文字顏色可以透過 HTML 本身的 font 標籤的 color 屬性來修改,也可以用 csscolor 屬性來修改,不過用 font 標籤比較麻煩,因為當每個欄位的文字顏色都要與網頁預設文字顏色不同,例如網頁預設的文字顏色是黑色,表格內的文字顏色要用藍色,就必須把每個欄位的文字都用 font 標籤標註起來,個別標示出藍色文字的語法,而 css 的 color 屬性則可以直接使用在表格開頭的 table 標籤內,將文字顏色用 color 標註為藍色,這樣寫一次,表格內所有文字的預設顏色就會變成藍色。

另外一種情況,表格內的其中某幾個文字顏色要不一樣,這時候用 HTMLfont color 標註或用 css color 屬性來處理都是一樣的,不過通常還是會選擇用 css 處理,因為彈性較大,而且未來管理上也比較容易,又可以與網頁本身的其他 css style 整合管理。為了讓讀者看到 HTML font color 屬性與 css color 屬性在修改表格文字顏色上的語法差異,這裡準備了幾個範例提供參考。

範例一、用 HTML 預設 font 標籤的 color 修改表格文字顏色
<table border="1">
<tr>
 <td>原本的文字</td>
 <td><font color="blue">藍色的文字</font></td>
 <td><font color="green">綠色的文字</font></td>
</tr>
</table>
呈現結果
原本的文字藍色的文字綠色的文字
範例一用到的都是 HTML 傳統的基本語法,優點是非常簡單,各瀏覽器支援度非常高,缺點是需要每個欄位慢慢標註 font color,以範例表格中的三個欄位的文字顏色都不同,寫法是把藍色與綠色的文字標註起來,在 CSS 的設計世界裡也可以很容易的達到這樣的效果,透過 span 標註並加上 css style 的 color 屬性就可以做到,範例二將有清楚的說明,不過在看範例二之前,還是要先把基本的 HTML 基礎打好,這裡先提供兩篇關於 HTML 表格與文字顏色的基本說明文件,不熟悉的朋友們建議先閱讀。
以上兩篇說明文件有詳細的 HTML 表格設計語法以及 font color 屬性用法,沒有問題的話,就可以續續進入範例二,看看如何透過 css 的 span 區域元素加上 color 屬性,對表格欄位的文字顏色進行各別修改。

範例二、用 css color 修改表格中不同欄位的文字顏色
<table border="1">
<tr>
 <td>原本的文字</td>
 <td><span style="color:blue;">藍色的文字</span></td>
 <td><span style="color:green;">綠色的文字</span></td>
</tr>
</table>
呈現結果
原本的文字藍色的文字綠色的文字
範例二的呈現結果與範例一是相同的,差別在於使用了 span 區域元素,把表格欄位內的文字標起來,接著在 span 標籤內使用 color 屬性,就能成功的做出每個欄位文字不同顏色的效果。其實也不一定要一次修改整個欄位的文字顏色,單純標註其中幾個字也是可以的,根據網頁的需求設計即可,這裡有兩則說明是關於 span 與 color 屬性的使用技巧,歡迎參考。範例一與範例二都是各別欄位的文字顏色修改技巧,不過如果整張表格的文字顏色都要一樣,而且要與網頁預設的文字顏色不一樣,例如網頁預設的文字是黑色,我們希望表格內所有欄位的文字顏色都是橘色,就可以使用 css 一次管理,繼續看範例三怎麼寫?

範例三、用 css color 屬性修改整張表格的文字顏色
<table border="1" style="color:orange;">
<tr>
 <td>表格的文字</td>
 <td>表格的文字</td>
 <td>表格的文字</td>
</tr>
</table>
呈現結果
表格的文字表格的文字表格的文字
從呈現結果可以看到所有的表格文字顏色都是橘色(orange),而且程式碼的部分非常簡潔,不需要像 HTML 的 font 標籤那樣標註每個欄位文字,只要在開頭的 table 標籤內使用『style="color:orange;"』這麼簡單的語法就可以做到,這就是 css 語法的優勢所在。

延伸閱讀
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012 Englsih version
PHP Smarty MySQL JQuery Apache W3C