参考资料

1. HTML DOM 对iframe排版
2. HTML DOM 返回文档中第一个图像的ID
3. HTML DOM对单个单元格的内容垂直对齐
4. HTML DOM 事件
5. HTML DOM 返回图像映射某个区域的替代文字实例
6. HTML DOM一个单元格的innerHTML
7. HTML DOM 方法
8. HTML DOM 修改 HTML 内容

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