CSS cellspacing & cellpadding 表格對應屬性

<table cellspacing="1" cellpadding="1">

傳統的語法中 HTML Table cellspacing 屬性功能,當前網路標準不再推薦此功能、而且設置表格內容間距與內邊距 CSS 不存在 cellspacingcellpadding 屬性。


通過 JavaScript 修改表格物件的 cellPaddingcellSpacing 屬性,以 Pixel 像素為單位。

document.getElementById("myTable").cellSpacing = "10";
document.getElementById("myTable").cellPadding = "10";

border-collapse: separate;

在網頁設計中需要調整表格的間距和內距,達到美觀和易讀的效果。使用 CSS 中對應 HTMLcellspacingcellpadding 的屬性設置,cellspacing 是指表格單元格之間的間距,也就是表格的邊框寬度。cellpadding 是指表格單元格內部的間距,也就是表格內容與邊框之間的距離。使用 border-collapse 屬性,將表格的邊框合併為一條單線,然後使用 border-spacing 屬性來設置邊框之間的間距,達到比較容易閱讀的版面設計。

#div-name table {
  border-collapse: separate;
  border-spacing: 2px; /*cellspacing */
}
#div-name table td {
  padding: 10px; /*cellpadding*/
}


border-collapse: collapse; (cellspacing)

#div-name table {
  border-collapse: collapse;
  border-spacing: 0px; /*cellspacing */
}
cellpadding
#div-name table td {
  padding: 10px; /*cellpadding*/
}



border-collapse: separate; 設置單元格各別的邊線

相鄰邊被合併、表格內的 td 邊是合併在一起、是無法設置單元格各別的邊線。邊框獨立 separate 的情況下才能設置單元格各別的邊線。