HTML тег <caption>

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

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

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

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

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

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

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

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

По умолчанию, наименование таблицы размещается по центру вверху таблицы (расположение заголовка таблицы возможно изменить, используя CSS свойство caption-side).

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

Тег	Chrome	Firefox	Opera	Safari	IExplorer	Edge
<caption>	Да	Да	Да	Да	Да	Да

Атрибуты

Атрибут	Значение	Описание
align	left right top bottom	Не поддерживается в HTML5. Определяет выравнивание заголовка.

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

<!DOCTYPE html>
<html>
	<head>
		<title>Пример таблицы, составленной на HTML</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 было бы предпочтительнее и давало бы более гибкие возможности.

Результат нашего примера:

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

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

<!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>Ячейка данных 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>

Результат нашего примера:

Пример таблицы с объединёнными столбцами на HTML.

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

Объединение строк в элементах <td> или <th> допускается с помощью атрибута 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

Атрибут align был удален из HTML 5.

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

caption {
display: table-caption;
margin-right: center;
}

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

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

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

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

HTML теги