HTML Table 表格文字顏色

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

另外一種情況，表格內的其中某幾個文字顏色要不一樣，這時候用 HTML 的 font 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 語法的優勢所在。

延伸閱讀