用 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" 來宣告同樣的效果，的確，兩者個表現結果都是一樣的，不過 CSS 的 vertical-align 屬性已經是未來網頁設計的主流，請盡量以 vertical-align 取代 valign 的功能來設計。

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

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

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

更多 CSS 對齊技巧