files/ru/web/html/element/caption/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154

---
title: '<caption>: The Table Caption element'
slug: Web/HTML/Element/caption
tags:
  - Выравнивание
  - Заголовок
  - Стилизация
translation_of: Web/HTML/Element/caption
---
<div>{{HTMLRef}}</div>

<p><span class="seoSummary"><strong>HTML</strong> элемент заголовка таблицы (<strong><code>&lt;caption&gt;</code></strong>) определяет название (заголовок) таблицы. Если этот элемент используется, он <em>всегда</em> должен быть первым вложенным элементом тэга {{HTMLElement("table")}}.</span> Внешний вид и расположение заголовка по отношению к самой таблице может быть изменено с помощью стилей CSS {{cssxref("caption-side")}} and {{cssxref("text-align")}}.</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Категории контента</a></th>
   <td>Нет</td>
  </tr>
  <tr>
   <th scope="row">Разрешенное содержимое</th>
   <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Потоковый контент</a>.</td>
  </tr>
  <tr>
   <th scope="row">Парность тегов</th>
   <td>Конечный тег может быть опущен, если элемент не следует сразу за ASCII пробелом или комментарием.</td>
  </tr>
  <tr>
   <th scope="row">Разрешенные родители</th>
   <td>Элемент {{HTMLElement("table")}} как его первый потомок</td>
  </tr>
  <tr>
   <th scope="row">Разрешенные ARIA-роли</th>
   <td>Нет</td>
  </tr>
  <tr>
   <th scope="row">DOM interface</th>
   <td>{{domxref("HTMLTableCaptionElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Атрибуты">Атрибуты</h2>

<p>Этот элемент включает  <a href="/en-US/docs/HTML/Global_attributes">глобальные атрибуты</a>.</p>

<h3 id="Устаревшие_атрибуты">Устаревшие атрибуты</h3>

<p>Следующие атрибуты устаревшие и не должны использоваться. Они описаны ниже для справки при обновлении кода и для общего сведения.</p>

<dl>
 <dt>{{htmlattrdef("align")}} {{obsolete_inline}}</dt>
 <dd>Этот пронумерованный атрибут указывает как заголовок должен быть выравнен по отношению к таблице. Он может иметь одно или несколько следующих значений :
 <dl>
  <dt><code>left</code></dt>
  <dd>Заголовок отображается слева от таблицы.</dd>
  <dt><code>top</code></dt>
  <dd>Заголовок отображается над таблицей.</dd>
  <dt><code>right</code></dt>
  <dd>Заголовок отображается справа от таблицы.</dd>
  <dt><code>bottom</code></dt>
  <dd>Заголовок отображается под таблицей.</dd>
 </dl>

 <div class="note"><strong>Примечание к использованию: </strong>Не используйте этот атрибут, так как он устарел. Элемент {{HTMLElement("caption")}} должен быть стилизован с использованием свойств <a href="/en-US/docs/CSS">CSS</a> {{cssxref("caption-side")}} и{{cssxref("text-align")}}.</div>
 </dd>
</dl>

<h2 id="Примечание_к_использованию">Примечание к использованию</h2>

<p>Когда элемент {{HTMLElement("table")}}, содержащий <code>&lt;caption&gt;</code> является единственным потомком элемента {{HTMLElement("figure")}}, вам следует использовать элемент {{HTMLElement("figcaption")}} вместо <code>&lt;caption&gt;</code>.</p>

<h2 id="Пример">Пример</h2>

<p>Просто пример, представляющий таблицу, которая содержит  заголовок.</p>

<pre class="brush: html">&lt;table&gt;
  &lt;caption&gt;Example Caption&lt;/caption&gt;
  &lt;tr&gt;
    &lt;th&gt;Login&lt;/th&gt;
    &lt;th&gt;Email&lt;/th&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;user1&lt;/td&gt;
    &lt;td&gt;user1@sample.com&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;user2&lt;/td&gt;
    &lt;td&gt;user2@sample.com&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;</pre>

<div class="hidden">
<pre class="brush: css">caption {
  caption-side: top;
  align: right;
}
table {
  border-collapse: collapse;
  border-spacing: 0px;
}
table, th, td {
  border: 1px solid black;
}
</pre>
</div>

<p>{{EmbedLiveSample('Example', 650, 100)}}</p>

<h2 id="Спецификации">Спецификации</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Спецификация</th>
   <th scope="col">Статус</th>
   <th scope="col">Комментарий</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'tables.html#the-caption-element', '&lt;caption&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'tabular-data.html#the-caption-element', '&lt;caption&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'struct/tables.html#h-11.2.2', '&lt;caption&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>


<p>{{Compat("html.elements.caption")}}</p>

<h2 id="Смотрите_также">Смотрите также</h2>

<ul>
 <li>Другие связанные с таблицей HTML элементы: {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}};</li>
 <li>CSS свойства, которые могут быть применены для стилизации элемента {{HTMLElement("caption")}}:
  <ul>
   <li>{{cssxref("text-align")}}, {{cssxref("caption-side")}}.</li>
  </ul>
 </li>
</ul>