参考资料

  1. HTML DOM一个行的innerHTML
  2. HTML DOM指定表格的frame
  3. HTML DOM 方法
  4. HTML DOM 元素
  5. HTML DOM 返回一个区域的href属性的锚部分实例
  6. HTML DOM 返回一个button的value 实例
  7. HTML DOM改变表格边框的宽度
  8. HTML DOM 返回一个iframe中的longdesc属性的值

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