参考资料

1. HTML DOM 返回文档中第一个表单的名字
2. HTML DOM 返回图像映射某个区域的坐标实例
3. HTML DOM 返回一个iframe中的longdesc属性的值
4. HTML DOM 返回表单中的enctype属性的值
5. HTML DOM 元素
6. HTML DOM 给image加上border
7. HTML DOM document.write() 方法
8. HTML DOM 改变链接的target属性实例

HTML DOM改变表格边框的宽度

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. 可以单独设置表格四边的不同边框宽度