HTML/Tabellen/Aufbau einer Tabelle

Aus SELFHTML-Wiki
< HTML‎ | Tabellen(Weitergeleitet von Tfoot)
Wechseln zu: Navigation, Suche

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.

Beachten Sie: HTML-Tabellen sind die semantisch passende Struktur, um tabellarische Daten in Zeilen und Spalten darzustellen.

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.

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.

Beispiel
<table> <tr> <td>Inhalt</td> </tr> </table>
Dieses (sinnfreie) Beispiel definiert eine Tabelle, welche nur aus einer einzigen Zelle besteht.
<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:

Aufbau einer HTML-Tabelle
Aufbau einer HTML-Tabelle
Beispiel ansehen …
<h1>einfache Tabelle</h1> <table> <tr> <th>Berlin</th> <th>Hamburg</th> <th>München</th> </tr> <tr> <td>Miljöh</td> <td>Kiez</td> <td>Bierdampf</td> </tr> <tr> <td>Buletten</td> <td>Frikadellen</td> <td>Fleischpflanzerl</td> </tr> </table>
Das Beispiel zeigt eine einfache Tabelle mit drei Zeilen, in denen jeweils drei Zellen definiert wurden. Die erste Zeile enthält Kopfzellen (<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.
Beachten Sie: Die meisten Browser ergänzen ein fehlendes tbody-Element automatisch.
Beachten Sie: Die Anzahl der Zellen sollte bei jeder Zeile gleich sein, sodass die Tabelle durchweg die gleiche Anzahl Spalten pro Zeile hat. In der ersten Zeile, die Sie definieren, legen Sie deshalb durch die Anzahl der dort definierten Zellen die Anzahl der Spalten Ihrer Tabelle fest.

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.

Beachten Sie: Im Gegensatz dazu dürfen in HTML-Versionen unterhalb von HTML5 Tabellenzeilen, also tr-Elemente, nicht leer sein.

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.
Beispiel
<table> <thead> <tr> <th>Kopf</th> </tr> </thead> <tbody> <tr> <td>Inhalt</td> </tr> </tbody> <tfoot> <tr> <td>Fuß</td> </tr> </tfoot> </table>

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.

Beispiel
<table> <thead> <tr> <th></th> <th>Haus A</th> <th>Haus B</th> </tr> </thead> <tbody> <tr> <th>Wohnfläche</th> <td>100</td> <td>150</td> </tr> <tr> <th>Gartenfläche</th> <td>50</td> <td>100</td> </tr> </tbody> <tfoot> <tr> <th>Gesamtfläche</th> <td>150</td> <td>250</td> </tr> <tr> <td colspan="3">Alle Angaben in Quadratmetern.</td> </tr> </tfoot> </table>

Die Verwendung von colspan wird im Kapitel Zellen verbinden erläutert.

Aufbau einer HTML-Tabelle mit Kopfzeile und (Tabellen-)Körper
Aufbau einer HTML-Tabelle mit Kopfzeile und (Tabellen-)Körper

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.

Beachten Sie: Wenn Sie Tabelleninhalte mit JavaScript dynamisch ansprechen, können sie nicht auf 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.

Beachten Sie: Folgende Attribute sind in HTML5 obsolet:


Verwenden Sie CSS für die Tabellenformatierung.

Mehr Informationen finden Sie im 4. Kapitel HTML/Tabellen/Gestaltung mit CSS

Referenzen