HTML thead, tfoot, tbody

Fester Tabellenkopf, scrollende Tabellenzeilen: Tabellen strukturieren

tbody, thead und tfoot teilen Tabellen in drei Bereiche:
tbody definiert den Tabellenkörper, in dem die Daten der Tabelle liegen, thead den Tabellenkopf und tfoot die Fußnote zur Tabelle.

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.

PORTNUMMER Dienst
80 HTTP
Die wichtigsten Portnummern
PORTNUMMER Dienst
80 HTTP
Die wichtigsten Portnummern

thead umfasst eine oder mehrere Zeilen einer HTML-Tabelle und weist sie als Tabellenkopf aus. tbody umfasst den eigentlichen Inhalt der Tabelle.

Während es spezielle HTML-Tags für die Zellen des Tabellenkopfs gibt, fehlen HTML-Tags für einen Tabellenfuß. Das tfood-Tag umspannt die Zeilen der Tabelle, die sich dem Tabellenfuß zuordnen lassen.

Reihenfolge für thead, tfoot und tbody

In HTML4 und XHTML 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 Tags im HTML-Quelltext nicht gesetzt werden. Wenn Javascript durch das Dom (Document Object Model) navigiert, liegen die Tabellenzeilen in einem tbody-Element und auch ein thead- und tfood-Element sind vertreten.

Fixer Tabellenkopf, scrollende Tabelle

So richtig in Gang kommen thead und tbody, wenn thead und tbody bei langen Tabellen mit vielen Zeilen mittels CSS display : block bzw. overflow : scroll formatiert werden. Dann ist der Tabellenkopf fest und fixiert, während die Zeilen der Tabelle gescrollt werden können.

  • ID
  • Spieltag
  • Spieler
  • Team
ID Spieltag Spieler Team
1 2012-12-05 17:00:00 Meier Nothanger
22012-12-05 17:00:00NeumannBavaria
32012-12-05 17:00:00SchulzeNothanger
42012-12-05 17:00:00MüllerHelenabrunn
52012-12-05 17:00:00Nobby NobbsHelenabrunn
62012-12-05 17:00:00P. LangstrumpfNothanger
72012-12-05 17:00:00HummerbergNothanger
82012-12-05 17:00:00NobodyBavaria
92012-12-05 17:00:00EugenSommerset
102012-12-05 17:00:00Thomas Op de Dyk
112012-12-05 17:00:00T. MüllerHelenabrunn
122012-12-05 17:00:00HeinrichOp de Dyk
132012-12-05 19:00:00EugenOp de Dyk
142012-12-05 19:00:00HeinrichNothanger
152012-12-05 19:00:00T. FröhlichHelenabrunn
162012-12-05 19:00:00MeierOp de Dyk
172012-12-05 21:00:00MeierSommerset
182012-12-05 21:00:00EugenHelenabrunn
192012-12-05 21:00:00HeinrichBavaria
202012-12-05 21:00:00T. FröhlichHelenabrunn
212012-12-05 23:00:00WinterNothanger
222012-12-05 23:00:00HeinrichBavaria
232012-12-05 23:00:00Thomas Helenabrunn

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 vor allem auf Benutzer mit mobilen Geräten ab. Ihnen bleiben einzelne Spalten am Anfang verborgen, damit die Tabelle in kleine Monitore passt. Mit den Checkboxen kann der Benutzer selber bestimmen, welche Spalten er angezeigt bekommt.

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

thead tbody tfoot