具体代码和注释如下

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      html {
        font-family: sans-serif;
        -ms-text-size-adjust: 100%;
        -webkit-text-size-adjust: 100%;
      }

      body {
        margin: 10px;
      }
      table {
        border-collapse: collapse;
        border-spacing: 0;
        margin: 0 auto;
      }

      td,
      th {
        padding: 0;
      }

      .pure-table {
        border-collapse: collapse;
        border-spacing: 0;
        empty-cells: show;
        border: 1px solid #cbcbcb;
      }

      .pure-table caption {
        color: #000;
        font: italic 85%/1 arial, sans-serif;
        padding: 1em 0;
        text-align: center;
      }

      .pure-table td,
      .pure-table th {
        border-left: 1px solid #cbcbcb;
        border-width: 0 0 0 1px;
        font-size: inherit;
        margin: 0;
        overflow: visible;
        padding: 0.5em 1em;
      }

      .pure-table thead {
        background-color: #e0e0e0;
        color: #000;
        text-align: left;
        vertical-align: bottom;
      }

      .pure-table td {
        background-color: transparent;
      }
      .pure-table-horizontal td,
      .pure-table-horizontal th {
        border-width: 0 0 1px 0;
        border-bottom: 1px solid #cbcbcb;
      }

      .pure-table-horizontal tbody > tr:last-child > td {
        border-bottom-width: 0;
      }
    </style>
  </head>
  <body>
    <table class="pure-table pure-table-horizontal">
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>身高</th>
        <th>体重</th>
        <th>爱好</th>
      </tr>
    </table>
  </body>
  <script>
    var arr = [
      {
        name: "范剑",
        age: 21,
        height: 175,
        weight: 66,
        hobby: "习惯性加班",
      },
      {
        name: "庞光",
        age: 19,
        height: 160,
        weight: 80,
        hobby: "凌晨夜跑",
      },
      {
        name: "郑再镐",
        age: 30,
        height: 150,
        weight: 90,
        hobby: "看美女",
      },
      {
        name: "朴仁猛",
        age: 44,
        height: 171,
        weight: 74,
        hobby: "大保健",
      },
      {
        name: "杜子腾",
        age: 35,
        height: 179,
        weight: 69,
        hobby: "吃大肠刺身",
      },
    ];
    // 先制作一个表格，生成孤儿节点table挂到body,tr挂到table,td挂到tr
    var table = document.querySelector("table");
    var tr;
    var td;
    // 取出数组里面的内容arr[i][j]
    for (var i in arr) {
      // 外层循环生成tr,挂到table上面
      tr = document.createElement("tr");
      for (var j in arr[i]) {
        // 内层循环生成td,挂到tr上面
        td = document.createElement("td");
        // arr[i][j]里面这个j出来的是不带单位的，所有用switch进行判断
        switch (j) {
          case "age":
            td.innerHTML = arr[i][j] + "岁";
            break;

          case "height":
            td.innerHTML = arr[i][j] + "cm";
            break;

          case "weight":
            td.innerHTML = arr[i][j] + "kg";
            break;

          default:
            td.innerHTML = arr[i][j];
            break;
        }

        tr.appendChild(td);
      }
      table.appendChild(tr);
    }
  </script>
</html>
把数组里面的内容渲染到页面上面变成表格

具体代码和注释如下
