HTML TABLE 表格內的文字行高

HTML Table 表格可以用來填寫許多的文字內容，在網頁設計排版與內容編排上算是非常傳統的規劃方式，不過 HTML 表格內的文字行高在沒有美化的情況下，經常造成視覺上的不舒適，為了能提供較好的閱讀舒適度，網頁設計師可以透過 CSS 的 line-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，很明顯的看出兩個表格內容中的視覺效果差異，只要調整數字就能改變行高，這就是利用 CSS 的 line-height 屬性來調整 HTML Table表格內的文字行高的技巧，是不是非常簡單呢？

延伸閱讀

這是欄位內容的第一行這是欄位內容的第二行	這是欄位內容的第一行這是欄位內容的第二行
這是欄位內容的第一行這是欄位內容的第二行	這是欄位內容的第一行這是欄位內容的第二行

這是欄位內容的第一行這是欄位內容的第二行	這是欄位內容的第一行這是欄位內容的第二行
這是欄位內容的第一行這是欄位內容的第二行	這是欄位內容的第一行這是欄位內容的第二行