HTML/Tabellen/Aufbau einer Tabelle

Aus SELFHTML-Wiki
< HTML‎ | Tabellen(Weitergeleitet von Thead)
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.

  • HTML 3.2
  • XHTML 1.0
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
Beachten Sie: HTML-Tabellen werden nur verwendet, um tabellarische Daten darzustellen, nicht, um das Layout einer Website zu gestalten. Früher wurden 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.

Aufbau[Bearbeiten]

Einfache Tabellen[Bearbeiten]

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.

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 andere Stil-Elemente (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ß[Bearbeiten]

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.

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.

Vorab-Definition mit colgroup und col[Bearbeiten]

Mit colgroup können Sie eine Vorab-Definition der Tabellenspalten einleiten. Wenn Sie dem Browser so gleich zu Beginn der Tabelle mitteilen, wie viele Spalten die Tabelle hat, und wie breit diese sind, kann der Browser die Tabelle schneller aufbauen, d.h. bereits Teile der Tabelle anzeigen, bevor die gesamte Tabelle eingelesen ist.

Gestaltung durch CSS[Bearbeiten]

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.

Siehe auch[Bearbeiten]

Anwendungsbeispiele[Bearbeiten]

Referenzen[Bearbeiten]

Weblinks[Bearbeiten]