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

Выбрать число строк LINE:

Выбрать число столбцов COLUMN:

Цветовая схема таблицы html
Подсветка цветом строки

Advanced Options [+]

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

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

Head 1Head 2Head 3Head 4Head 5
Line:1 Column:1Line:1 Column:2Line:1 Column:3Line:1 Column:4Line:1 Column:5
Line:2 Column:1Line:2 Column:2Line:2 Column:3Line:2 Column:4Line:2 Column:5
Line:3 Column:1Line:3 Column:2Line:3 Column:3Line:3 Column:4Line:3 Column:5
Line:4 Column:1Line:4 Column:2Line:4 Column:3Line:4 Column:4Line:4 Column:5
Line:5 Column:1Line:5 Column:2Line:5 Column:3Line:5 Column:4Line:5 Column:5
Line:6 Column:1Line:6 Column:2Line:6 Column:3Line:6 Column:4Line:6 Column:5

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

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

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

Объединение line и column в таблице
column1 column2 column3 column4
Объединение ячеек в line Объединение ячеек в column
line3 cell1 line3 cell2 line3 cell3
line4 cell1 line4 cell2 line4 cell3

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

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

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 cell2cell3cell4cell5cell6
2 cell2cell3cell4cell5cell6
money9999

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