HTML Table cellpadding 屬性

HTML table cellpadding 屬性可用來設計表格欄位內元素與邊框間的距離,屬於 HTML 表格的基本屬性,預設的 HTML 表格內的文字或圖片,會跟邊框黏在一起,我們可以透過 cellpadding 讓文字或圖片跟表格邊框之間產生一個距離,創造出較為美觀的表格與內容呈現效果。在 HTML Table 使用 cellpadding 的效果等同於在每個表格欄位(td)使用 css 的 padding 內距效果,待會兒用範例呈現兩者的語法差異。

HTML Table cellpadding 語法
cellpadding="距離值"
這個 cellpadding 語法很簡單,只要將距離值寫入即可,整段語法放在 HTML Table 的開頭標籤裡面,語法中的距離值單位預設為 px。

HTML Table cellpadding 使用範例一、直接用 cellpadding 設計
還沒使用 cellpadding 屬性的 Table
<table border="1">
<tr><td>這是測試欄位內容</td><td>這是測試欄位內容</td></tr>
</table>

已經使用了 cellpadding 屬性的 Table
<table cellpadding="8" border="1">
<tr><td>這是測試欄位內容</td><td>這是測試欄位內容</td></tr>
</table>
呈現效果
還沒使用 cellpadding 屬性的 Table
這是測試欄位內容這是測試欄位內容

已經使用了 cellpadding 屬性的 Table
這是測試欄位內容這是測試欄位內容
範例共提供了兩個不同的 HTML Table,第一個沒有使用 cellpadding,也就是表格預設的樣子,第二個則使用了 cellpadding 屬性,語法中紅色標註的這段「cellpadding="8"」,這樣可以讓表格內的每一個欄位預設為"內容與邊框間產生 8px 的距離"這種效果,看起來就會比較好看,這就是 cellpadding 的主要功用。假設我們只有單一個欄位要用這種效果怎麼辦?可以用 css 的 padding 來處理,請看範例二。

HTML Table cellpadding 使用範例二、改用 css padding 設計
<table border="1">
<tr><td style="padding:8px;">這是測試欄位內容</td><td style="padding:8px;">這是測試欄位內容</td></tr>
</table>
呈現效果
這是測試欄位內容這是測試欄位內容
在範例二的開頭 table 標籤內,我們已經取消了 cellpadding 的語法,改為在左邊的欄位(td)內使用 css 的 style 來宣告一個 padding 效果,也就是紅色標註的「style="padding:8px;"」這裡,在一個欄位的 td 內寫 padding 只會影響一個欄位,透過這種特性,就可以各別修改每個欄位不同的 padding 效果,這個 padding 就是 css 設計中,所謂的內距,可以用來修改表格欄位內元素與邊框的距離。

Table 的 cellpadding 常與 cellspacing 搞混,兩者是不同的效果,cellspacing 是用來設計表格元素彼此間的距離,例如每個欄位間的距離就可以用 cellspacing 來設計,請看這篇介紹:HTML Table cellspacing 屬性

延伸閱讀
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012
PHP Smarty MySQL JQuery Apache W3C