HTML/Tabellen/Aufbau einer Tabelle
Eine Tabelle ist eine geordnete Zusammenstellung von Texten oder Daten. Die darzustellenden Inhalte werden dabei in Zeilen (waagerecht) und Spalten (senkrecht) gegliedert, die grafisch aneinander ausgerichtet werden.
Früher wurden HTML-Tabellen dazu eingesetzt, komplette Layouts umzusetzen. Das widerspricht allerdings letztlich dem Grundgedanken eines modernen Webdesigns (Stichwort: Trennung von Inhalt und Layout), kann Probleme hinsichtlich der Barrierefreiheit für Screen-Reader-Nutzer verursachen und ist schlecht zu warten.
Verwenden Sie hierfür das Grid Layout.
Inhaltsverzeichnis
Aufbau
Für den Aufbau einer Tabelle der Gitterstruktur sind mehrere Elemente verantwortlich. Im einfachsten Fall besteht eine Tabelle aus Tabellenzeilen, in welchen sich Tabellenzellen befinden.
<table>
leitet eine Tabelle ein (table = Tabelle).<tr>
leitet eine neue Tabellenzeile ein (tr = table row = Tabellenzeile). Im Anschluss daran werden die Zellen (Spalten) der betreffenden Reihe definiert. Am Ende einer Tabellenzeile wird ein abschließendes Tag</tr>
notiert.
Kopf- und Datenzellen
Eine Tabellenzeile kann Kopfzellen oder gewöhnliche Datenzellen enthalten.
<th>
leitet eine Kopfzelle ein (th = table header = Tabellenkopf),<td>
eine normale Datenzelle (td = table data = Tabellendaten). Der Inhalt einer Zelle wird jeweils hinter dem Start-Tag notiert. In einer Tabellenzelle können beliebige Elemente stehen, d. h. außer normalem Text z. B. auch phrasing content.
Die folgende Grafik zeigt die Wirkung der HTML-Elemente, die eine Tabelle erzeugen:
<th>…</th>
), die beiden anderen Datenzellen (<td>…</td>
). Sie erkennen, dass die Browser ohne weiteres Zutun zwar Kopf- und Datenzellen unterschiedlich formatieren, jedoch keine Rahmenlinien darstellen.tbody
-Element automatisch.Tabellenzellen dürfen auch leer sein. Wenn Sie in einer Zeile für eine Spalte keine Daten eingeben wollen, notieren Sie ein einfaches <td></td>
. Beachten Sie dabei jedoch, dass Web-Browser die Zelle in diesem Fall als "nicht vorhanden" darstellen, da dieses Verhalten der Voreinstellung der CSS-Eigenschaft empty-cells entspricht.
Tabellen mit Kopf, Körper und Fuß
Sie sollten jedoch auch die Tabelle selbst in mehrere Abschnitte gliedern,
- in maximal einen Tabellenkopf
thead
, - maximal einen Tabellenfuß
tfoot
- und mindestens einen Tabellenkörper
tbody
.
Dabei enthält der Tabellenkopf die Zeilen der einfachen Tabelle, die ausschließlich Kopfzellen enthalten, während der Tabellenkörper die Zeilen enthält, die ausschließlich oder hauptsächlich Datenzellen enthalten. Der Tabellenfuß enthält zusammenfassende oder die Tabelle erläuternde Daten.
Wenn die Tabelle im Ausdruck größer als eine Seite ist, werden die thead
- und tfoot
-Teile beim Drucken auf jeder Seite wiederholt.
Die Verwendung von colspan
wird im Kapitel Zellen verbinden erläutert.
In HTML4 musste der Tabellenfuß tfoot
entgegen der Darstellung gleich hinter thead
noch vor tbody
notiert werden, weil auch der tfoot
Informationen enthält, die für alle Spalten gelten. In HTML5 muss der tfoot
jedoch nach tbody
am Ende der Tabelle angeordnet werden.
tr
als Kindelement von table
zurückgreifen, da alle Browser ein tbody
-Element einfügen, auch wenn es nicht explizit im Markup notiert ist.Gestaltung durch CSS
Früher wurden Tabellen mit einer Vielzahl von HTML-Attributen formatiert. Mit CSS erreichen Sie aber eine bessere und anpassungsfähigere Formatierung.
- bgcolor → CSS: background-color
- border → CSS: border
- cellpadding → CSS der Zellen (th, td): padding
- cellspacing → CSS: border-spacing
- frame → CSS: border
- rules → CSS: border
- summary → Zusammenfassung_des_Tabelleninhalts
- width
Mehr Informationen finden Sie im 4. Kapitel HTML/Tabellen/Gestaltung mit CSS