HTML DOM改变表格的cellpadding和cellspacing
2025-04-24
19
参考资料
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
将无效。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。