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,這可是傳統 HTMLfont 標籤沒辦法做到的高效率設計方式,接著我們在表格的三個欄位,分別使用預設文字樣式、修改大小為 13px(font-size:13px;)、字型改為標楷體(font-family:DFKai-sb;),可以清楚的看到,只要在表格中任何欄位或一段文字,用 span 標籤包起來,就可以特別為文字做不同的樣式設計,這兩篇 css 對文字修飾的介紹可以閱讀。這裡要提醒的是"標楷體"的字型屬於 Windows 預設的基本字型,若是非 windows 系列的作業系統,如 Apple 的 iOS、Google 的 Android 或 Linux 作業系統,可能會無法正常顯示,關於這個問題在上方的 css font-famliy 字型設計介紹篇中有比較安全的做法。

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