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

конструктор таблиц
В моем блоге уже написано множество уроков по созданию таблиц для сайта / блога:

И вот я нашла еще один замечательный конструктор таблиц, в котором можно быстро создать и раскрасить таблицу html + css и вставить в блог.
Пример такой таблицы вы видите:
.tg {border-collapse:collapse;border-spacing:0;border-color:#aaa;}
.tg td{font-family:arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#aaa;color:#333;background-color:#fff;}
.tg th{font-family:arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#aaa;color:#fff;background-color:#f38630;}
.tg .tg-u5lh{background-color:#fcff2f;color:#fe0000;text-align:center}
.tg .tg-uv3h{font-family:"Arial Black", gadget, sans-serif !important;;background-color:#cb0000;text-align:center}
.tg .tg-1j71{background-color:#fcff2f;color:#fe0000}
.tg .tg-r4eo{background-color:#fcff2f}

Заголовок таблицы
Первый столбец Второй столбец Третий столбец
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.
Если вы хотите, чтобы все таблицы с указанными классами принимали вид созданной вами таблиц, то вставьте css код таблицы в редактор html блога (редактор шаблона) в стили, т.е. перед кодом ]]></b:skin> на Blogger и в style.cs на WordPress.

Видео урок

5 ответов к «Конструктор таблиц html»

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

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

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

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

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

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