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.

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

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas 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
      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
      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

Kommentar zu dieser Seite

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 →