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 屬性。

延伸閱讀