如何在HTML表格中显示键值？

<table>
  <tr>
    <th>键</th>
    <th>值</th>
  </tr>
  <tr>
    <td>键1</td>
    <td>值1</td>
  </tr>
  <tr>
    <td>键2</td>
    <td>值2</td>
  </tr>
</table>

<style>
  .key-column {
    font-weight: bold;
  }
  
  .value-column {
    color: blue;
  }
</style>

<table>
  <tr>
    <th class="key-column">键</th>
    <th class="value-column">值</th>
  </tr>
  <tr>
    <td class="key-column">键1</td>
    <td class="value-column">值1</td>
  </tr>
  <tr>
    <td class="key-column">键2</td>
    <td class="value-column">值2</td>
  </tr>
</table>

<table id="key-value-table">
  <tr>
    <th>键</th>
    <th>值</th>
  </tr>
</table>

<script>
  var keyValuePairs = [
    { key: "键1", value: "值1" },
    { key: "键2", value: "值2" }
  ];
  
  var table = document.getElementById("key-value-table");
  
  keyValuePairs.forEach(function(pair) {
    var row = table.insertRow();
    var keyCell = row.insertCell();
    var valueCell = row.insertCell();
    
    keyCell.innerHTML = pair.key;
    valueCell.innerHTML = pair.value;
  });
</script>