Генераторы таблиц html онлайн

конструктор таблиц

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

Лучшие конструкторы таблиц HTML

  1. apsolyamov.ru - простой инструмент для создания таблиц. Есть опция объединения ячеек, но невозможно задать цвет.
  2. 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
  3. divtable.com - удобный в использовании, множество настроек, возможность выбрать тип таблицы - div или table. В разделе сайта "Создание стилизованной таблицы) вы можете выбрать шаблон, изменить цвета, задать нумерацию в футере:
    Генератор таблицы html

Генератор таблиц с цветом (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 онлайн

  1. Создайте таблицу в любой из программ - Microsoft Excel, OpenOffice или Microsoft Word. Заполните все её ячейки текстом.
  2. Выделите ваш результат и кликните правой кнопкой мыши и выберите пункт “Копировать”.
  3. Перейдите в генератор таблиц html онлайн – Tableizer
  4. В генераторе в пустое поле вставьте содержимое буфера обмена (клик правой кнопкой мыши и выбор пункта “Вставить”)
    таблица html онлайн
  5. Выберите Размер шрифта Font size, цвет шапки (верхних ячеек, первой строки) - параметр  Header color, шрифт текста Font.
  6. Нажмите кнопку Tableizer it!
  7. Копируйте код из окошка и вставляйте в текстовый редактор своего блога в режиме html.

Как добавить на сайт

Как добавить в пост (в запись, отдельную страницу)
сгенерированный код добавить в режиме html.
Причем, html код добавляем без изменений, а стили между <style> и </style>
Как добавить стили ко всем таблицам сайта
  1. Добавьте стили в файл style.css на вордпресс или перед ]]></b:skin> в теме Blogger
  2. При добавлении таблицы в запись, прописывайте нужный класс

Видеоурок

5 ответов к «Генераторы таблиц html онлайн»

  1. Наталья, спасибо за наводку! 🙂 Хороший сайт у них для создания таблиц. Искал нечто подобное, пригодится. А есть такие же (аналогичные) программы, что бы на компе можно было делать таблицы с html-кодом?

  2. Если нужно создание сложных таблиц, то знаю только одно программу (подсказали оанее в комментариях) http://newjs.my1.ru/load/generator_html_tablic/1-1-0-1
    Может содавать сложные таблицы с шапками, надстройках. Создание матриц. Но стили программа не создает, так что раскрасить таблицу не получится.

  3. Понятно. не, мне надо что бы была именно со стилями, раскрасить её 🙂 У меня как-то получалось даже скопировать и вставить в сообщение блога обычную Exel-2007 таблицу (раскрашенную), и она отлично вписалась в сообщение блога. Но как я это сделал — уже не помню. Потом пытался повторить такой же фокус — не получается, не помню как именно я умудрился вставить Exel-2007 таблицу в блог.

  4. Наташа здравствуйте!
    А как перевести на "русский" вот это: (подсказали оанее в комментариях)
    А это где? это моя программа и мне интересно как потихоньку программы расползаются по инету.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *