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

用 CSS 設計 HTML 表格欄位內文字靠上對齊很簡單,可以使用 CSS 內建的vertical-align 屬性來控制,vertical-align 屬性的參數值 text-top 與 top 都可以用來設置容器內的元素向上對齊,但是使用上必須注意的是,CSS vertical-align 必須使用在單一個表格欄位(td)內才有效果,CSS vertical-align top 的效果等同於傳統 HTML Table 的 valign top 效果,都可以讓表格文字垂直向上對齊。

關於 vertical-align 屬性的詳細語法,請參閱《CSS vertical-align 屬性》篇的介紹。

用 CSS 設計 HTML 表格欄位文字靠上對齊範例
<table border="1" style="width:500px;height:100px;" valign="top">
<tr>
    <td style="vertical-align:text-top;">本欄文字靠上對齊</td>
    <td valign="top">本欄文字靠上對齊</td>
    <td>本欄文字未設定對齊</td>
</tr>
</table>
範例的實際效果
本欄文字靠上對齊本欄文字靠上對齊本欄文字未設定對齊
範例中的表格總共有三個欄位(<td>)用來呈現文字的垂直對齊效果,第一個欄位(也就是最左邊的欄位)所使用的是 CSS vertical-align 屬性來讓欄位內文字垂直靠欄位上緣對齊,中間的欄位則是用到傳統 HTML 的 valign 來處理,效果是一樣的,不過新一代的網頁設計已經幾乎採用 CSSvertical-align 來處理垂直靠上對齊的效果,也獲得大多數主流瀏覽器的支援,建議以 CSS 為設計主軸。第三個欄位並未設定任何的垂直對齊效果,所以文字是置中的,這也是大多數瀏覽器的預設值。

為了可以清楚呈現 valign 在開頭 <table> 內設置無效,我們在範例中也實際操作一次,第三個欄位並未產生垂直靠上對齊的效果,換言之,valign 也與 CSSvertical-align 屬性一樣,必須直接寫在表格欄位的 <td> 標籤內才會有效果。

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

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

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