In HTML können Sie eine Tabelle in die logischen Bereiche Kopf, Fuß und Rumpf unterteilen. Dadurch gibt es einige neue Möglichkeiten:

• Die logischen Bereiche der Tabelle lassen sich in einem Stylesheet ganz einfach selektieren und unterschiedlich gestalten.
• Beim Ausdruck einer langen Tabelle könnte ein Browser auf jeder Seite die Spaltenüberschriften im Tabellenkopf wiederholen.

Die Elemente zur logischen Einteilung heißen (in der Reihenfolge
des Auftretens) thead, tfoot und tbody. Bemerkenswert ist dabei die den Grundsätzen der Anatomie widersprechende Reihenfolge: Kopf, Fuß, Körper.

In Kopf und Fuß stehen Informationen über die Tabellenspalten, zum Beispiel die Überschriften, im Rumpf die eigentlichen Daten.

01 <table border="1">
02 <thead>
03   <tr>
04     <th>thead, Spalte 1</th>
05     <th>thead, Spalte 2</th>
06   </tr>
07 </thead>
08 <tfoot>
09   <tr>
10     <td>tfoot, Spalte 1</td>
11     <td>tfoot, Spalte 2</td>
12   </tr>
13 </tfoot>
14 <tbody>
15   <tr>
16     <td>tbody, Zeile 1, Spalte 1</td>
17     <td>tbody, Zeile 1, Spalte 2</td>
18   </tr>
19   <tr>
20     <td>tbody, Zeile 2, Spalte 1</td>
21     <td>tbody, Zeile 2, Spalte 2</td>
22   </tr>
23 </tbody>
24 </table>

Diese Tabelle sieht im Browser so aus:

Abbildung 10.8: Einfache Tabelle mit Kopf, Fuß und Rumpf

Mit dem Attribut colspan (kurz für engl.: column span, auf Deutsch etwa "über Spalten erstrecken") kann eine Zelle mehrere Spalten oder Zeilen »überspannen«. Eine Zelle mit colspan="2" steht dabei für zwei Tabellenzellen, sodass man manchmal ein bisschen zählen muss, bis alles passt.

Um die Fußzeile aus obigem Beispiel über zwei laufen zu lassen, müssen Sie den Quelltext wie folgt ändern:

08 <tfoot>
09 <tr>
10 <td colspan="2">tfoot über 2 Spalten mit colspan</td>
11 <!-- Das zweite td muss weg -->
12 </tr>
13 </tfoot>

Im Browserfenster sieht die Tabelle dann so aus:

Abbildung 10.9: Tabelle mit durchlaufendem Fußbereich

Wenn eine Zelle sich über zwei Zeilen erstrecken soll, heißt das Attribut dazu rowspan und funktioniert im Prinzip genau wie colspan.