HTML Table cellpadding 的 CSS 替代語法

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

CSS padding 屬性語法
padding: 網頁元素或表格欄位的內距;
CSS padding 的參數有很多種表示方式,例如上方的內距、右邊的內距、下方的內距、左邊的內距等寫法,因為 padding 是非常普遍的 CSS 基本語法,若有興趣研究,請閱讀這一篇。
接著我們用兩個範例分別表示傳統 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 屬性可以一次設計整個表格的欄位內距,不過沒辦法單獨設計單一欄位的內距,關於此屬性的詳細用法請參閱以下篇幅。
範例二將進入用 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 替代語法

更多表格設計技巧
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012