Генераторы таблиц html онлайн
Содержание
Вы можете писать коды в ручную, но существуют специальные сервисы, где вы сможете генерировать код таблицы html онлайн. Пользоваться генераторами очень просто, удобно.
Лучшие конструкторы таблиц 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/ красивую кнопку можно сделать для сайта?