用 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 來處理，效果是一樣的，不過新一代的網頁設計已經幾乎採用 CSS 的 vertical-align 來處理垂直靠上對齊的效果，也獲得大多數主流瀏覽器的支援，建議以 CSS 為設計主軸。第三個欄位並未設定任何的垂直對齊效果，所以文字是置中的，這也是大多數瀏覽器的預設值。

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

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

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

更多 CSS 對齊技巧