Строим таблицу

Мы строили таблицы из простого текста в главе 6. HTML упрощает построение таблиц. Таблица в HTML строится при помощи следующих тегов:

<table>

<tr>

<th>height</th>

<th>country</th>

</tr>

<tr>

<td>Kilimanjaro</td>

<td>Tanzania</td>

</tr>

</table>

Для каждой строки в теге <table> содержится тег <tr>. Внутри него мы можем размещать ячейки: либо ячейки заголовков <th>, либо обычные ячейки <td>.

Те же данные, что мы использовали в главе 6, снова доступны в переменной MOUNTAINS.

Напишите функцию buildTable, которая, принимая массив объектов с одинаковыми свойствами, строит структуру DOM, представляющую таблицу. У таблицы должна быть строка с заголовками, где имена свойств обёрнуты в элементы <th>, и должно быть по одной строчке на объект из массива, где его свойства обёрнуты в элементы <td>. Здесь пригодится функция Object.keys, возвращающая массив, содержащий имена свойств объекта.

Когда вы разберётесь с основами, выровняйте ячейки с числами по правому краю, изменив их свойство style.textAlign на "right".

<style>

/* Определяет стили для красивых таблиц */

table { border-collapse: collapse; }

td, th { border: 1px solid black; padding: 3px 8px; }

th { text-align: left; }

</style>

function buildTable(data) {

// Ваш код

}

document.body.appendChild(buildTable(MOUNTAINS));

</script>