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

Готовый код таблицы html

Отображения цвета таблицы html

генератор таблиц html

Генератор table состоит из четырех основных полей.

1. Задаем число строк line.
2. Пишем какое количество колонок column будет в таблице.
3. Выбираем цветовую схему для таблицы. Цвета всегда можно поменять в скопированном коде.
4. Указываем будет ли выделение цветом строки ячейки, на которую навели курсор. Красивое выделение строк и колонок у таблице можно сделать как в этой статье. 
5. Копируем код таблицы html.

Делаем таблицу html онлайн

Основной тег таблицы table, в нем содержатся все ячейки.

У любой ячейки есть свой тег.

1. th в этом теге заголовок ячейки таблицы html.
2. tr начало ряда с ячейками данных.
3. dt ячейка информации в таблице.

У таблице есть границы между ячейками трех видов.

• th border: 3px solid plum все границы вокруг ячейки заголовка окрашиваются в цвет.
• td border: 3px solid red окрашиваются все ячейки с данными.
• table border: 3px solid blue выставляем цвет у границ таблицы html снаружи таблицы.

Свойством border-collapse: collapse делаем объединение границ ячеек в одну общую между двумя.

Ячейки можно объединять атрибутами таблицы html.

• colspan=n объединяет ячейки в строке line.
• rowspan=n объединяет html таблицы ячейки в столбце column.

Задать цвет ячейки можно в стилях css, либо в html свойством th bgcolor=blue.  

Размер таблицы html задается свойством width:100%.

Отступы в таблице html добавляем свойствами padding-right и padding-left.

Можно справа красиво подписать таблицу тегом caption.

Чтобы выравнять внутри таблицы текст с данными пишем у ячейки td style=text-align:right.

• Для изменения у таблицы строки в любой части на верхнее положение пишем тег thead.
• Для переноса строк вниз пишем тег tfoot.
• tbody им выделяем полезный текст для поискового робота.

Строки и столбцы таблицы можно группировать, чтобы выделять их другим цветом.

1. colgroup объединяем столбцы в группы.
2. col этим тегом укажем каждой группе свой стиль. У тега есть атрибут span=n для указания числа колонок в таблице html.

Разберем каждый тег в примере.

Примеры красивых таблиц html.

Объединим ячейки в line и column в таблице.

Скачать код таблицы html с атрибутами colspan и rowspan.

Объединим столбцы в группы  colgroup.

Скачать код таблицы html с атрибутам colgroup.

Простая таблицы html.

Скачать код простой таблицы html.