Der eigene Online-Shop für Profi-Fotografen. Für Fotografen, die keine Zeit zu verlieren haben.

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.

CSS-Eigenschaft: caption-side
KurzbeschreibungWerteStandardwertKategorieHinweis
Positionierung der Tabellenüberschrift
  • top
  • bottom
  • inherit
top
Allgemein:
Tabellen
CSS 2.1:
Tables
 

Verwandte Eigenschaften aus der Kategorie: Tabellen (allgemein), Tables (CSS 2.1):

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.
Browserunterstützung von caption-side
Firefox
Firefox
Google Chrome
Google
Chrome
Internet Explorer
Internet
Explorer
Safari
Safari
Opera
Opera
CSS21
Version: 16Version: 25Version: 30Version: 31Version: 32
j
Version: 20Version: 30Version: 35Version: 36Version: 37
j
Version: 8Version: 9Version: 10Version: 11
j
Version: 4Version: 5Version: 6Version: 7
j
Version: 10Version: 11Version: 12
j

Weiterführende Informationen zu caption-side:

  • letzte CSS-Eigenschaft (Acc-Key: ALT + SHIFT + z):
    break-inside


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:

Tabellenüberschrift
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:

Tabellenüberschrift
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
Tabellenüberschrift
 

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!

A-Z:

Schnell­auswahl

Seiten:

Letzte Änderung: 16. 10. 2017
Render Time: 0.086 sec.

Browser-Marktanteile