1. Создание таблицы в файле HTML.

Мы можем создать таблицу в файле HTML из статических элементов, которые не будут изменены. Таблицу можно изменить, добавив данные вручную в HTML-код. Этот метод может помочь создать простые электронные таблицы, не требующие каких-либо изменений, например, график кормления животных в зоопарке.
Вам нужен только один файл HTML, чтобы создать таблицу в HTML. В шапке таблицы указаны животные, в левой колонке указаны периоды кормления, она заполнена фамилиями зоозащитников.

Тег ‹table› определяет таблицу
Тег ‹th› определяет ячейку заголовка в HTML-таблице.
Тег ‹td› определяет ячейку таблицы, содержащую данные
Тег ‹ Тег tr› определяет строку ячеек в таблице.

Сделать это:

Наш HTML выглядит так:

Стилизация этой таблицы выполняется в том же HTML:
Вам нужно добавить ‹style›‹/style› в начале HTML-кода над таблицей и в теге ‹table›‹/table›.

2. Создание таблицы в JavaScript.

  1. Создайте тег ‹table›‹/table› в HTML внутри ‹body›‹/body› и добавьте имя таблицы в ‹h1›‹/h1›

2. Создайте новый файл table-in-JS.js в той же папке, что и файл HTML.
3. Внутри table-in-JS.js нужно определить как переменную, равную массиву с информацией, в нашем случае «Топ-5 самых высоких гор мира».

4. Сгенерируйте заголовок таблицы с помощью метода createTHead().
Создайте функцию addTableHead с параметром tableMauntain и создайте внутри нее новый заголовок с помощью метода createTHead():

Метод createTHead() создает пустой элемент thead и добавляет его в таблицу.

Если элемент ‹thead› уже существует в таблице, метод createTHead() возвращает существующий и не создает новый.

5. Передаем таблицу из table-in-HTML.html в нашу функцию:

6. Добавьте строку в наше объявление с помощью метода insertRow(), который будет вызываться в заголовке нашей таблицы. Для этого добавим этот метод в нашу функцию addTableHead:

7. Создайте элементы th вручную и добавьте текстовый узел для каждого элемента th.

8. Генерация строк и ячеек циклом for…of. Для создания строк вы будете использовать insertRow().
Внутренний цикл for…in выполняет итерацию по каждому ключу текущего объекта и в то же время создает новую ячейку с помощью insertCell(), создает новый текстовый узел и добавляет текстовый узел в ячейку.

9. Запустите функцию createTable

10. Обновите браузер, чтобы увидеть результат

11. Добавьте стиль в файл HTML, как в предыдущем примере с созданием таблицы в HTML.

Таблица сформирована, но необходимо отметить, что имена в шапке таблицы взяты из названий ключей в нашем массиве, и если такой формат записи нас не устраивает, то вам либо придется изменить имена ключей в массиве или используйте другой метод.