HTML Table 表格的文字大小與字型

HTML Table 表格的文字大小與字型在傳統的 HTML 網頁設計規則中，可以透過 HTML預設 font 文字標籤中的 size 與 face 分別設定文字大小與字型，這樣的寫法在 HTML5 以前是相當普遍的，而到了 HTML5 開始，修改表格文字大小與字型必須使用 css 來處理，因為 HTML5 不支援傳統 HTML font 的 size 與 face 屬性，在 css 的規則裡，修改文字大小是用 font-size，而修改字型則是使用 font-famliy，以下範例分別使用 HTML 傳統的 font 標籤以及 css 的屬性來修改表格文字。

範例一、用 HTML font 文字標籤修改表格文字大小與字型

<table border="1" cellpadding="5">
<tr>
　<td><font size="5">這是 size = 5 的文字大小</font></td>
　<td><font face="DFKai-sb">這是標楷體的文字字型</font></td>
</tr>
</table>

呈現結果

這是 size = 5 的文字大小

這是標楷體的文字字型

範例一中的表格共有兩個欄位，左邊的欄位先用 HTML 的 font size 屬性，將文字標示為 5 的大小，看起來就比網頁中的其他文字還要大一些，右邊的欄位用 font 的 face 屬性，將文字標示為標楷體，關於 font 的 size 與 face 屬性，可以參閱以下文章內容的詳細解說。

誠如第一段所說，若要符合最新的 HTML5 網頁設計標準，表格內的文字大小與字型就必須使用 css 來設計，範例二就提供這樣的設計方式，除了可以像範例一這樣每個欄位不同的文字樣式，還可以一次設定整個表格的文字樣式，用起來效率非常好。

範例二、用 css 的 font-size 與 font-family 來修改表格文字大小與字型

<table border="1" style="font-size:18px;font-family:serif;" cellpadding="5">
<tr>
　<td>這是表格預設文字樣式</td>
　<td><span style="font-size:13px;">這是 13px 的文字大小</span></td>
　<td><span style="font-family:DFKai-sb">這是標楷體字型</span></td>
</tr>
</table>

呈現結果

這是表格預設文字樣式

這是 13px 的文字大小

這是標楷體字型

範例二在 table 標籤開頭就先加入了『style="font-size:18px;font-family:serif;"』這樣的語法，代表將整張表格內的所有文字大小都預設為 18px，而且字型使用 serif，這可是傳統 HTML 的 font 標籤沒辦法做到的高效率設計方式，接著我們在表格的三個欄位，分別使用預設文字樣式、修改大小為 13px（font-size:13px;）、字型改為標楷體（font-family:DFKai-sb;），可以清楚的看到，只要在表格中任何欄位或一段文字，用 span 標籤包起來，就可以特別為文字做不同的樣式設計，這兩篇 css 對文字修飾的介紹可以閱讀。

這裡要提醒的是＂標楷體＂的字型屬於 Windows 預設的基本字型，若是非 windows 系列的作業系統，如 Apple 的 iOS、Google 的 Android 或 Linux 作業系統，可能會無法正常顯示，關於這個問題在上方的 css font-famliy 字型設計介紹篇中有比較安全的做法。

延伸閱讀