Table html caption: Тег | htmlbook.ru — Вебджем.рф | Создание и продвижение сайтов

Содержание

caption-side | htmlbook.ru

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
8.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

Краткая информация

Значение по умолчанию	top
Наследуется	Да
Применяется	К <caption> или ко всем элементам, у которых значение display установлено как table-caption.
Ссылка на спецификацию	http://www.w3.org/TR/CSS21/tables.html#propdef-caption-side

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

Определяет положение заголовка таблицы, который задается с помощью тега <caption>, относительно самой таблицы. Свойство caption-side выводит заголовок до или после таблицы, а выравнивание текста по правому или левому краю устанавливается через свойство text-align. Браузер Firefox также поддерживает расположение заголовка слева или справа от таблицы, но эти значения не входят в спецификацию CSS.

Синтаксис

CSS2.1	caption-side: top \| bottom
CSS3	caption-side: top \| bottom \| left \| right

Значения

top: Располагает заголовок по верхнему краю таблицы.
bottom: Заголовок располагается под таблицей.
left: Заголовок размещается слева от таблицы. Это значение работает только в браузерах Firefox.
right: Заголовок размещается справа от таблицы. Это значение работает только в браузерах Firefox.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE htm>
<html>
 <head>
  <meta charset="utf-8">
  <title>caption-side</title>
  <style>
    table {
     width: 100%; /* Ширина таблицы */ 
     border-collapse: collapse; /* Убираем двойную рамку между ячейками */ 
    }
    td {
     border: 1px solid green; /* Параметры границы */ 
     padding: 5px; /* Поля в ячейке */ 
    }
    caption { 
     caption-side: bottom; /* Заголовок под таблицей */ 
    }
   </style>
  </head>
  <body>
   <table>
    <caption>Расклад карт</caption>
    <tr>
     <td>&nbsp;</td><td>&spades;</td><td>&clubs;</td><td>&hearts;</td>
     <td>&diams;</td>
    </tr>
    <tr>
     <td>Чебурашка</td><td>6</td><td>3</td><td>1</td><td>3</td>
    </tr>
    <tr>
     <td>Крокодил Гена</td><td>1</td><td>5</td><td>5</td><td>2</td>
    </tr>
    <tr>
     <td>Шапокляк</td><td>3</td><td>4</td><td>6</td><td>0</td>
    </tr>
    <tr>
     <td>Крыса Лариса</td><td>3</td><td>1</td><td>1</td><td>8</td>
    </tr>
   </table>
 </body>
</html>

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

Рис. 1. Результат использования caption-side

Объектная модель

[window.]document.getElementById(«elementID»).style.captionSide

Таблица

CSS по теме

caption-side

Статьи по теме

Рецепты CSS

HTML/Элемент caption

Синтаксис

(X)HTML

<table>
  <caption> ... </caption>
  <thead> ... </thead>
  <tbody> ... </tbody>
</table>

Описание

Элемент caption (от англ. «caption» ‒ «подпись, надпись») создаёт колонтитул таблицы (поясняющая надпись, заголовок). По умолчанию созданный колонтитул располагается над таблицей.

Примечание

По умолчанию текст вложенный в данный элемент выравнивается по центу. (Выравнивание можно изменить с помощью CSS свойств : «text-align» или «caption-side».)

Условия использования

Элемент caption должен быть вложен в элемент table (сразу после открывающего тега «<table>») и быть единственными в таблице.

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

Chrome

Поддерж.

Firefox

Поддерж.

Opera

Поддерж.

Maxthon

Поддерж.

IExplorer

Поддерж.

Safari

Поддерж.

iOS

Поддерж.

Android

Поддерж.

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

Верс.	Раздел
HTML
2.0	—
3.2	Tables
4.01	11.2.2 Table Captions: The CAPTION element DTD: `Transitional Strict Frameset`
5.0	4.9.2 The caption element
5.1	4.9. 2. The caption element
XHTML
1.0	Extensible HyperText Markup Language DTD: `Transitional Strict Frameset`
1.1	Extensible HyperText Markup Language

Атрибуты

align: Положение колонтитула.
valign: Положение колонтитула и вертикальное выравнивание его содержимого.
Глобальные атрибуты: accesskey, class, contenteditable, contextmenu, data-*, dir, draggable, dropzone, hidden, id, inert, lang, spellcheck, style, tabindex, title, translate, xml:lang

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

Листинг кода

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Элемент caption</title>
<link type=»text/css» href=»ex-style. css» rel=»stylesheet»>
</head>
<body>
<h2>Пример с элементом «caption»</h2>
<table>
<caption> Заголовок таблицы </caption>
<tbody>
<tr>
<td> 1 ячейка </td><td> 2 ячейка </td><td> …n ячейка </td>
</tr>
</tbody>
</table>
</body>
</html>

Элемент caption

HTML: тег

В этом руководстве по HTML объясняется, как использовать элемент HTML, называемый тегом , с синтаксисом и примерами.

Описание

Тег HTML определяет заголовок таблицы в документе HTML. Браузеры традиционно отображают текст, содержащийся в теге над таблицей, но вы можете изменить это поведение с помощью свойства CSS caption-side. Этот тег также часто называют элементом.

Синтаксис

В HTML синтаксис тега :

 
<таблица>
  Стоимость фруктов
  
    
 Элемент
    Сумма
  
  
    Бананы
    $5
  
  
    Апельсины
    $17

Пример вывода

Атрибуты

В дополнение к глобальным атрибутам, ниже приведен список атрибутов, специфичных для тега:

Атрибут	Описание	HTML-совместимость
выровнять	Перечисленный атрибут, указывающий, как заголовок выравнивается в таблице. Это может быть одно из следующих значений: слева — означает, что заголовок отображается слева от таблицы вверху — означает, что заголовок отображается над таблицей справа — означает, что заголовок отображается справа от таблицы внизу — означает, что заголовок находится под таблицей	Устарело в HTML 4.01, Устарело в HTML5 (Вместо этого используйте свойства CSS, такие как text-align и caption-side)

Примечание

HTML-элемент находится внутри тега.

Тег — это первый тег, который появляется после тега.

Тег

состоит из тегов, определяет строки таблицы. В таблице должна быть хотя бы одна строка.

Тег

В этом примере документа HTML5 мы создали таблицу с помощью тега

над таблицей, но это поведение можно изменить с помощью свойства CSS caption-side.

Совместимость с браузерами
Тег
Заголовок столбца 1	Заголовок столбца 2	Заголовок столбца 3
и	. Тег
определяет ячейки заголовков в таблице, которые отображаются жирным шрифтом с выравниванием по центру. Тег	определяет стандартные ячейки в таблице, которые отображаются как обычный текст с выравниванием по левому краю. Большинство браузеров отображают тег
Данные в столбце 1, строке 2	Данные в столбце 2, строке 2	Данные в столбце 3, строке 2
Данные в столбце 1, строке 3	Данные в столбце 2, строке 3	Данные в столбце 3, строке 3
Данные в столбце 1, строке 4	Данные в столбце 2, строке 4	Данные в столбце 3, строке 4