Caption table: : The Table Caption element — HTML: HyperText Markup Language

Leave a Comment / Разное / By /

Содержание

| WebReference

Элемент <caption> (от англ. caption — заголовок) предназначен для создания заголовка к таблице и может размещаться только внутри контейнера <table>, причём сразу после открывающего тега. Такой заголовок представляет собой текст, по умолчанию отображаемый перед таблицей и описывающий её содержание.

Синтаксис

<table>
 <caption>Текст</caption>
 <tr>
  <td>...</td>
 </tr>
</table>

Атрибуты

align
Определяет выравнивание заголовка относительно таблицы.

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

Пример

<!DOCTYPE HTML> <html> <head> <meta charset=»utf-8″> <title>CAPTION</title> <style> table { width: 100%; } td { border: 1px solid #000; padding: 4px; } </style> </head> <body> <table> <caption>Таблица 3. 2. Демонстрация катаболических процессов организма</caption> <tr> <th>&nbsp;</th><th>Чебурашка</th> <th>Крокодил Гена</th><th>Шапокляк</th> </tr> <tr> <td>Съел, кг</td><td>5</td> <td>2</td><td>1</td> </tr> <tr> <td>Выпил, л</td><td>6</td> <td>8</td><td>2</td> </tr> <tr> <td>Смог, раз</td><td>5</td> <td>5</td><td>1</td> </tr> </table> </body> </html>

Результат данного примера показан на рис. 1.

Рис. 1. Вид заголовка таблицы

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

СпецификацияСтатус
WHATWG HTML Living StandardЖивой стандарт
HTML5Рекомендация
HTML 4. 01 SpecificationРекомендация
Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

312
1		711
1161
Браузеры

В таблице браузеров применяются следующие обозначения.

  • — элемент полностью поддерживается браузером;
  • — элемент браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

Таблицы

См. также

  • Заголовок таблицы

Рецепты

  • Как выровнять заголовок таблицы по левому краю?
  • Как разместить заголовок внизу таблицы?

Практика

  • Заголовок таблицы

Элементы HTML

Атрибуты

Значения

Типы элементов

Аудио и видео

Документ

Изображения

Объекты

Скрипты

Списки

Ссылки

Таблицы

Текст

Формы

Фреймы

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

HTML теги

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

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

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

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

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

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

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

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

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

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

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

Атрибуты

АтрибутЗначениеОписание
alignleft
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 было бы предпочтительнее и давало бы более гибкие возможности.

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

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

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

Объединение столбцов в элементах <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 теги

: Элемент заголовка таблицы — HTML: язык гипертекстовой разметки

HTML-элемент определяет заголовок (или заголовок) таблицы.

Этот элемент включает глобальные атрибуты.

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

Следующие атрибуты устарели и не должны использоваться. Они задокументированы ниже для справки при обновлении существующего кода и только для исторического интереса.

выровнять Устаревший

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

.
слева

Заголовок отображается слева от таблицы.

верх

Заголовок отображается над таблицей.

справа

Заголовок отображается справа от таблицы.

снизу

Заголовок отображается под таблицей.

Предупреждение: Не используйте этот атрибут, так как он устарел. Элемент должен быть оформлен с использованием свойств CSS caption-side и text-align .

Если используется, элемент должен быть первым дочерним элементом своего родительского элемента

.

Если элемент

, содержащий 
 заголовок {
  сторона заголовка: сверху;
}
стол {
  граница коллапса: коллапс;
  интервал между границами: 0px;
}
стол,
й,
тд {
  граница: 1px сплошной черный;
}
, является единственным потомком элемента
, следует использовать элемент
вместо
.

Фоновый цвет в таблице не будет включать заголовок. Добавить background-color к элементу

, если вы хотите, чтобы один и тот же цвет был позади обоих.

В этом простом примере представлена ​​таблица с заголовком.

 <таблица>
  <заголовок>
    Пример подписи
Войти Электронная почта
пользователь1 [email protected]
пользователь2 [email protected]
Категории контента Нет.
Разрешенный контент Текущее содержимое.
Отсутствие тега Конечный тег можно опустить, если сразу за элементом не следует Пробелы ASCII или комментарий.
Разрешенные родители Элемент в качестве его первого потомка.
Неявная роль ARIA подпись
Разрешенные роли ARIA Нет роль разрешено
Интерфейс DOM HTMLTableCaptionElement
Спецификация
HTML Standard
# the-caption-element

Таблицы BCD загружаются только в браузере с включенным JavaScript. Включите JavaScript для просмотра данных.

  • Свойства CSS, которые могут быть особенно полезны для стилизации элемента
:
  • выравнивание по тексту , сторона заголовка .

Нашли проблему с содержанием этой страницы?

  • Отредактируйте страницу на GitHub.
  • Сообщить о проблеме с содержимым.
  • Просмотрите исходный код на GitHub.

Хотите принять более активное участие?

Узнайте, как внести свой вклад.

Последний раз эта страница была изменена участниками MDN.

Вот код для его создания »

В тегах HTML

Раскрытие информации: Ваша поддержка помогает сайту работать! Мы зарабатываем комиссионные за некоторые услуги, которые мы рекомендуем на этой странице. Узнать больше

Элемент
HTML-таблицы: узнайте, когда их использовать (и когда следует избегать)
Что делает HTML-заголовок таблицы: вот код для создания таблицы ?
Элемент
 используется для добавления подписи к таблице HTML. должен появиться в HTML-документе как первый потомок родительской, но он может быть расположен визуально внизу таблицы с помощью CSS.
Дисплей
Блок
Применение
Текст

Содержание

  • 1 Код Пример
  • 2 Установка неуклюжих по умолчанию

Любимые цвета
ИмяЛюбимый цвет
БобЖелтый
МишельФиолетовый
Favorite Colors
Name Favorite Color
Bob Yellow
Michelle Purple

Fixing the awkward default

The

is an underused element , и отчасти причина этого, вероятно, в том, что заголовок таблицы по умолчанию размещается над таблицей. На самом деле это не имеет смысла, так как обычное размещение подписи в других контекстах (печать, иллюстрации или даже
и
элементов в HTML5), находится под элементом с подписью. Это легко решается с помощью свойства CSS caption-side .

 .better-table caption { caption-side: bottom; } 
 
 Любимые цвета 
 Имя Любимый цвет 
 
 Боб Желтый 
 
 Мишель Фиолетовый

.better-table caption { caption-side: bottom; }

Любимые цвета
Имя Любимый цвет
Боб Желтый
Michelle Wh .

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

All All All All All All

Attributes of caption

Attribute name Values ​​ Notes
align
Используется для контроля горизонтального выравнивания заголовка таблицы.

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

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