HTML Table cellpadding 的 CSS 替代語法

HTML Table cellpadding 的 CSS 替代語法可以在表格欄位標籤（<td>）內使用 CSS 的 padding 屬性，padding 是標準的 CSS 內距設計語法，幾乎所有的瀏覽器都支援 padding 屬性的效果，不過要注意的是，CSS 的 padding 若要達到與 HTML cellpadding 同樣的效果，必須使用在表格的 <td> 標籤內，而不是用在 <table> 標籤內，否則會變成整個表格與內部欄位間的距離，範例將有實際應用。

CSS padding 屬性語法

padding: 網頁元素或表格欄位的內距;

CSS padding 的參數有很多種表示方式，例如上方的內距、右邊的內距、下方的內距、左邊的內距等寫法，因為 padding 是非常普遍的 CSS 基本語法，若有興趣研究，請閱讀這一篇。

CSS padding 內距屬性與用法範例

接著我們用兩個範例分別表示傳統 HTML Table cellpadding 與 CSS padding 在使用上的差異。

範例一、傳統的 HTML Table cellpadding 效果

<table cellpadding="10" border="1">
<tr><td>使用 cellpadding 後的表格欄位</td><td>使用 cellpadding 後的表格欄位</td></tr>
<tr><td>使用 cellpadding 後的表格欄位</td><td>使用 cellpadding 後的表格欄位</td></tr>
</table>

呈現的效果

使用 cellpadding 後的表格欄位	使用 cellpadding 後的表格欄位
使用 cellpadding 後的表格欄位	使用 cellpadding 後的表格欄位

範例一呈現的是傳統 HTML cellpadding 的效果，用在表格開頭 <table> 標籤內，表示整個表格內的欄位（<td>）內距都是 10px，傳統的表格 cellpadding 屬性可以一次設計整個表格的欄位內距，不過沒辦法單獨設計單一欄位的內距，關於此屬性的詳細用法請參閱以下篇幅。

HTML Table cellpadding 屬性

範例二將進入用 CSS padding 替代 HTML Table cellpadding 效果，並可以單獨設計每一個表格欄位的內距。

範例二、用 CSS padding 屬性取代 HTML Table cellpadding 效果

<table border="1">
<tr><td style="padding:10px;">有使用 css padding 的欄位</td><td style="padding:10px;">有使用 css padding 的欄位</td></tr>
<tr><td>未使用 css padding 的欄位</td><td>未使用 css padding 的欄位</td></tr>
</table>

呈現的效果

有使用 css padding 的欄位	有使用 css padding 的欄位
未使用 css padding 的欄位	未使用 css padding 的欄位

為了讓有使用 padding 的效果與未使用 padding 的表格欄位顯示出差異，我們在第一行的兩個欄位都使用了 padding 屬性，padding:10px 的效果與範例一的「cellpadding="10"」相同，但不同的地方在於，每個 <td> 標籤都必須使用 CSS padding 屬性，否則會沒有效果。由此可知，當整個表格的欄位內距都要一樣時，其實用傳統的 HTML Table cellpadding 即可，有單獨欄位內距設計需求時，再用 CSS padding 屬性也許會比較方便，兩種做法都獲得所有主流瀏覽器的支援。

➤學會表格欄位內距離，那表格欄位間距離呢？看這篇：HTML Table cellspacing 的 CSS 替代語法。

更多表格設計技巧