html/javascript-表格的创建和使用

html中表格的创建和使用

• • 一 摘要
  • 二 使用html table标签创建表格（在html文件中）
  • 三 使用javascript创建表格（在js文件中）
  • 四 表格属性的设置：
  • 4.1. 右边框的设置：
  • 4.2. 只给表格单元格加右边框
  • 4.3. 动态设置右边框的风格

一 摘要

html经常使用到表格table。在HTML中创建和使用表格，可以直接在html定义标签，也可以使用DOM（文档对象模型）来动态创建和操作表格元素。

二 使用html table标签创建表格（在html文件中）

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
    <td>Data 3</td>
  </tr>
  <tr>
    <td>Data 4</td>
    <td>Data 5</td>
    <td>Data 6</td>
  </tr>
</table>

三 使用javascript创建表格（在js文件中）

下面是一个示例，展示了如何使用JavaScript创建一个简单的表格并向其添加数据：

function createTable() {
   
  // 创建一个table元素
  var table = document.createElement("table");

  // 创建表头行
  var headerRow = document.createElement("tr");

  // 创建表头单元格
  var headerCell1 = document.createElement("th");
  headerCell1.innerHTML = "Header 1";
  headerRow.appendChild(headerCell1);

  var headerCell2 = document.createElement("th");
  headerCell2.innerHTML = "Header 2";
  headerRow.appendChild(headerCell2);

  var headerCell3 = document.createElement("th");
  headerCell3.innerHTML = "Header 3";
  headerRow.appendChild(headerCell3);

  // 将表头行添加到表格中
  table.appendChild(hea