Для чего применяется тег caption

The HTML Table Caption element ( ) specifies the caption (or title) of a table, and if used is always the first child of a element represents tabular data - that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data.">

. Its styling and physical position relative to the table may be changed using the CSS on the specified side. The values are relative to the writing-mode of the table."> caption-side and text-align properties.

The source for this interactive example is stored in a GitHub repository. If you"d like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

... .

Ячейка заголовка таблицы помещается в элемент

(при этом содержимое отображается жирным начертанием и выравнивается по центру).

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

.

Наименование таблицы, если оно требуется размещается внутри элемента

(необязательный элемент). Обращаю Ваше внимание, что если Вы планируете использовать данный элемент в своей таблице, то он должен следовать в документе сразу за элементом
Content categories None.
Permitted content Flow content .
Tag omission The end tag can be omitted if the element is not immediately followed by ASCII whitespace or a comment.
Permitted parents A element represents tabular data - that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data."> element, as its first descendant.
Permitted ARIA roles None
DOM interface HTMLTableCaptionElement

Attributes

Obsolete attributes

The following attributes are obsolete and should not be used. They are documented below for reference when updating existing code and for historical interest only.

align This enumerated attribute indicates how the caption must be aligned with respect to the table. It may have one of the following values: left The caption is displayed to the left of the table. top The caption is displayed above the table. right The caption is displayed to the right of the table. bottom The caption is displayed below the table.

Usage notes

When the element represents tabular data - that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data.">

element that contains the element."> , element defines a group of columns within a table."> , element represents tabular data - that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data.">
is the only descendant of a (Figure With Optional Caption) element represents self-contained content, potentially with an optional caption, which is specified using the (
) element.">
element, you should use the or Figure Caption element represents a caption or legend describing the rest of the contents of its parent
element.">
element instead of
.

Example

This simple example presents a table that includes a caption.

Example Caption
Login Email
user1 [email protected]
user2 [email protected]

Caption { caption-side: top; align: right; } table { border-collapse: collapse; border-spacing: 0px; } table, th, td { border: 1px solid black; }

table {background: red;} do not alter caption. For that you need display: block .

Specifications

Specification Status Comment
HTML Living Standard
The definition of "
" in that specification.
Living Standard
HTML5
The definition of "
" in that specification.
Recommendation
HTML 4.01 Specification
The definition of "
" in that specification.
Recommendation

Browser compatibility

The compatibility table in this page is generated from structured data. If you"d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
caption Chrome Full support Yes Edge Full support Yes Firefox Full support 1 IE Full support Yes Opera Full support Yes Safari Full support Yes
align

Deprecated

Chrome Full support Yes Edge Full support Yes Firefox Full support 1 IE Full support Yes Opera Full support Yes Safari Full support Yes WebView Android Full support Yes Chrome Android Full support Yes Firefox Android Full support 4 Opera Android Full support Yes Safari iOS Full support Yes Samsung Internet Android Full support Yes

Legend

Full support Full support Deprecated. Not for use in new websites.

See also

  • Other table-related HTML Elements: element defines a column within a table and is used for defining common semantics on all common cells. It is generally found within a
, ) encapsulates a set of table rows ( elements), indicating that they comprise the body of the table (
)."> , element defines a cell of a table that contains data. It participates in the table model."> , element defines a cell as header of a group of table cells. The exact nature of this group is defined by the scope and headers attributes."> , element defines a row of cells in a table. The row" s cells can then be established using a mix of> (data cell) and ;
  • CSS properties that may be specially useful to style the

    • HTML надпись над таблицей

    HTML caption - надпись над таблицей

    Теги

    HTML

    определяют надпись над таблицей:

    Результат:

    В XHTML спецификации также присутствуют теги

    .

    Распространение компьютерной коммуникации

    Ранние эксперименты, связанные с передачей и получением информации с помощью компьютеров, стартуют в крупных научных центрах в середине 50-х годов ХХ-го века. Но уже спустя десять лет, в конце 60-х, служба по управлению перспективными исследовательскими проектами при Министерстве обороны США (DARPA) создает компьютерную сеть национального масштаба. В 1969 году DARPA разрабатывает первую в мире глобальную сеть ARPANET (Advanced Research Projects Agency Network), которая предшествует появлению интернета. Первоначально ARPANET имеет экспериментальный характер, служит в качестве связи между научными центрами посредством кабельной сети и специализированных программ. С помощью этой сети координируются научные группы, работающие над научно техническими проектами. Сотрудники лабораторий обменивают между собой информацию различного типа. Первый узел ARPANET создан в 1969 году в Калифорнийском университете в Лос-Анджелесе. Постепенно сеть разрастается в академической среде и в рамках крупных электронных корпораций. Университетское происхождение паутины, предшествующей интернету, имеет решающее значение для развития и распространения компьютерной коммуникации.

    Атрибут align

    Атрибут align , тега

    Обязательный атрибут: нет.

    Пример HTML: применение атрибута align

    seodon.ru - Тег CAPTION, атрибут align

    , element defines a set of rows summarizing the columns of the table.">
    , element defines a set of rows defining the head of the columns of the table.">
    (header cell) elements.">
    , задает положение заголовка относительно таблицы.

    Значения

    Значением атрибута является одно из ключевых слов.

    • bottom - Заголовок под таблицей, по центру.
    • left - Internet Explorer и Opera оставляют заголовок над таблицей и прижимают к левому краю. Mozilla Firefox располагает его слева от таблицы, оттеснив ее вправо. И если ширина таблицы 100%, то она уйдет за край экрана и появится горизонтальный скроллинг.
    • right - Internet Explorer и Opera оставляют заголовок над таблицей и прижимают к правому краю. Mozilla Firefox располагает его справа от таблицы, оттеснив ее влево. И если ширина таблицы 100%, то заголовок уйдет за край экрана и появится горизонтальный скроллинг.
    • top - Заголовок сверху таблицы, по центру.

    Значение по умолчанию: top.

    Синтаксис

    ...
    Воздействие алкоголя на организм человека.
    Алк., 40°МЖ
    0 л.
    0,5 л.
    1 л.

    Результат.

    Поддержка версиями HTML

    Google Chrome и Safari не понимают значения left, right .

    Атрибуты

    align выраванивание заголовка относительно таблицы
    • left — заголовок сверху таблицы, выровнен под левый край
      В Firefox заголовок располагается слева таблицы!
    • right — заголовок сверху таблицы, выровнен под правый край
      В Firefox заголовок располагается справа таблицы!
    • center — заголовок сверху таблицы, выровнен по центру
      Не входит в спицификацию HTML 4. Вместо него рекомендуется использовать top
    • top — заголовок сверху таблицы, выровнен по центру (по умолчанию)
    • bottom — заголовок ниже таблицы, выровнен по центру
    Не рекомендуется в спецификации HTML 4.01!
    class определяет имя используемого класса
    dir определяет направление символов:
    • ltr - слева направо
    • rtl - справа налево
    id уникальный индетификатор
    lang определяет язык отображаемого документа
    style задает встроенную таблицу стилей
    onclick щелчок на элементе
    ondblclick двойной щелчок на элементе
    onkeydown нажатие клавиши, когда элемент имеет фокус
    onkeypress нажатие и освобождении клавиши, когда элемент имеет фокус
    onkeyup освобождение ранее нажатой клавиши, когда элемент имеет фокус
    onmousedown нажатие кнопки мыши, когда элемент имеет фокус
    onmousemove движение указателя мыши, когда элемент имеет фокус
    onmouseout смещение указателя мыши с элемента
    onmouseover помещение указателя мыши на элемент
    onmouseup освобождение ранее нажатой кнопки мыши, когда элемент имеет фокус
    title задает расшифровку аббревиатуры, показывается в виде всплывающей подсказки
    valign выраванивание заголовка относительно таблицы.
    Применяется только в IE. Может комбинироваться с align
    • top — заголовок сверху таблицы (по умолчанию)
    • bottom — заголовок ниже таблицы
    Отсутствует в спецификации HTML 4.01!

    Пример

    приведен только код заголовка таблицы



    Таблица 1. Комбинируем align и valign

    • закрывающий тег обязателен ()
    • должен располагаться в контейнере < >, причем непосредственно за открывающим table
    • для каждой таблицы может быть только один
    • обязательных нет
    • ширина заголовка равна ширине таблицы
    • разные браузеры отображают элемент по разному
    • большинство браузеров по умолчанию выравнивают содержимое
    по центру
    Твой код:
    Таблица 1. Комбинируем align и valign
    align="left"align="right"align="top"align="bottom"align="center"
    valign="top" Заголовок слева вверху;
    FF - слева таблицы    		 Заголовок справа вверху;
    FF - справа таблицы    		 Заголовок вверху по центру Заголовок внизу по центру;
    IE - вверху по центру    		 Заголовок вверху по центру
    valign="bottom" Opera - заголовок слева вверху;
    IE - слева внизу;
    FF - слева таблицы    		 Opera - заголовок справа вверху;
    IE - справа внизу;
    FF - справа таблицы    		 Заголовок вверху по центру;
    IE - внизу по центру    		 Заголовок внизу по центру Заголовок вверху по центру;
    IE - внизу по центру
    valign не задан cм. valign="top" cм. valign="top" cм. valign="top" Заголовок внизу по центру cм. valign="top"
    Сделай код и жми тут
    HTML теги

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

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

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

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

    ..
    .

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

    ... ...
    ...
    .

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

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

    Тег
    Opera
    IExplorer
    Edge
    Да Да Да Да Да Да

    Атрибуты

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

    Пример таблицы, составленной на HTML<span> border = "1" >
    Элементарная таблица
    Ячейка заголовка 1 Ячейка заголовка 2 Ячейка заголовка 3
    Ячейка данных 1 Строка 2 Ячейка данных 2 Строка 2 Ячейка данных 3 Строка 2
    Ячейка данных 1 Строка 3 Ячейка данных 2 Строка 3 Ячейка данных 3 Строка 3

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

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

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

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

    Пример таблицы с объединёнными столбцами<span> border = "1" >
    Элементарная таблица
    Ячейка заголовка 1 Ячейка заголовка 2
    Ячейка данных 1 Строка 2 Ячейка данных 2 Строка 2 Ячейка данных 3 Строка 2
    Ячейка данных 1 Строка 3 Ячейка данных 2 Строка 3 Ячейка данных 3 Строка 3

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

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

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

    Пример таблицы с объединёнными столбцами и строками<span>
    Элементарная таблица
    colspan = "2" > Ячейка заголовка 1 Ячейка заголовка 2
    rowspan = "2" > Ячейка данных 1 Строка 2 Ячейка данных 2 Строка 2 Ячейка данных 2 Строка 3
    Ячейка данных 2 Строка 3 Ячейка данных 3 Строка 3

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

    Еще на эту тему:

    Скачать Driver Sweeper – программа для удаления драйверов из OC Windows Скачать программу для удаления драйверов карты Скачать Driver Sweeper – программа для удаления драйверов из OC Windows Скачать программу для удаления драйверов карты
    Выкидывает на рабочий стол Sniper Elite V2 Что делать если лагает sniper elite 3 Выкидывает на рабочий стол Sniper Elite V2 Что делать если лагает sniper elite 3
    Поиск похожей фотографии в интернет Поиск похожей фотографии в интернет