Table html тег – Таблицы в Html — теги Table, Tr и Td, а так же Colspan, Cellpadding, Cellspacing и Rowspan для их создания

Содержание

Тег | HTML справочник

Поддержка браузерами

Описание

Таблицы в HTML могут содержать множество различных тегов, включая HTML тег <table>, т.е. имеется возможность создания вложенных таблиц.

Основным тегом-контейнером для HTML-таблицы является тег <table>, который требует обязательного присутствия закрывающего тега. Любая таблица состоит из строк (определяются тегом <tr>), содержащих любое количество как заголовочных ячеек (определяются тегом th), так и ячеек с любыми данными (определяются тегом <td>). Тег <th>, отличается от <td> визуальным представлением данных внутри таблицы: по умолчанию, текст, размещенный в теге <th>, отображается жирным начертанием с выравниванием текста по центру, а текст тега <td> - обычным начертанием с выравниванием по левому краю.

Более сложные таблицы могут содержать такие элементы как, <caption>, <col>, <colgroup>, <thead>, <tfoot> и <tbody>.

Примечание: по стандарту HTML5 все ранее используемые атрибуты таблицы, такие как align, bgcolor, border и т.д. больше не поддерживаются и их использование валидатор будет считать за ошибки в коде. Поэтому для стилизации таблиц нужно использовать CSS, с помощью которого можно заменить все атрибуты. Например, чтобы добавить рамку для таблицы используется свойство border, для изменения заднего фона - свойство background, а для выравнивания строчного содержимого в ячейках таблицы - свойства text-align и vertical-aling.

Атрибуты

Тег <table> поддерживает Глобальные атрибуты и События

Стиль по умолчанию


table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: gray;
}

Пример


<table>
  <tr>
    <th>Месяц</th>
    <th>Денег на счету</th>
  </tr>
  <tr>
    <td>Декабрь</td>
    <td>100р</td>
  </tr>
</table> 

Результат данного примера в окне браузера:

Пример использования тега <table>

| Справочник HTML



Элемент <table> (от англ. "table" ‒ «таблица») определяет таблицу HTML.

Таблица HTML состоит из элемента <table> и одного или нескольких элементов <tr>, <th> и <td>.

Элемент <tr> определяет строку таблицы, элемент <th> определяет верхний колонтитул/заголовок таблицы, а элемент <td> определяет ячейку таблицы.

Примечание: Тег <th>, отличается от <td> визуальным представлением данных внутри таблицы: по умолчанию, текст, размещенный в теге <th>, отображается жирным начертанием с выравниванием текста по центру, а текст тега <td> ‒ обычным начертанием с выравниванием по левому краю.

Более сложные таблицы могут содержать такие элементы как, <caption>, <col>, <colgroup>, <thead>, <tfoot> и <tbody>.

Примечание: Таблицы не должны использоваться для макета страницы! Таблицы с невидимой границей долгое время использовались для верстки веб-страниц, позволяя разделять документ на модульные блоки. Подобный способ применения таблиц нашёл воплощение на многих сайтах, тем не менее, существует множество альтернатив использованию таблиц для макета, в основном с использованием CSS.

Синтаксис

<table>
  <tr>
    <td>...</td>
  </tr>
</table>

Закрывающий тег

Обязателен.

Атрибуты

alignУстарел в HTML5
Определяет выравнивание таблицы в соответствии с окружающим её текстом.

backgroundУстарел в HTML5
Задаёт фоновый рисунок в таблице.

bgcolorУстарел в HTML5
Задает цвет фона для таблицы.

borderУстарел в HTML5
Толщина рамки в пикселях.

bordercolorУстарел в HTML5
Задает цвет рамки.

cellpaddingУстарел в HTML5
Определяет расстояние между границей ячейки и ее содержимым.

cellspacingУстарел в HTML5
Указывает расстояние между ячейками.
colsУстарел в HTML5
Число колонок в таблице.

frameУстарел в HTML5
Сообщает браузеру, как отображать границы вокруг таблицы.

rulesУстарел в HTML5
Сообщает браузеру, где отображать границы между ячеек.

summaryУстарел в HTML5
Краткое описание таблицы.

widthУстарел в HTML5
Определяет ширину таблицы.

Для этого элемента доступны глобальные атрибуты и события.

Стилизация по умолчанию

Большинство браузеров отобразит элемент <table> со следующими значениями CSS по умолчанию:

table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: gray;
}

Различия между HTML 4.01 и HTML5

В HTML 5 была прекращена поддержка 12 атрибутов.

Пример использования:

Пример HTML:

Попробуй сам
  <table>
    <tr><th>Заголовок 1</th><th>Заголовок 2</th><th>Заголовок 3</th></tr>
    <tr><td>Ячейка 2x1 </td><td>Ячейка 2x2 </td><td>Ячейка 2x3 </td></tr>
    <tr><td>Ячейка 3x1 </td><td>Ячейка 3x2 </td><td>Ячейка 3x3 </td></tr>
  </table>

Спецификации

Поддержка браузерами

Элемент
<table> 3+ 1+ 3.5+ 1+ 1+ 1+
Элемент
<table> 1+ 1+ 6+ 1+

Попробуйте сами - Примеры

Как добавить рамку вокруг таблицы:
Граница таблицы

Как избавиться от «двойной рамки»:
Одинарная рамка для таблицы

Как изменить поля и интервалы таблицы:
Поля и интервалы таблицы

Как изменить ширину таблицы:
Ширина таблицы

Как объединить столбцы таблицы:
Объединение столбцов

Как создать заголовок таблицы:
Заголовок таблицы

Как применять теги группирования элементов таблиц:

Теги группирования элементов таблиц


Учебник HTML

HTML уроки: HTML Табицы

HTML Элементы



HTML Тег таблица


Простая таблица HTML, содержащая два столбца и две строки:

Пример

<table>
  <tr>
    <th>Месяц</th>
    <th>Сбережения</th>
  </tr>
  <tr>
    <td>Январь</td>
    <td>$100</td>
  </tr>
</table>

Попробуйте сами »

Больше примеров "Попробуйте сами" ниже.


Определение и использование

Tег <table> определяет таблицу HTML.

Таблица HTML состоит из элемента <table> и одиного или нескольких элементов <tr>, <th> и <td>.

Элемент <tr> определяет строку таблицы, элемент <th> определяет заголовок таблицы, и элемент <td> определяет ячейку таблицы.

Более сложная таблица HTML, может также включать элементы <caption>, <col>, <colgroup>

, <thead>, <tfoot>, и <tbody>.

Примечание: Таблицы не должны использоваться для макета страницы! Исторически, некоторые авторы злоупотребляют таблицами в HTML как способ контролировать свой макет страницы. Однако существует множество альтернатив использованию таблиц HTML для компоновки, в первую очередь с помощью CSS.


Поддержка браузеров

Элемент
<table> Да Да Да Да Да

Различия между HTML 4.01 и HTML5

Атрибуты "align", "bgcolor", "border", "cellpadding", "cellspacing", "frame", "rules", "summary", и "width" не поддерживаются в HTML5.


Атрибуты

Атрибуты Значение Описание
align left
center
right
Не поддерживается в HTML5.
Задает выравнивание таблицы в соответствии с окружающим текстом
bgcolor rgb(x,x,x)
#xxxxxx
colorname
Не поддерживается в HTML5.
Задает цвет фона для таблицы
border 1
0
Не поддерживается в HTML5.
Указывает, используется ли таблица в целях компоновки
cellpadding pixels Не поддерживается в HTML5.
Задает пространство между стенкой ячейки и содержимым ячейки
cellspacing pixels Не поддерживается в HTML5.
Задает пространство между ячейками
frame void
above
below
hsides
lhs
rhs
vsides
box
border
Не поддерживается в HTML5.
Указывает, какие части внешних границ должны быть видимыми
rules none
groups
rows
cols
all
Не поддерживается в HTML5.
Указывает, какие части внутренних границ должны быть видны
summary text Не поддерживается в HTML5.
Задает сводку содержимого таблицы
width pixels
%
Не поддерживается в HTML5.
Задает ширину таблицы

Глобальные атрибуты

Tег <table> также поддерживает Глобальные атрибуты в HTML.


Атрибуты событий

Tег <table> также поддерживает Атрибуты событий в HTML.


Примеры - "Попробуйте сами"

Заголовок таблицы
Как создать заголовки таблицы.

Таблица с подписью
Как создать таблицу с подписью.

Теги внутри таблицы
Как создать таблицу с элементы внутри других элементов.

Таблица с несколькими столбцами и строками
Как создать таблицу, более чем с одной строкой или одного столбца.


Cвязанные страницы

Учебник HTML: HTML Таблицы

Справочник HTML DOM: Объект Table

Учебник CSS: СSS Таблицы


Настройки CSS по умолчанию

Большинство браузеров отображает элемент <table> со следующими значениями по умолчанию:

Пример

table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: gray;
}

Попробуйте сами »

Тег | HTML справочник

HTML теги

Значение и применение

Таблицы помогают нам систематизировать определённые данные в строки и столбцы. Они могут содержать в себе различную информацию, например, такую как текст, изображения, нумерованные и маркированные списки и т.п.

Чтобы понять, как составить таблицу, давайте рассмотрим ее простейший вариант:

Основное содержимое таблицы заключается в тег <table>..</table>.

Каждая строка таблицы помещается в элемент <tr>...</tr>.

Ячейка заголовка таблицы помещается в элемент <th>...</th> (при этом содержимое отображается жирным начертанием и выравнивается по центру).

Каждая ячейка данных таблицы помещается в элемент <td>...</td>.

Наименование таблицы, если оно требуется размещается внутри элемента <caption>...</caption> (необязательный элемент). Обращаю Ваше внимание, что если Вы планируете использовать данный элемент в своей таблице, то он должен следовать в документе сразу за элементом <table>. По умолчанию наименование таблицы размещается по центру вверху таблицы (расположение заголовка таблицы возможно изменить, используя CSS свойство caption-side).

Поддержка браузерами

Атрибуты

АтрибутЗначениеОписание
abbrtextНе поддерживается в HTML5.
Определяет сокращенный вариант содержания в ячейке данных, либо выступает в роли альтернативного текста. Применение атрибута не отображается в браузере, но может быть использовано, например, для чтения с экрана или в работе скриптов.
alignright
left
center
justify
char
Не поддерживается в HTML5.
Выравнивает содержимое ячейки данных таблицы.
axiscategory_nameНе поддерживается в HTML5.
Назначение категории ячейки данных.
bgcolorrgb(x,x,x)
#xxxxxx
colorname
Не поддерживается в HTML5.
Задает цвет фона для ячейки данных таблицы.
charcharacterНе поддерживается в HTML5.
Выравнивает содержимое в ячейке данных таблицы по заданному символу. Атрибут char может быть использован только если атрибут align = "char".
charoffnumberНе поддерживается в HTML5.
Атрибут, который позволяет произвести выравнивание в ячейке данных с символа, указанного в атрибуте, путем смещения от определённого символа вправо (положительные значения) или влево (отрицательные значения). Атрибут charoff может быть использован только если атрибут align = "char".
colspannumberОпределяет количество столбцов, которое ячейка данных должна охватывать. Значение атрибута должно быть неотрицательном целым числом. Не рекомендуется использовать значения свыше 1000, т.к. они могут быть обрезаны до этого числа. Значение по умолчанию 1.
headersheader_idУказывает id одной или нескольких заголовочных ячеек (HTML тег <th>), связанных с данной ячейкой данных. Применение атрибута не отображается в браузере, но может быть использовано, например, для чтения с экрана или в работе скриптов.
heightpixels
%
Не поддерживается в HTML5.
Устанавливает высоту ячейки данных.
nowrapnowrapНе поддерживается в HTML5.
Указывает, что содержание в ячейке данных не должно переноситься.
rowspannumberОпределяет количество строк, которые ячейка данных должна охватывать. Значение атрибута должно быть неотрицательном целым числом. Не рекомендуется использовать значения свыше 65534, т.к. они могут быть обрезаны до этого числа. Значение по умолчанию 1.
scopecol
colgroup
row
rowgroup
Не поддерживается в HTML5.
Определяет способ связать заголовочную ячейку (HTML тег <th>) с ячейками данных в таблице. Применение атрибута не отображается в браузере, но может быть использовано, например, для чтения с экрана или в работе скриптов.
valigntop
middle
bottom
baseline
Не поддерживается в HTML5.
Вертикальное выравнивание содержимого в ячейке данных.
widthpixels
%
Не поддерживается в HTML5.
Определяет ширину ячейки данных.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title>Пример использования тега <td></title>
</head>
<body>
	<table border = "1"> <!--начало содержимого таблицы-->
		<caption>Элементарная таблица</caption> <!-- наименование таблицы-->
		<tr> <!--описываем первую строку-->
			<th>Ячейка заголовка 1</th>
			<th>Ячейка заголовка 2</th> 
			<th>Ячейка заголовка 3</th>
		</tr> 
		<tr> <!--описываем вторую строку-->
			<td>Ячейка данных 1 Строка 2</td>
			<td>Ячейка данных 2 Строка 2</td>
			<td>Ячейка данных 3 Строка 2</td>
		</tr>
		<tr> <!-- описываем третью строку-->
			<td>Ячейка данных 1 Строка 3</td>
			<td>Ячейка данных 2 Строка 3</td>
			<td>Ячейка данных 3 Строка 3</td>
		</tr>
	</table> <!-- конец таблицы-->
</body>
</html>

К данной таблице для наглядности мы добавили атрибут border (граница) со значением "1", которое определяет, что граница должна отображаться вокруг ячеек таблицы. Атрибут граница практически не используется в HTML, в данном случае использование CSS было бы предпочтительнее и давало бы более гибкие возможности.

Пример таблицы, составленной на HTML.

Объединение столбцов

Объединение столбцов в элементах <td> допускается с помощью атрибута colspan (при этом ячейка данных растягивается вправо на заданное количество ячеек).

<!DOCTYPE html>
<html>
<head>
<title>Пример использования атрибута colspan HTML тега <td></title>
</head>
<body>
	<table border = "1">
		<tr>
			<th >Ячейка заголовка 1</th>
			<th >Ячейка заголовка 2</th>
			<th >Ячейка заголовка 3</th>
		</tr>
		<tr>
			<td>Ячейка данных 1 Строка 2</td>
			<td>Ячейка данных 2 Строка 2</td>
			<td>Ячейка данных 3 Строка 2</td>
		</tr>
		<tr>
			<td colspan = "2">Ячейка 1 Строка 3 (colspan="2")</td>
			<td>Ячейка 2 Строка 3</td>
		</tr>
	</table>
</body>
</html>

В браузере это выглядит следующим образом:

Пример использования атрибута colspan HTML тега <td> (число столбцов, которое ячейка данных должна охватывать).

Объединение строк

Объединение строк в элементах <th> (ячейка заголовка таблицы) или <td> допускается с помощью атрибута rowspan (диапазон ячеек задается сверху вниз и охватывает несколько строк – ячейка растягивается вниз).

<!DOCTYPE html>
<html>
<head>
<title>Пример объединения строк в таблице</title>
</head>
<body>
	<table border = "1"> <!-- начало содержимого таблицы-->
		<caption>Элементарная таблица</caption> <!--наименование таблицы-->
		<tr> <!--описываем первую строку-->
			<th colspan = "2">Ячейка заголовка 1</th><!--растягиваем на 2 ячейки-->
			<th>Ячейка заголовка 2</th>
		</tr>
		<tr><!--описываем вторую строку-->
			<td rowspan = "2">Ячейка данных 1 Строка 2</td>
			<td>Ячейка данных 2 Строка 2</td>
			<td>Ячейка данных 2 Строка 3</td>
		</tr>
		<tr> <!--описываем третью строку (первая ячейка занята предыдущей строкой) -->
			<td>Ячейка данных 2 Строка 3</td>
			<td>Ячейка данных 3 Строка 3</td>
		</tr>
	</table> <!--конец таблицы-->
</body>
</html>
Пример таблицы с объединёнными столбцами и строками на HTML.

Отличия HTML 4.01 от HTML 5

В HTML 5 была прекращена поддержка 11 атрибутов.

Значение CSS по умолчанию

td {
display: table-cell;
vertical-align: inherit;
}

Поддержка глобальных атрибутов

Элемент поддерживает "глобальные атрибуты".

Атрибуты событий

Элемент поддерживает "атрибуты событий".

HTML теги

Тег HTML основная часть, тело таблицы

Тег <tbody> определяет границы основной части таблицы HTML. Используется в HTML таблицах определенных тегом <table>.

К группе тегов отвечающих за различные части HTML таблиц относятся: тег <thead> - верхний колонтитул, <tbody> - основная часть, <tfoot> - нижний колонтитул.

Браузеры могут использовать разделение таблицы на смысловые части, например, выводя при печати области колонтитулов <thead> и <tfoot> на каждой напечатанной странице.

HTML тег <tbody> должен располагаться внутри тега <table> после тегов <caption>, <col>, <colgroup>, <thead> и <tfoot>.

Внутри тега <tbody> должен быть один или несколько элементов <tr> - строк таблицы.

Стоит отметить, что теги <thead>, <tbody>, <tfoot> по умолчанию не изменяют стили таблицы. Для этого используйте CSS.

Подробнее про создание таблиц читайте в статье: Создание таблиц в HTML. Все о HTML таблицах.

Синтаксис

<tbody>элементы tr с HTML контентом</tbody>

Отображение в браузере

Ячейка 1 Ячейка 2
Ячейка 7 Ячейка 8
Ячейка 3 Ячейка 4
Ячейка 5 Ячейка 6

Пример использования <tbody> в HTML коде

<!DOCTYPE html>
<html>
<head>
<title>Таблица с tbody</title>
</head>
<body>
<table>
<!-- Ячейки верхнего колонтитула -->
<thead>
<tr>
<th>Ячейка 1</th>
<th>Ячейка 2</th>
</tr>
</thead>
<tfoot>
<!-- Ячейки нижнего колонтитула -->
<tr>
<th>Ячейка 7</th>
<th>Ячейка 8</th>
</tr>
</tfoot>
<tbody>
<!-- Основная часть таблицы -->
<tr>
<td>Ячейка 3</td>
<td>Ячейка 4</td>
</tr>
<tr>
<td>Ячейка 5</td>
<td>Ячейка 6</td>
</tr>
</tbody>
</table>
</body>
</html>

Поддержка браузерами

Атрибуты <tbody>

В HTML5 у тега <tbody> нет атрибутов.

Устаревшие атрибуты

Атрибут Значения Описание
align left
right
center
justify
Задает правило выравнивания содержимого по горизонтали. В HTML5 используйте CSS.
valign top
middle
bottom
baseline
Задает правило выравнивания содержимого по вертикали. В HTML5 используйте CSS.

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

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