Gesonderte Unterteilung von Tabellen

Es gibt drei Elemente, um den Hauptinhalt einer Tabelle von der ersten und der letzten Zeile abzusetzen.

Diese Elemente sind eine gute Hilfe für die Benutzer von Screenreadern. Desweitren kann man diese Abschnitte dann anders gestalten als den Rest der Tabelle. dazu mehr bei Thema CSS.

Man Kann eine Tabelle wie ein HTML-Dokument Unterteilen und zwar in <thead> für den Kopfbereich mit den Überschriften, <tbody> für den Hauptbereich mit den Daten und <tfoot> für den Fußbereich mit z.B. Summen der einzelnen Spalten.

 

Beispiel:

<table>

<thead>

<tr>

<th>Monat</th>

<th>Stunden</th>

<th>Überstunden</th>

</tr>

</thead>

<tbody>

<tr>

<td>Januar</td>

<td>169</td>

<td>9</td>

</tr>

<tr>

<td>Februar</td>

<td>164</td>

<td>4</td>

</tr>

<tr>

<td>März</td>

<td>148</td>

<td>-12</td>

</tr>

<tr>

<td>April</td>

<td>120</td>

<td>-40</td>

</tr>

<tr>

<td>Mai</td>

<td>170</td>

<td>10</td>

</tr>

<tr>

<td>Juni</td>

<td>161</td>

<td>1</td>

</tr>

<tr>

<td>Juli</td>

<td>158</td>

<td>-2</td>

</tr>

<tr>

<td>August</td>

<td>166</td>

<td>6</td>

</tr>

<tr>

<td>September</td>

<td>160</td>

<td>0</td>

</tr>

<tr>

<td>Oktober</td>

<td>164</td>

<td>4</td>

</tr>

<tr>

<td>November</td>

<td>170</td>

<td>10</td>

</tr>

<tr>

<td>Dezember</td>

<td>174</td>

<td>14</td>

</tr>

</tbody>

<tfoot>

<tr>

<td></td>

<td>1924</td>

<td>0</td>

</tr>

</tfoot>

</table>

 

Darstellung:

 

Monat Stunden Überstunden
Januar 169 9
Februar 164 4
März 148 -12
April 120 -40
Mai 170 10
Juni 161 1
Juli 158 -2
August 166 6
September 160 0
Oktober 164 4
November 170 10
Dezember 174 14
  1924 0