MyTetra Share
Делитесь знаниями!
Генератор таблицы html онлайн
Время создания: 25.03.2019 21:46
Автор: lensav
Текстовые метки: Генератор, таблицы, html, онлайн
Раздел: MyTetra - INTERNET - SUBLIME_TEXT3


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

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

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

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

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

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


генератор таблиц 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 в таблице
column1column2column3column4
Объединение ячеек в lineОбъединение ячеек в column
line3 cell1line3 cell2line3 cell3
line4 cell1line4 cell2line4 cell3

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

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

colgroup объединяем столбцы в группы
column1column2column3column4
tfoot в column1tfoot в column2tfoot в column3tfoot в column4
Объединение ячеек в lineОбъединение ячеек в column
Объединение ячеек в line и columnline3
line4

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

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

column1column2column3column4column5column6
1cell2cell3cell4cell5cell6
2cell2cell3cell4cell5cell6
money9999

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

 


 
MyTetra Share v.0.53
Яндекс индекс цитирования