diff options
Diffstat (limited to 'files/de/web/css/caption-side/index.html')
| -rw-r--r-- | files/de/web/css/caption-side/index.html | 153 |
1 files changed, 153 insertions, 0 deletions
diff --git a/files/de/web/css/caption-side/index.html b/files/de/web/css/caption-side/index.html new file mode 100644 index 0000000000..042981c576 --- /dev/null +++ b/files/de/web/css/caption-side/index.html @@ -0,0 +1,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> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<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> |