CSS-Eigenschaft: caption-side, Kategorien: Tabellen (allgemein), Tables (CSS 2.1)
Positionierung der Tabellenüberschrift
Definiert, ob eine Tabellenüberschrift (CAPTION) über oder unter der Tabelle angezeigt wird.
| Kurzbeschreibung | Werte | Standardwert | Kategorie | Hinweis |
|---|---|---|---|---|
| Positionierung der Tabellenüberschrift |
| top |
Verwandte Eigenschaften aus der Kategorie: Tabellen (allgemein), Tables (CSS 2.1):
- border-collapse
- border-spacing
- Aktuelle Seite: caption-side
- empty-cells
- table-layout
- vertical-align
Folgendes ist beim Einsatz von caption-side zu beachten:
- Nicht sonderlich viel ;-)
- caption-side hat zwei mögliche Parameter, top als Standardwert, bottom als Wert, um die Tabellenüberschrift unterhalb der Tabelle auszuspielen.
- Im Beispiel Nr. 3 wird deutlich, dass die Caption nicht zwingend hinter dem öffnendem TABLE-TAG stehen muss. Unabhängig von der Position im Quelltext wird die CAPTION oberhalb der Tabelle ausgespielt, falls caption-side nicht auf bottom gesetzt ist.
- Diese Eigenschaft wird von allen aktuellen Browsern zuverlässig dargestellt. Ausnahmen zeigen hier der Internet Explorer 6 und Internet Explorer 7.
 Firefox |  Chrome |  Internet Explorer |  Safari |  Opera |
|||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| CSS21 |
|
|
|
|
| ||||||||||||||||||||||||||||||||||||||||||
Weiterführende Informationen zu caption-side:
- W3C Spezifikation:
http://www.w3.org/TR/CSS21/tables.html#propdef-caption-side
- letzte CSS-Eigenschaft (Acc-Key: ALT + SHIFT + z):
break-inside - nächste CSS-Eigenschaft (Acc-Key: ALT + SHIFT + w):
clear
Beispiele
HTML:
<table>
<caption>Tabellenüberschrift</caption>
<tr>
<td>1 1</td>
<td>1 2</td>
<td>1 3</td>
</tr>
<tr>
<td>2 1</td>
<td>2 2</td>
<td>2 3</td>
</tr>
<tr>
<td>3 1</td>
<td>3 2</td>
<td>3 3</td>
</tr>
</table>CSS:
table {
border: 5px solid #b0b0b0;
}
td {
border: 2px solid red;
padding: 10px;
}
caption {
border: 2px solid blue;
padding: 4px;
}
/* Standarddarstellung. */Beispiel Nr. 1 So sieht's aus:
| 1 1 | 1 2 | 1 3 |
| 2 1 | 2 2 | 2 3 |
| 3 1 | 3 2 | 3 3 |
HTML:
<table>
<caption class="doBottom">Tabellenüberschrift</caption>
<tr>
<td>1 1</td>
<td>1 2</td>
<td>1 3</td>
</tr>
<tr>
<td>2 1</td>
<td>2 2</td>
<td>2 3</td>
</tr>
<tr>
<td>3 1</td>
<td>3 2</td>
<td>3 3</td>
</tr>
</table>CSS:
.doBottom {
caption-side: bottom;
}Beispiel Nr. 2 So sieht's aus:
| 1 1 | 1 2 | 1 3 |
| 2 1 | 2 2 | 2 3 |
| 3 1 | 3 2 | 3 3 |
HTML:
<table>
<tr>
<td>1 1</td>
<td>1 2</td>
<td>1 3</td>
</tr>
<tr>
<td>2 1</td>
<td>2 2</td>
<td>2 3</td>
</tr>
<tr>
<td>3 1</td>
<td>3 2</td>
<td>3 3</td>
</tr>
<caption>Tabellenüberschrift</caption>
</table>CSS:
/* Die CAPTION kann im Quelltext auch vor das schließende TABLE geschrieben werden. Trotzdem wird sie über der Tabelle ausgespielt, wenn caption-side nicht auf bottom gesetzt ist. */Beispiel Nr. 3 So sieht's aus:
| 1 1 | 1 2 | 1 3 |
| 2 1 | 2 2 | 2 3 |
| 3 1 | 3 2 | 3 3 |
Fehler melden
Diese Referenz ist ein Freizeitprojekt ohne aufwendiges Lektorat oder Vergleichbarem. Von daher lassen sich bei dem Umfang dieser Referenz trotzt größtmöglicher Sorgfalt Fehler nicht vermeiden.
Hilf, die Qualität dieser Seite zu verbessern! Sollte Dir ein Fehler auffallen, sei es in den Erklärungen, Beispielen oder den Informationen zum Browsersupport, seien es orthographische oder grammatikalische, sende eine kurze E-Mail an info@css-wiki.com. Auch Anregungen und Verbesserungsvorschläge sind jeder Zeit Willkommen. Jede E-Mail wird persönlich beantwortet!
Vielen Dank!