HTML thead, tfoot, tbody

HTML thead, tfoot, tbody

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.

18-12-15 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Wo ein table-Element ist, ist auch 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.

PORTNUMMERDienst
80HTTP
Die wichtigsten Portnummern
PORTNUMMERDienst
80HTTP
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-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 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 Elemente im HTML-Markup nicht vorhanden sind. Wenn Javascript durch das Dom (Document Object Model) navigiert, liegen die Tabellenzeilen in einem tbody-Element und auch thead- und tfood-Elemente sind vertreten.

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
IDSpieltagSpielerTeam
12021-12-05 17:00:00MeierNothanger
22021-12-05 17:00:00NeumannBavaria
32021-12-05 17:00:00SchulzeNothanger
42021-12-05 17:00:00MüllerHelenabrunn
52021-12-05 17:00:00Nobby NobbsHelenabrunn
62021-12-05 17:00:00P. LangstrumpfNothanger
72021-12-05 17:00:00HummerbergNothanger
82021-12-05 17:00:00NobodyBavaria
92021-12-05 17:00:00EugenSommerset
102021-12-05 17:00:00Thomas Op de Dyk
112021-12-05 17:00:00T. MüllerHelenabrunn
122021-12-05 17:00:00HeinrichOp de Dyk
132021-12-05 19:00:00EugenOp de Dyk
142021-12-05 19:00:00HeinrichNothanger
152021-12-05 19:00:00T. FröhlichHelenabrunn
162021-12-05 19:00:00MeierOp de Dyk
172021-12-05 21:00:00MeierSommerset
182021-12-05 21:00:00EugenHelenabrunn
192021-12-05 21:00:00HeinrichBavaria
202021-12-05 21:00:00T. FröhlichHelenabrunn
212021-12-05 23:00:00WinterNothanger
222021-12-05 23:00:00HeinrichBavaria
232021-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 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.