HTML TABLE 表格內的文字行高

HTML Table 表格可以用來填寫許多的文字內容,在網頁設計排版與內容編排上算是非常傳統的規劃方式,不過 HTML 表格內的文字行高在沒有美化的情況下,經常造成視覺上的不舒適,為了能提供較好的閱讀舒適度,網頁設計師可以透過 CSSline-height 屬性來調整 HTML Table 表格內的文字行高,技巧非常簡單,我們這篇就來教各位如何使用 line-height 屬性以及套用到表格內調整文字行高的應用範例。

CSS line-height 屬性基本語法
line-height: 行高設定値;
其中的行高設定值可以使用預設的 normal、數字加單位、百分比或 inherit(繼承自父層的行高値)等,詳細的設定方式請參閱我們《CSS line-height》篇的介紹,接著我們就嘗試來套用至 HTML Table 表格 中看效果囉!

用 CSS line-height 設計 HTML TABLE 表格內的文字行高範例
<table style="line-height:25px;" border=1>
<tr><td>這是欄位內容的第一行<br>這是欄位內容的第二行</td><td>這是欄位內容的第一行<br>這是欄位內容的第二行</td></tr>
<tr><td>這是欄位內容的第一行<br>這是欄位內容的第二行</td><td>這是欄位內容的第一行<br>這是欄位內容的第二行</td></tr>
</table><br>
<table style="line-height:40px;" border=1>
<tr><td>這是欄位內容的第一行<br>這是欄位內容的第二行</td><td>這是欄位內容的第一行<br>這是欄位內容的第二行</td></tr>
<tr><td>這是欄位內容的第一行<br>這是欄位內容的第二行</td><td>這是欄位內容的第一行<br>這是欄位內容的第二行</td></tr>
</table>
範例的效果
這是欄位內容的第一行
這是欄位內容的第二行
這是欄位內容的第一行
這是欄位內容的第二行
這是欄位內容的第一行
這是欄位內容的第二行
這是欄位內容的第一行
這是欄位內容的第二行
這是欄位內容的第一行
這是欄位內容的第二行
這是欄位內容的第一行
這是欄位內容的第二行
這是欄位內容的第一行
這是欄位內容的第二行
這是欄位內容的第一行
這是欄位內容的第二行
我們在範例中準備了兩個類似的 HTML Table 表格,差別僅在於第一個表格的行高設定為 25px,第二個表格的行高則設定為 40px,很明顯的看出兩個表格內容中的視覺效果差異,只要調整數字就能改變行高,這就是利用 CSSline-height 屬性來調整 HTML Table表格內的文字行高的技巧,是不是非常簡單呢?

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