HTML Table cellpadding 屬性 - HTML 網頁設計筆記

HTML Table cellpadding 屬性的功能是用來調整表格裡面欄位內的元素與表格邊框之間的距離，有點類似 css padding 屬性的感覺，不過 cellpadding 是應用於表格置中的 HTML 傳統屬性，有了表格 cellpadding 屬性的幫助，我們就能讓表格欄位內的文字或圖片跟表格之間產生一段距離，視覺感受比較好看，也不會黏在一起，來看看語法規則吧！

HTML Table cellpadding 屬性語法

cellpadding="距離值"

cellpadding 所能使用的參數僅有一個，就是用來設計元素與邊框間＂距離值＂，可以採用數字加單位的表示方式，例如 2px, 3px ... 以此類推，也可以用 em 或 cm 等距離單位，不過習慣上還是以 px 為普遍，另外，cellpadding 僅能夠使用於表格的開頭 table 標籤內，請看以下的實際操作範例與實際的效果。

HTML Table cellpadding 屬性範例、在表格開頭標籤內使用

範例程式碼：在新視窗開啟程式碼文字檔

範例的實際效果

cellpadding 設為 5px 的表格欄位

cellpadding 設為 20px 的表格欄位

我們總共準備了兩個不同的 HTML 表格，第一個表格採用 cellpadding="5px" 將文字與欄位邊框的距離加大為 5px，第二個表格則是將距離再加大至 20px，可以更明顯得看出文字與欄位之間被加大的距離，這就是 HTML TABLE 的 cellpadding 屬性的功能，同樣的概念也可以在表格欄位內是圖片、影片或其它元素時展現出效果。

更多網頁表格設計