С помощью сервиса Tables Generator

можно быстро получить код html-таблицы для вставки ее в статью на блог

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

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

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

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

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

2. Далее загружаю файл с расширением .csv в Tables Generator
Загружаем таблицу из Excel в  Tables Generator
3. Потом, при необходимости, редактирую загруженную таблицу уже в самом Tables Generator. В сервисе есть достаточный набор инструментов плюс есть готовые шаблоны представления таблиц.
Редактируем таблицу  в  Tables Generator
4. Заключительный момент — генерация html-кода таблицы. Нажав кнопку «Generate» ниже в окне получаю html-код таблицы, который можно скопировать и вставить в статью на блог. Код может быть с встроенными стилями, без стилей, а также в компактном виде (одной строкой). Я использую код без CSS, так как использую свои стили на блоге.
Генерируем html-код таблицы  в  Tables Generator
s
Недостаток сервиса — размер столбцов таблицы может генерироваться в абсолютных значениях. Это может приводить к некорректному отображению таблицы при изменении размеров окна браузера. И посему в таком случае уже на блоге я делаю небольшую корректировку кода, заменяя абсолютные размеры относительными
Кореектировка кода  таблицы Tables Generator
Примеры таблиц, сделанных по такой технологии:
Характеристики насосов ЭЦВ   Размеры электродвигателей

Если знаешь другие способы быстрого создания html-кода таблиц — поделись в комментариях внизу страницы.

Удачи!
Александр Коваль

  • Ссылка на Tables Generator: http://www.tablesgenerator.com/html_tables
Метки: