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

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

<table>

  <tr>

    <th>name</th>

    <th>height</th>

    <th>country</th>

  </tr>

  <tr>

    <td>Kilimanjaro</td>

    <td>5895</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>

<script>

  function buildTable(data) {

    // Ваш код

  }

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

</script>