VyacheslavBozere,
<!DOCTYPE html>
<html>
<head>
<title>Exercise one</title>
<style type="text/css">
td{
border:1px solid #555555;color:#FFF;padding:5px;text-align:left;background-color:#000;
}
table{border-collapse:collapse;border-spacing:0;box-shadow:0 2px 1px 5px rgba(242,242,242,0.1);width:700px;margin:0px auto}
tr:nth-child(2n + 1) td{
background-color: rgba(230, 230, 230, 1);color:#000;
}
th{
border:1px solid #555555;color:#000;padding:5px;text-align: center;background-color:#FFF; font-size: 1.6em;
}
</style>
</head>
<body>
<div id="mountains"></div>
<script type="text/javascript">
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"}
];
function mountain(mountains) {
let row = document.createElement("tr"); // row of the table
let header = document.createElement("th"); // zagolovok table
let column = document.createElement("td");// columns of table
divTable = document.getElementById("mountains");
for (let elem of mountains){
row = divTable.appendChild(row.cloneNode());
if(header){
for (let str in elem){
header = row.appendChild(header.cloneNode());
header.appendChild(document.createTextNode(str));
}
row = divTable.appendChild(row.cloneNode());
header = null;
}
for (let str in elem){
column = row.appendChild(column.cloneNode());
column.appendChild(document.createTextNode(elem[str]));
}
}
}
mountain(MOUNTAINS);
</script>
</body>
</html>