Генератор таблицы html онлайн
Выбрать число строк LINE:
Выбрать число столбцов COLUMN:
Готовый код таблицы html
Отображения цвета таблицы html
| Head 1 | Head 2 | Head 3 | Head 4 | Head 5 |
|---|---|---|---|---|
| Line:1 Column:1 | Line:1 Column:2 | Line:1 Column:3 | Line:1 Column:4 | Line:1 Column:5 |
| Line:2 Column:1 | Line:2 Column:2 | Line:2 Column:3 | Line:2 Column:4 | Line:2 Column:5 |
| Line:3 Column:1 | Line:3 Column:2 | Line:3 Column:3 | Line:3 Column:4 | Line:3 Column:5 |
| Line:4 Column:1 | Line:4 Column:2 | Line:4 Column:3 | Line:4 Column:4 | Line:4 Column:5 |
| Line:5 Column:1 | Line:5 Column:2 | Line:5 Column:3 | Line:5 Column:4 | Line:5 Column:5 |
| Line:6 Column:1 | Line:6 Column:2 | Line:6 Column:3 | Line:6 Column:4 | Line:6 Column:5 |
генератор таблиц html
Генератор table состоит из четырех основных полей.
- Задаем число строк line.
- Пишем какое количество колонок column будет в таблице.
- Выбираем цветовую схему для таблицы. Цвета всегда можно поменять в скопированном коде.
- Указываем будет ли выделение цветом строки ячейки, на которую навели курсор. Красивое выделение строк и колонок у таблице можно сделать как в этой статье.
- Копируем код таблицы html.
Делаем таблицу html онлайн
Основной тег таблицы table, в нем содержатся все ячейки.
У любой ячейки есть свой тег.
- th в этом теге заголовок ячейки таблицы html.
- tr начало ряда с ячейками данных.
- 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 им выделяем полезный текст для поискового робота.
Строки и столбцы таблицы можно группировать, чтобы выделять их другим цветом.
- colgroup объединяем столбцы в группы.
- col этим тегом укажем каждой группе свой стиль. У тега есть атрибут span=n для указания числа колонок в таблице html.
Разберем каждый тег в примере.
Примеры красивых таблиц html.
Объединим ячейки в line и column в таблице.
| column1 | column2 | column3 | column4 |
|---|---|---|---|
| Объединение ячеек в line | Объединение ячеек в column | ||
| line3 cell1 | line3 cell2 | line3 cell3 | |
| line4 cell1 | line4 cell2 | line4 cell3 | |
Скачать код таблицы html с атрибутами colspan и rowspan.
Объединим столбцы в группы colgroup.
| column1 | column2 | column3 | column4 |
|---|---|---|---|
| tfoot в column1 | tfoot в column2 | tfoot в column3 | tfoot в column4 |
| Объединение ячеек в line | Объединение ячеек в column | ||
| Объединение ячеек в line и column | line3 | ||
| line4 | |||
Скачать код таблицы html с атрибутам colgroup.
Простая таблицы html.
| column1 | column2 | column3 | column4 | column5 | column6 |
|---|---|---|---|---|---|
| 1 | cell2 | cell3 | cell4 | cell5 | cell6 |
| 2 | cell2 | cell3 | cell4 | cell5 | cell6 |
| money | 9999 | ||||
Скачать код простой таблицы html.