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
|
---
title: <caption>
slug: Web/HTML/Element/caption
translation_of: Web/HTML/Element/caption
---
<h2 id="Zusammenfassung">Zusammenfassung</h2>
<p>Das <strong>HTML-Element <code><caption></code> </strong>(oder auch HTML-Tabellenüberschrift-Element) stellt den Titel einer Tabelle dar. Somit ist dieses immer das erste untergeordnete Element einer Tabelle ({{HTMLElement("table")}}). Das Layout wird über CSS festegelegt, es ist relativ zur Tabelle.</p>
<table class="properties">
<tbody>
<tr>
<th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Inhaltskategorie</a></th>
<td>Keine</td>
</tr>
<tr>
<th scope="row">erlaubter Inhalt</th>
<td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Fließender Inhalt</a>.</td>
</tr>
<tr>
<th scope="row">Auslassbare Tags</th>
<td>{{no_tag_omission}}</td>
</tr>
<tr>
<th scope="row">erlaubte elterliche Elemente</th>
<td>A {{HTMLElement("table")}} element, as its first descendant.</td>
</tr>
<tr>
<th scope="row">DOM-Schnittstelle</th>
<td>{{domxref("HTMLTableCaptionElement")}}</td>
</tr>
</tbody>
</table>
<h2 id="Attribute">Attribute</h2>
<p>Dieses Dokument unterstützt die <a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">globalen Attribute</a>.</p>
<dl>
<dt>{{htmlattrdef("align")}} {{deprecatedGeneric('inline','HTML4.01')}} {{obsoleteGeneric('inline','HTML5')}}</dt>
<dd>This enumerated attribute indicates how the caption must be aligned with respect to the table. It may have the following values:
<ul>
<li><code>left</code>, displayed to the left of the table</li>
<li><code>top</code>, displayed before the the table</li>
<li><code>right</code>, displayed to the right of the table</li>
<li><code>bottom</code>, displayed under the table</li>
</ul>
<div class="note"><strong>Usage note: </strong>Do not use this attribute, as it has been deprecated: the {{HTMLElement("caption")}} element should be styled using <a href="/en-US/docs/CSS" title="CSS">CSS</a>. To give a similar effect to the <code>align</code> attribute, use the the <a href="/en-US/docs/CSS" title="CSS">CSS</a> properties {{cssxref("caption-side")}} and {{cssxref("text-align")}}.</div>
</dd>
</dl>
<h2 id="Examples">Examples</h2>
<p>Please see the {{HTMLElement("table")}} page for examples on {{HTMLElement("caption")}}</p>
<h2 id="Specifications" name="Specifications">Specifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', 'tabular-data.html#the-caption-element', '<caption>')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', 'tabular-data.html#the-caption-element', '<caption>')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('HTML4.01', 'struct/tables.html#h-11.2.2', '<caption>')}}</td>
<td>{{Spec2('HTML4.01')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoDesktop("1.0")}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Edge</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoMobile("1.0")}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="See_also">See also</h2>
<ul>
<li>Other table-related HTML Elements: {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}};</li>
<li>CSS properties that may be specially useful to style the {{HTMLElement("caption")}} element:
<ul>
<li>{{cssxref("text-align")}}, {{cssxref("caption-side")}}.</li>
</ul>
</li>
</ul>
<p>{{HTMLRef}}</p>
|
