参考资料

1. HTML DOM一个单元格的innerHTML
2. HTML DOM 返回和设置链接的charset属性实例
3. HTML DOM document.write() 方法
4. HTML DOM 返回图像映射的某个区域的protocol 实例
5. HTML DOM 对image排版
6. HTML DOM 改变一个包含在iframe中的文档的背景颜色
7. HTML DOM 用指定的ID弹出一个元素的innerHTML实例
8. HTML DOM 返回一个表单acceptCharset属性的值

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