用 CSS 設計 HTML 表格欄位內文字靠下對齊

用 CSS 設計 HTML 表格欄位內文字靠下對齊的技巧,與上一篇《HTML 表格欄位內文字靠上對齊》所使用的技巧是相同的,都是使用 CSS 內建的 vertical-align 屬性來控制,vertical-align 屬性的參數值 bottom 都可以用來設置表格欄位內的元素向下對齊,無論是讓表格欄位內的文字靠上對齊還是靠下對齊,都是整理網頁表格不可或缺的技巧,CSS vertical-align bottom 的效果等同於傳統 HTML Table 的 valign bottom 效果,都可以讓欄位內的文字垂直下向對齊,新一代的瀏覽器對 vertical-align bottom 的支援度已經相當普遍 。

用 CSS 設計 HTML 表格欄位文字靠下對齊範例
<table border="1" style="width:500px;height:100px;vertical-align:bottom;" valign="bottom">
<tr>
    <td style="vertical-align:bottom;">本欄文字靠下對齊</td>
    <td valign="bottom">本欄文字靠下對齊</td>
    <td>本欄文字未設定對齊</td>
</tr>
</table>
範例的實際效果
本欄文字靠下對齊本欄文字靠下對齊 本欄文字未設定對齊
範例總共有三個表格欄位,我們先在第一個表格欄位的開頭 <td> 標籤內使用「style="vertical-align:bottom;"」的 CSS 語法,來宣告表格欄位內的文字要垂直靠下對齊,第二個欄位則使用了傳統 HTML 的 valign="bottom" 來宣告同樣的效果,的確,兩者個表現結果都是一樣的,不過 CSSvertical-align 屬性已經是未來網頁設計的主流,請盡量以 vertical-align 取代 valign 的功能來設計。

再來第三個欄位要表現的是,表格欄位內的文字並未受到表格開頭 <table> 標籤內的 vertical-align 及 valign 所影響,這也表示這兩個屬性的功能都必須在將它們直接寫在表格欄位的 <td> 標籤內才會有效果,這點是許多網頁設計師常常忽略的地方。

網頁表格有很多設計的技巧,請參閱《HTML Table 表格》的主題說明。

延伸閱讀:用 CSS 設計 HTML 表格欄位內文字靠上對齊

更多 CSS 對齊技巧
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012 Englsih version
PHP Smarty MySQL JQuery Apache W3C