https://eloquentjavascript.net/14_dom.html#i_g/5UC3zznV

Eloquent JavaScript 1401 Build a table.html

<h1>Mountains</h1>

<div id="mountains"></div>

<script>
  const MOUNTAINS = [
    {name: "Kilimanjaro", height: 5895, place: "Tanzania"},
    {name: "Everest", height: 8848, place: "Nepal"},
    {name: "Mount Fuji", height: 3776, place: "Japan"},
    {name: "Vaalserberg", height: 323, place: "Netherlands"},
    {name: "Denali", height: 6168, place: "United States"},
    {name: "Popocatepetl", height: 5465, place: "Mexico"},
    {name: "Mont Blanc", height: 4808, place: "Italy/France"}
  ];
  
  const createCell = (row, cellTag, cellText) => {
  	const cell = document.createElement(cellTag);
    if (typeof cellText === 'number') {
      cell.style.textAlign = 'right';
    }
    cell.appendChild(document.createTextNode(cellText));
    row.appendChild(cell);
  };

  const mountains = document.querySelector('#mountains');
  const table = document.createElement('table');
  
  const keys = Object.keys(MOUNTAINS[0]);
  const tableHeads = document.createElement('tr');
  keys.forEach(key => createCell(tableHeads, 'th', key));
  table.appendChild(tableHeads);
  
  MOUNTAINS.forEach((mountain) => {
    const tr = document.createElement('tr');
    Object.keys(mountain).forEach(key => createCell(tr, 'td', mountain[key]));
    table.appendChild(tr);
  });
  
  mountains.appendChild(table);
  
</script>