Potatka,
как вариант ...
<!doctype html>
<meta charset="utf8">
<style>
/* Defines a cleaner look for tables */
table { border-collapse: collapse; }
td, th { border: 1px solid black; padding: 3px 8px; }
th { text-align: left; }
tbody td:nth-child(2) {
text-align: right;
}
</style>
<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 createTr = (arr, tag = 'td') => `<tr><${tag}>` + arr.join(`<${tag}>`);
function buildTable(data) {
let table = document.createElement('table');
let fields = Object.keys(data[0]);
let trs = data.map(obj => createTr(Object.values(obj))).join('');
let html = '<thead>' + createTr(fields, 'th') + '<tbody>' + trs;
table.innerHTML = html;
return table;
}
document.querySelector("#mountains").appendChild(buildTable(MOUNTAINS));
</script>