参考资料

1. HTML DOM 事件
2. HTML DOM删除下拉列表中的选项
3. HTML DOM 返回一个iframe中的frameborder属性的值
4. HTML DOM 返回的主机名：图像映射的某个区域的端口 实例
5. HTML DOM 返回当前的文件和链接的文档之间的关系
6. HTML DOM 返回一个button的type 实例
7. HTML DOM 返回一个区域的href属性的querystring部分 实例
8. HTML DOM shift键被按下了吗？

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 将无效。