Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

Das HTML-Element <caption> beschreibt den Inhalt einer Tabelle. Leider wird das dazugehörige align-Attribut in HTML5 nicht länger unterstützt. Doch wir haben mit CSS die Möglichkeit einem HTML-Element das Verhalten bestimmter Tabellen-Elemente zuzuweisen. Im Umfeld von Content Choreography ist hier die Eigenschaft caption-side interessant. Mit ihr können zwei aufeinander folgende Inhalte getauscht werden – und das funktioniert in allen relevanten Browsern funktioniert in allen modernen Browsern, außer dem Internet Explorer.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug. Z. B.: Coding for Designers oder Seminar: CSS für Webanwendungen

display: table-caption + caption-side: top/bottom;

Die display-Eigenschaften von CSS erlauben es uns jedem HTML-Element das Verhalten von Tabellen-Elementen zuzuweisen. Mit display: table; beispielsweise verhält sich ein Element wie eine Tabelle, mit display: table-cell; wie eine Tabellen-Zelle, und mit display: table-caption; wie die Beschreibung einer Tabelle.
Sobald ein Element die table-caption-Eigenschaft erhalten hat, steht ein weiterer Befehl zur Verfügung: caption-side. Mit caption-side kann festgelegt werden ob die Beschreibung der Tabelle über oder unter der Tabelle dargestellt wird; unabhängig davon ob sie im HTML-Markup davor oder danach notiert wurde. Dieses Verhalten macht caption-side im Umfeld von Content-Choreography extrem interessant.

Inhalte tauschen

Das folgende Beispiel zeigt den Praxiseinsatz von caption-side. Mit caption-side:top; wird die Beschreibung über der Tabelle angezeigt, mit caption-side:bottom; darunter.
Das Beispiel zeigt dazu einen Blog-Beitrag mit sehr großem Header-Bild. In der Smartphone-Version – und das Beispiel ist Mobile First aufgebaut – sehen wir die Reihenfolge des HTML-Codes: Zuerst kommt die Headline 1, dann das Header-Bild, dann der Inhalt.
Mit einem Breakpoint wird diese Reihenfolge dann geändert. Dazu muss ein Container-Element existieren dem display:table; zugewiesen wurde. Das Beispiel verwendet dazu das HTML-Element <header>. Innerhalb von <header> verhält sich die <h1> wie eine Tabellen-Beschreibung (display: table-caption;) und mit caption-side:bottom; wird die Darstellung in größeren Breakpoints unter den Header verschoben.

Beispiel anzeigen

Reduzierter Code des Beispiels


<header>
  <h1>Caption</h1>
  <div class="header-image"></div>
</header>
<article> … </article>

header {
  display: table;
  width: 100%;
}

h1 {
  display:table-caption;
}


@media screen and (min-width:800px) {
	
  h1 {
    caption-side:bottom;
  }
		
}

Geschrieben von Jonas

thumb

Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, Grafik sowie Frontend- und WordPress-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.

Seminare mit Jonas Hellwig anzeigenJonas Hellwig bei Xing

Feedback & Ergänzungen – 5 Kommentare

  1. Mat
    schrieb am 25.03.2014 um 15:51 Uhr:

    Also das Caption-Element gibt es doch auch unter HTML5 noch wie gehabt: http://www.w3.org/TR/html5/tabular-data.html#the-caption-element
    Nur das zugehörige align-Attribut wurde in HTML5 entfernt.

    Antworten
    • Jonas Hellwig (Autor)
      schrieb am 27.03.2014 um 09:30 Uhr:

      Korrekt. Ich habe die Formulierung im Artikel entsprechend korrigiert. Vielen Dank für deine Info!

      Antworten
  2. Daniele
    schrieb am 22.03.2014 um 10:27 Uhr:

    Danke für deinen Beitrag, wie immer sehr nützlich!

    Viele Grüße aus dem Saarland,
    Daniele

    Antworten
  3. Tom
    schrieb am 21.03.2014 um 08:48 Uhr:

    Hallo Jonas,

    Ich finde deine Beiträge immer sehr interessant :-) Jedoch muss ich dir sagen, dass in meinem IE 11 dein Beispiel nicht funktioniert.

    Ich habe auf CanIUse Caption-side gesucht, jedoch nicht gefunden!

    Beste Grüße

    Tom

    Antworten
    • Jonas Hellwig (Autor)
      schrieb am 21.03.2014 um 09:27 Uhr:

      Zu meinem größten Bedauern hast du recht – ich habe die table-spec von caniuse missverstanden. Der IE kann die Eigenschaft tatsächlich nicht. Was allerdings nicht so schlimm ist, da es gute automatische Fallback-Lösungen gibt.

      Antworten

Schreibe einen Kommentar zu Mat Antworten abbrechen

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Anspruchsvolle Projekte mit kulturbanause

Wir lieben es gewachsene Strukturen aufzuräumen und perfekt im Content Management abzubilden. Strukturell komplexe Projekte realisieren wir regelmäßig und sehr gerne.

Konzeptionelles Leistungsangebot →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →