HTML thead, tfoot, tbody

Wo ein table-Element ist, ist immer ein tbody

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.

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 thead, tbody, tfoot

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

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.