
Если вы знакомы с html, то знаете, как сложно бывает писать код таблицы вручную. К счастью существуют генераторы таблиц, которые упрощают процесс создания таблиц на html. Они различаются по сложности создания структуры, возможности добавления css кода. Если вам нужна простая таблица, то вы можете воспользоваться нашим конструктором. Введите в поля количество столбцов, строк и некоторые другие параметры, и получите результат. Также есть возможность предпросмотра готовой таблицы.
Лучшие конструкторы таблиц HTML
- apsolyamov.ru - простой инструмент для создания таблиц. Есть опция объединения ячеек, но невозможно задать цвет.
- c-wd.ru - русскоязычный сайт, где можно создавать сложные таблицы с объединенными ячейками, задавать стили в "конструкторе стилей" - цвета границ и ячеек, отступы, толщину границ, цвет строки при наведении, размер и цвет текста. Дополнительно можно настроить выравнивание, адаптивность для мобильных устройств, изменить курсор.
Заголовок Заголовок Заголовок Заголовок cell1_1 cell2_1 cell3_1 cell4_1 cell1_2 cell2_2 cell3_2 cell4_2 cell1_3 cell2_3 cell3_3 cell1_4 cell2_4 cell3_4 cell4_4 - divtable.com - удобный в использовании, множество настроек, возможность выбрать тип таблицы - div или table. В разделе сайта "Создание стилизованной таблицы) вы можете выбрать шаблон, изменить цвета, задать нумерацию в футере:
Генератор таблиц с цветом (HTML + CSS)
Замечательный конструктор, в котором можно быстро создать таблицу html + css в цвете и вставить в блог.
Пример вы видите:
Заголовок | ||
---|---|---|
Первый столбец | Второй столбец | Третий столбец |
1 | 2 | 34 |
1 | 23 | 11 |
456 | 44 | 456 |
Перейдите на сайт конструктора >>>
Этот генератор англоязычный, но в нем вы без труда разберетесь и научитесь создавать красивые таблицы с различным оформлением – это и в цвете, и с шапкой, объединять ячейки, изменять шрифт и выравнивать текста и многое другое.
Бонус сервиса: здесь можно создавать не только html+css, но и таблицы в LaTeX, а также для блокнота (пример ниже), Markdown и Mediawiki

Как работать в сервисе
В верхней части генератора – меню. Привожу на скриншоте ниже перевод основных команд:
Начинаем создание таблицы с выбора пунктов меню File –> New table
, где rows – количество строк, а columns – число столбцов. Кнопка – Create (создать).
Далее начинаем заполнять и редактировать.
Кликаем двойным щелчком в нужной ячейки – появляется курсов – пишем текст.
Выделяем ячейки и нажимаем на кнопку Merge, как показано ниже – объединяем ячейки. Так можно создать шапку:
Обратный процесс разделения ранее объединенных ячеек осуществляется кнопкой Split.
Делаем яркой таблицу, изменяем цвет текст и фона с помощью кнопок оформления. Перевод команд ниже:
кликните для увеличения
После того, как нас устроит результат, нажмите кнопку Generate (генерировать), скопируйте код html+css и вставьте в сообщение блога в режиме html.
Создание таблицы в html онлайн конструктор
- Создайте таблицу в любой из программ - Microsoft Excel, OpenOffice или Microsoft Word. Заполните все её ячейки текстом.
- Выделите ваш результат и кликните правой кнопкой мыши и выберите пункт “Копировать”.
- Перейдите в генератор таблиц html онлайн – Tableizer
- В генераторе в пустое поле вставьте содержимое буфера обмена (клик правой кнопкой мыши и выбор пункта “Вставить”)
- Выберите Размер шрифта Font size, цвет шапки (верхних ячеек, первой строки) - параметр Header color, шрифт текста Font.
- Нажмите кнопку Tableizer it!
- Копируйте код из окошка и вставляйте в текстовый редактор своего блога в режиме html.
Как добавить на сайт
Причем, html код добавляем без изменений, а стили между <style> и </style>
- Добавьте стили в файл style.css на вордпресс или перед ]]></b:skin> в теме Blogger
- При добавлении таблицы в запись, прописывайте нужный класс
Наталья, спасибо за наводку! 🙂 Хороший сайт у них для создания таблиц. Искал нечто подобное, пригодится. А есть такие же (аналогичные) программы, что бы на компе можно было делать таблицы с html-кодом?
Если нужно создание сложных таблиц, то знаю только одно программу (подсказали оанее в комментариях) http://newjs.my1.ru/load/generator_html_tablic/1-1-0-1
Может содавать сложные таблицы с шапками, надстройках. Создание матриц. Но стили программа не создает, так что раскрасить таблицу не получится.
Понятно. не, мне надо что бы была именно со стилями, раскрасить её 🙂 У меня как-то получалось даже скопировать и вставить в сообщение блога обычную Exel-2007 таблицу (раскрашенную), и она отлично вписалась в сообщение блога. Но как я это сделал - уже не помню. Потом пытался повторить такой же фокус - не получается, не помню как именно я умудрился вставить Exel-2007 таблицу в блог.
Наташа здравствуйте!
А как перевести на "русский" вот это: (подсказали оанее в комментариях)
А это где? это моя программа и мне интересно как потихоньку программы расползаются по инету.
Как вы думаете, вот тут http://c-wd.ru/tools/cnopka/ красивую кнопку можно сделать для сайта?
Интересует конструктор таблиц html онлайн