Datentabellen
Früher wurden Tabellen in HTML oft zur Darstellung des Layouts benutzt. Im modernen Webdesign sollten Tabellen jedoch nur zur Strukturierung von Daten benutzt werden. Dafür stehen folgende Elemente zur Verfügung:
Elemente für Datentabellen
table
- Tabelle
summary="Zusammenfassung des Inhalts"
caption
- Tabellenbeschriftung als erstes Kindelement einer
table
colgroup
(column group)- Spaltengruppe
- optional:
span="positive Ganzzahl"
gibt die Anzahl der Spalten an
- optional:
col
(column)- Spalte;
col
steht innerhalb einercolgroup
ohnespan
-Attribut span="positive Ganzzahl"
Zeilen und Zeilengruppen
tr
(table row)- Tabellenzeile
thead
(table head)- fasst Zeilen zum Tabellenkopf zusammen bzw. zeichnet eine Zeile als solchen aus
tfoot
(table foot)- fasst Zeilen zum Tabellenfuß zusammen bzw. zeichnet eine Zeile als solchen aus
tbody
(table body)- fasst Zeilen zum Tabellenkörper zusammen, hier stehen die eigentlichen Inhalte der Tabelle
Im Quelltext muss die Reihenfolge Tabellenkopf, Tabellenfuß und Tabellenkörper eingehalten werden.
Zellen
td
(table data)- Tabellenzelle
colspan="n"
fasst die Zelle mit den folgenden n Zellen in der Spalte zusammen.headers="id1 id2"
gibt die IDs der Überschriften für diese Zelle an.rowspan="n"
fasst die Zelle mit den folgenden n Zellen in der Zeile zusammen.
th
(table header)- Tabellenkopfzelle
scope="col|colspan|row|rowspan"
gibt an, dass die Zelle eine Spalte, Spaltengruppe, Zeile bzw. Zeilengruppe beschreibt- zusätzlich die Attribute des
td
-Elements
Beispiel-Quelltext für eine Datentabelle
<table>
<caption>Beschriftung</caption>
<thead>
<tr>
<td>...</td>
<th scope="col">Überschrift</th>
[...]
</tr>
</thead>
<tbody>
<tr>
<th scope="row">...</th>
<td>...</td>
[...]
</tr>
</tbody>
</table>