Tabellen in HTML – Teil 4 thead, tbody, tfoot
Tabellen in HTML – Teil 4 thead, tbody, tfoot
Heute möchte ich Euch erklären, wie Ihr größere Tabellen in einen Kopfbereich (thead), einen Rumpfbereich (tbody) und einen Fußbereich (tfoot) untergliedert.
Diese Untergliederung hat folgende Gründe:
1. Mann kann (theoretisch) hierbei nun die Kopfzeile und die Fußzeile bei einer großen Tabelle fixieren, während der Rumpfbereich scrollbar ist.
2. Möchte jemand die Tabelle ausdrucken, kann der Drucker auf jeder Seite die Kopfzeile und die Fußzeile erneut drucken. Nur der Rumpfbereich wird weitergeführt.
Der Kopfbereich wird zwischen zwei thead, der Fußbereich zwischen zwei tfoot und der Rumpfbereich zwischen zwei tbody-Tags gesetzt.
In den Kopfbereich setzt man typischerweise die Headings… also die Überschriften der Spalten.
Der Aufbau einer solchen Tabelle würde nun folgendermaßen aussehen:
Beispielcode HTML:
<pre><html>
<body>
<table width="40%" border="1">
<thead>
<tr>
<th>Überschrift 1</th>
<th>Überschrift 2</th>
<th>Überschrift 3</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Fußnote 1</td>
<td>Fußnote 2</td>
<td>Fußnote 3</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td>Zelle 3</td>
</tr>
<tr>
<td>Zelle 4</td>
<td>Zelle 5</td>
<td>Zelle 6</td>
<tr>
</tbody>
</table>
</body>
</html></pre>
Ihr denkt Euch jetzt vielleicht, daß ich bei dem Quellcode einen Fehler gemacht haben muss. Der Fußbereich kommt bei mir vor dem Rumpfbereich. Das MUSS so sein. Der Browser will zuerst wissen, ob überhaupt ein Fußbereich vorhanden ist. Nachdem er sich diese Information eingeholt hat, interpretiert er den Rumpfbereich weiter.
So weit die Theorie. In der Praxis sieht das ganz anders aus. Wer versucht, der Tabelle eine feste Größe zu geben (wie es vorgesehen ist), den Kopf- und den Fußbereich zu fixieren und nur den Rumpfbereich zu scrollen, wird dabei wunde Finger und lodernde Hirnzellen erleben. Das erste Erfolgserlebnis wird man bei Mozilla Firefox haben. Mozilla Firefox ist bislang der einzige Browser dessen Entwickler sich mit thead, tbody und tfoot richtig auseinandergesetzt haben. Bei Opera kann man das Ganze auch noch nach etwas längerem experimentieren bewerkstelligen. Beim Internet Explorer wird man schnell feststellen, daß Microsoft hier geschlampt oder schlichtweg geschlafen hat (oder vielleicht beides?). Beim Internet Explorer gibt es allerdings eine getrickste Lösung.
Setzen wir uns nun erst einmal mit dem Drucker auseinander. Ursprünglich angedacht war es, daß der Drucker Kopf und Fußzeile bei jeder neuen Seite wiederholt. Praktisch gesehen funktioniert das Ganze mit dem Drucker ganz gut (bei modernen Browsern). Man sollte allerdings hierfür noch folgenden CSS Code anwenden:
Beispielcode CSS:
<pre>
THEAD { display: table-header-group }
TBODY { display: table-row-group }
TFOOT { display: table-footer-group }
</pre>
Laut CSS2 sollten die Druckprogramme mit diesen Einstellungen den Code so interpretieren, daß Kopf- und Fußzeile auf jeder Seite neu gesetzt werden. Laut HTML Vorgabe sollte dies auch ohne CSS möglich sein. Faktisch gesehen erzielt man das „beste“ Ergebnis mit dem CSS Code.
Wie kann man denn nun eine Tabelle so darstellen, daß man einen fixierten thead Kopfbereich, einen fixierten tfoot Fußbereich und einen scrollbaren tbody Rumpfbereich hat?
Das möchte ich Euch im nächsten Tutorial erklären. Hier muss man schon ganz tief in die Trickkiste greifen.
Author: Andreas Lang
Andreas Lang konzentriert sich seit zwei Jahrzehnten auf die Webentwicklung und Webdesign mit dem Schwerpunkt PHP, Laravel und Javascript und betreut seine Kunden mit Herz und Seele in allen Bereichen von Entwicklung, Design, Suchmaschinenoptimierung, IT-Recht, IT-Sicherheit etc.