CSS, HTML und Javascript mit {stil}

HTML thead, tfoot, tbody

HTML table – Tabellen

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-Attriubte und CSS-Stile in Gruppen von Tabellenzeilen der HTML-Tabelle.

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
Die wichtigsten Portnummern
80 HTTP
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.

<table>
<thead>
   <tr>
      <th>PORTNUMMER</th>
      <th>Dienst</th>
   </tr>
</thead>
<tfoot>
   <tr>
      <th colspan="2">Die wichtigsten Portnummern</th>
   </tr>
</tfoot>
<tbody> 
   <tr>
      <td>80</td>
      <td>HTTP</td>
   </tr>
</tbody>
</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 mit CSS display:block bzw. overflow:scroll formatiert werden.

thead { position: absolute; }
tbody { height: 200px; overflow: scroll; display: block; }

IE 8 ignoriert diese CSS-Regeln. Wenn die Tabelle über das tbody-Tag formatiert wird, sollte der Stil vor Internet Explorer verborgen werden.

Die modernen Browser beschränken mit diesen CSS-Regeln die die angezeigte Höhe des Tabellenkörpers und zeigen weitere Zeilen mit dem Scrollbalken an.

IE7/IE9 fassen den CSS-Stil height: 200px; overflow: scroll für das tbody-Element mit jeder Tabellenzelle auf und rendern die Tabelle ellenlang mit hohen Tabellenreihen. Dagegen muss dann wieder per CSS eine Höhe für Tabellenzellen angegeben werden.

ID Spieltag Spieler
1 2012-12-05 17:00:00 Meier
22012-12-05 17:00:00Winter
32012-12-05 17:00:00Schulze
42012-12-05 17:00:00Müller
52012-12-05 17:00:00Nobby Nobbs
62012-12-05 17:00:00P. Langstrumpf
72012-12-05 17:00:00Hummerberg
82012-12-05 17:00:00Nobody
92012-12-05 17:00:00Eugen
102012-12-05 17:00:00Thomas
112012-12-05 17:00:00T. Müller
122012-12-05 17:00:00Heinrich
132012-12-05 19:00:00Eugen
142012-12-05 19:00:00Heinrich
152012-12-05 19:00:00T. Fröhlich
162012-12-05 19:00:00Meier
172012-12-05 21:00:00Meier
182012-12-05 21:00:00Eugen
192012-12-05 21:00:00Heinrich
202012-12-05 21:00:00T. Fröhlich
212012-12-05 23:00:00Winter
222012-12-05 23:00:00Heinrich
232012-12-05 23:00:00Thomas
ID Spieltag Spieler

Der fixierte Tabellenfuß hier ist ein tbody am Ende der Tabelle – was nicht im Sinne des Standards ist. Aber die Browser setzen ein tfoot unter den Tabellenkopf.

Die kompakte Darstellung von Tabellen mit fixiertem Tabellenkopf bzw. -fuß mit CSS ist also alles andere als zuverlässig und komplizierter als nötig …