Как сделать таблицу html быстро и красиво

Иногда при размещении контента на сайт возникает потребность разместить в содержимом табличные данные.

Писать «вручную» html-код для таблицы — довольно хлопотное занятие, а использование «конвертации» из Excel или Word в html дает довольно избыточный код.

В статье приведены 2 способа как в WordPress сделать таблицу html и быстро, и просто.

1. Сервис Tables Generator

Для создания красивой html-таблицы можно использовать сервис Tables Generator

как сделать таблицу html в Tables Generator

Чтобы получить html-код таблицы для публикации в статье я использую следующий порядок действий.

1. Сперва подготавливаю исходную таблицу в MS Excel и экспортирую ее окончательный вариант в файл с расширением .csv.

2. Далее загружаю файл с расширением .csv в Tables Generator

Загружаем таблицу из Excel в Tables Generator

3. Потом, при необходимости, редактирую загруженную таблицу уже в самом Tables Generator. В сервисе есть достаточный набор инструментов плюс есть готовые шаблоны представления таблиц.

4. Заключительный момент — генерация html-кода таблицы. Нажав кнопку «Generate» ниже в окне получаю html-код таблицы, который можно скопировать и вставить в содержимое сайта.

Код может быть с встроенными стилями, без стилей, а также в компактном виде (одной строкой). Я использую код без CSS, если использую свои стили на сайте.

Генерируем html-код таблицы в Tables Generator

Недостаток сервиса — размер столбцов таблицы может генерироваться в абсолютных значениях. Это может приводить к некорректному отображению таблицы при изменении размеров окна браузера. И посему в таком случае уже на блоге нужно желать корректировку кода, заменяя абсолютные размеры относительными

Кореектировка кода таблицы Tables Generator

Примеры таблиц, сделанных по такой технологии:
Характеристики насосов ЭЦВ Размеры электродвигателей

Ссылка на Tables Generator

Tables Generator: http://www.tablesgenerator.com/html_tables

к оглавлению ↑

2. Cоздание таблицы в редакторе Guttenberg

Редактор Гуттнберг стал частью WordPress с конца 2018 года.
Гуттнберг — блочный редактор. Это значит что контент страницы представлен в виде отдельных блоков.

Среди большого количества блоков есть блок «Таблица». Блок позволяет быстро сделать таблицу html и разместить ее на страницу.