HTML thead, tfoot, tbody

Wo ein table-Element ist, ist auch ein tbody

thead, tfoot und tbody transportieren HTML-Attribute und CSS-Stile in Gruppen von Tabellenzeilen und setzen den Tabellenkopf fest, während der Benutzer durch die Tabellenzeilen scrollen kann.

Ob thead, tbody oder tfoot explizit im Quelltext der HTML-Datei stehen oder nicht – ein tbody-Element ist immer implizit vorhanden. Ein Blick in die Console des Browsers (z.B. mit Firefox »Element untersuchen«) bringt auch für die zweite Tabelle ein tbody-Element zum Vorschein, obwohl es im Quellcode nicht vorhanden ist.

<table>
   <tbody>
		<tr><th>PORTNUMMER</th><th>Dienst</th></tr>
		<tr><td>80</td><td>HTTP</td></tr>
		<tr><th colspan="2">Die wichtigsten Portnummern</th></tr>
	</tbody>
</table>

thead umfasst eine oder mehrere Zeilen einer HTML-Tabelle und weist sie als Tabellenkopf aus. tbody umfasst den eigentlichen Inhalt der Tabelle. Auch wenn Tabelle heute zu Exoten in Webseiten geworden sind: Eine Unterteilung in thead und tbody wird hilfreich, wenn z.B. Tabellen als JSON-Struktur an die Anwendung auf dem Server gesendet wird. Dann kann der Tabellenkopf – der nur für die Ansicht im Browser erforderlich ist – leichter von der Transformation ausgeschlossen werden.

Während es spezielle HTML-Elemente für die Zellen des Tabellenkopfs gibt (td und th), gibt es keine HTML-Elemente für einen Tabellenfuß. tfood umspannt die Zeilen der Tabelle, die sich dem Tabellenfuß zuordnen lassen.

Reihenfolge thead, tbody, tfoot

In älteren HTML-Versionen gab es noch eine Vorschrift zur Reihenfolge: thead, tfoot und zuletzt tbody. Mit den Informationen aus tfood sollte der Browser die Informationen zur Tabelle schon rendern können, bevor der komplette Quellcode der Tabelle geladen war.

Mit HTML5 ist diese Reihenfolge aufgehoben und es gilt die logische Reihenfolge: thead zuerst, gefolgt von einem oder mehr tbody und zuletzt tfoot.

<table>
<thead>
   <tr>
      <th>PORTNUMMER</th>
      <th>Dienst</th>
   </tr>
</thead>
<tbody> 
   <tr>
      <td>80</td>
      <td>HTTP</td>
   </tr>
</tbody>
<tfoot>
   <tr>
      <th colspan="2">Die wichtigsten Portnummern</th>
   </tr>
</tfoot>
</table>

tbody kann mehrfach in einer Tabelle vorkommen, thead und tfoot werden nur einmal in die Tabelle gesetzt.

Ob nun tbody, thead und tfoot in einer HTML-Tabelle gesetzt sind oder nicht – der Browser macht ohne CSS oder individuelle Attribute keinen Unterschied bei der Darstellung der Tabelle. Tatsächlich hat jede HTML-Tabelle ein tbody-, thead- und tfoot-Element, auch wenn diese Elemente im HTML-Markup nicht vorhanden sind. Die vom Browser erzeugten Elemente sind allerdings kein semantisches Signal.

Für die Screenreader und die Accessibility spielen explizit eingesetzte thead-, tbody- und tfoot-Elemente eine wichtige Rolle: Sie helfen bei der Orientierung und machen das Vorlesen verläßlicher. Kommt dann noch ein caption-Element als Kurzbeschreibung der Tabelle hinzu, werden auch größere und komplexe Tabellen – etwa Finanz- und Statistik-Tabellen besser navigierbar.

Fester Tabellenkopf, scrollende Tabelle

CSS display : block und overflow : scroll formatieren thead und tbody, damit lange Tabellen mit einem fixierten thead und scrollendem tbody angezeigt werden.

• ID
• Spieltag
• Spieler
• Team

Sowohl thead als auch tbody brauchen display : block.

thead { 
   display: block; 
   background: hsl(20,80%,60%); color: white;
}
tbody {
   height: 9em; 
   overflow: scroll; 
   display: block; 
}

Damit die Kopfzellen und die Tabellenspalten innerhalb von tbody dieselbe Breite haben, wird die Breite sowohl für th als auch td Spalte für Spalte gesetzt.

td:nth-child(1), 
th:nth-child(1) { width: 3em}

td:nth-child(2), 
th:nth-child(2) { width: 12em}
…

Responsive Tabellen

Die drei Checkboxen über dem Tabellenkopf zielen auf Benutzer mit mobilen Geräten ab. Ihnen bleiben einzelne Spalten am Anfang verborgen, damit die Tabelle in kleine Monitore passt. Mit den Checkboxen bestimmt der Benutzer, welche Spalten angezeigt werden.

CSS für thead und tbody kann ein vertikales Scrollen einsetzen, aber kein horizontales Scrollen mit einer feststehenden Tabellenspalte. Dafür muss Javascript sorgen.