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
|
---
title: caption-side
slug: Web/CSS/caption-side
tags:
- CSS
- CSS Eigenschaft
- CSS Tabellen
- Layout
- Referenz
translation_of: Web/CSS/caption-side
---
<div>{{CSSRef}}</div>
<p>Die <a href="/de/docs/Web/CSS" title="CSS">CSS</a> Eigenschaft <strong><code>caption-side</code></strong> positioniert den Inhalt einer {{HTMLElement("caption") }} einer Tabelle auf der angegebenen Seite.</p>
<div>{{EmbedInteractiveExample("pages/css/caption-side.html")}}</div>
<p class="hidden">Die Quelle für dieses interaktive Beispiel ist in einem GitHub-Repository gespeichert. Wenn Sie zum Projekt der interaktiven Beispiele beitragen möchten, klonen Sie bitte <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> und senden Sie uns eine Pull-Anfrage.</p>
<h2 id="Syntax" name="Syntax">Syntax</h2>
<pre class="brush:css no-line-numbers notranslate">/* Directional values */
caption-side: top;
caption-side: bottom;
/* Warning: non-standard values */
caption-side: left;
caption-side: right;
caption-side: top-outside;
caption-side: bottom-outside;
/* Global values */
caption-side: inherit;
caption-side: initial;
caption-side: unset;
</pre>
<p>Die Eigenschaft <code>caption-side</code> property wird als einer der unten aufgeführten Schlüsselwortwerte angegeben.</p>
<h3 id="Werte">Werte</h3>
<dl>
<dt><code>top</code></dt>
<dd>Die Überschriftenbox soll oberhalb der Tabelle positioniert werden.</dd>
<dt><code>bottom</code></dt>
<dd>Die Überschriftenbox soll unterhalb der Tabelle positioniert werden.</dd>
<dt><code>left</code> {{ non-standard_inline() }}</dt>
<dd>Die Überschriftenbox soll links von der Tabelle positioniert werden.</dd>
<dd>
<div class="note"><strong>Hinweis:</strong> Dieser Wert wurde für CSS 2 vorgeschlagen, aber aus der endgültigen CSS 2.1-Spezifikation entfernt. Er ist nicht standardisiert.</div>
</dd>
<dt><code>right</code> {{ non-standard_inline() }}</dt>
<dd>Die Überschriftenbox soll rechts von der Tabelle positioniert werden.</dd>
<dd>
<div class="note"><strong>Hinweis:</strong> Dieser Wert wurde für CSS 2 vorgeschlagen, aber aus der endgültigen CSS 2.1-Spezifikation entfernt. Er ist nicht standardisiert.</div>
</dd>
<dt><code>top-outside</code> {{non-standard_inline}}</dt>
<dd>Das Überschriftenbox sollte oberhalb der Tabelle positioniert werden, während die Breite und das horizontale Ausrichtungsverhalten nicht an das horizontale Layout der Tabelle gebunden sind.</dd>
<dd>
<div class="note">Die CSS 2.1-Spezifikation stellt fest, dass die CSS 2-Spezifikation ein anderes Verhalten für den <code>top</code> Wert beschrieben hat, der in einer zukünftigen Spezifikation durch diesen Wert wieder eingeführt wird.</div>
</dd>
<dt><code>bottom-outside</code> {{non-standard_inline}}</dt>
<dd>Das Überschriftenbox sollte unterhalb der Tabelle positioniert werden, während die Breite und das horizontale Ausrichtungsverhalten nicht an das horizontale Layout der Tabelle gebunden sind.</dd>
<dd>
<div class="note">Die CSS 2.1-Spezifikation stellt fest, dass die CSS 2-Spezifikation ein anderes Verhalten für den <code>bottom</code> Wert beschrieben hat, der in einer zukünftigen Spezifikation durch diesen Wert wieder eingeführt wird</div>
</dd>
</dl>
<h2 id="Formale_Definition">Formale Definition</h2>
<p>{{cssinfo}}</p>
<h2 id="Formale_Syntax">Formale Syntax</h2>
{{csssyntax}}
<h2 id="Beispiele">Beispiele</h2>
<h3 id="Setting_captions_above_and_below" name="Setting_captions_above_and_below">Setzen von Beschriftungen oben und unten</h3>
<h4 id="HTML">HTML</h4>
<pre class="brush: html notranslate"><table class="top">
<caption>Caption ABOVE the table</caption>
<tr>
<td>Some data</td>
<td>Some more data</td>
</tr>
</table>
<br>
<table class="bottom">
<caption>Caption BELOW the table</caption>
<tr>
<td>Some data</td>
<td>Some more data</td>
</tr>
</table>
</pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: css notranslate">.top caption {
caption-side: top;
}
.bottom caption {
caption-side: bottom;
}
table {
border: 1px solid red;
}
td {
border: 1px solid blue;
}
</pre>
<h4 id="Ergebnis">Ergebnis</h4>
<p>{{EmbedLiveSample('Setting_captions_above_and_below', 'auto', 160)}}</p>
<h2 id="Spezifikationen">Spezifikationen</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spezifikation</th>
<th scope="col">Status</th>
<th scope="col">Kommentar</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ SpecName('CSS Logical Properties', '#caption-side', 'caption-side') }}</td>
<td>{{ Spec2('CSS Logical Properties') }}</td>
<td>Definiert die oberen <code>top</code> und unteren <code>bottom</code> Werte relativ zum Schreibmodus <code>writing-mode</code> Wert.</td>
</tr>
<tr>
<td>{{ SpecName('CSS2.1', 'tables.html#caption-position', 'caption-side') }}</td>
<td>{{ Spec2('CSS2.1') }}</td>
<td>Ursprüngliche Definition</td>
</tr>
</tbody>
</table>
<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
<div class="hidden">Die Kompatibilitätstabelle auf dieser Seite wird aus strukturierten Daten generiert. Wenn Sie zu den Daten beitragen möchten, besuchen Sie bitte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> und senden Sie uns eine Pull-Anfrage.</div>
<p>{{Compat("css.properties.caption-side")}}</p>
|
