HTML DOM改变表格的cellpadding和cellspacing

HTML DOM 改变表格的 cellpadding 和 cellspacing

介绍

HTML DOM 提供了方法来动态修改表格的 cellpadding（单元格内边距）和 cellspacing（单元格间距）属性。

标签

主要涉及 <table> 标签及其 cellpadding 和 cellspacing 属性。

用法

可以通过 JavaScript 访问表格元素并修改其属性：

document.getElementById("tableId").cellPadding = "新值";
document.getElementById("tableId").cellSpacing = "新值";

实例

<table id="myTable" border="1">
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
  </tr>
</table>

<button onclick="changePadding()">修改cellpadding</button>
<button onclick="changeSpacing()">修改cellspacing</button>

<script>
function changePadding() {
  document.getElementById("myTable").cellPadding = "10";
}

function changeSpacing() {
  document.getElementById("myTable").cellSpacing = "5";
}
</script>

功能

• cellPadding：控制单元格内容与边框之间的空间

• cellSpacing：控制单元格之间的空间

CSS 扩展

现代网页设计推荐使用 CSS 替代这些属性：

/* 替代 cellpadding */
table {
  border-collapse: collapse;
}
td, th {
  padding: 10px; /* 替代 cellpadding */
}

/* 替代 cellspacing */
table {
  border-spacing: 5px; /* 替代 cellspacing */
}

注意：当使用 border-collapse: collapse 时，border-spacing 将无效。