参考资料

1. HTML DOM 改变一个iframe的src
2. HTML DOM为表格创建一个标题
3. HTML DOM 给image加上border
4. HTML DOM改变表格的cellpadding和cellspacing
5. HTML DOM对单个单元格的内容水平对齐
6. HTML DOM 节点
7. HTML DOM 改变iframe的高度和宽度
8. HTML DOM 返回图像映射的某个区域的port 实例

HTML DOM 改变表格边框宽度

详细介绍

HTML DOM 允许通过 JavaScript 动态修改表格的边框宽度。表格边框可以通过 table 元素的 border 属性或 CSS 的 border-width 属性来控制。

相关标签和属性

• <table> 标签的 border 属性

• CSS 的 border-width 属性

• CSS 的 border 属性

用法

1. 使用 HTML border 属性

<table border="2">
  <!-- 表格内容 -->
</table>

2. 使用 CSS border-width

table {
  border-width: 2px;
}

3. 使用 DOM 动态修改

document.getElementById("myTable").style.borderWidth = "3px";

实例

HTML 示例

<table id="myTable" border="1">
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
  </tr>
</table>

<button onclick="changeBorder()">改变边框宽度</button>

JavaScript 示例

function changeBorder() {
  var table = document.getElementById("myTable");
  table.style.borderWidth = "5px";
  table.style.borderColor = "red";
  table.style.borderStyle = "dashed";
}

CSS 扩展功能

可以通过 CSS 为表格添加更丰富的边框样式：

table {
  border-collapse: collapse; /* 合并边框 */
  border: 2px solid #333; /* 统一设置边框 */
}

th, td {
  border: 1px solid #ccc; /* 单元格边框 */
  padding: 8px;
}

table.double-border {
  border-width: 3px;
  border-style: double;
}

注意事项

1. 使用 border-collapse: collapse 可以合并相邻边框

2. 现代网页设计推荐使用 CSS 而非 HTML 属性来控制样式

3. 可以单独设置表格四边的不同边框宽度

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