参考资料

1. HTML DOM 返回和设置链接的hreflang属性实例
2. HTML DOM将下拉列表变成多行列表
3. HTML DOM添加表格中的行
4. HTML DOM指定表格的frame
5. HTML DOM 返回一个区域的href属性的querystring部分 实例
6. HTML DOM 返回一个iframe中的frameborder属性的值
7. HTML DOM 访问
8. HTML DOM 返回文档中表单数目

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

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。