HTML/Tabellen/Aufbau einer Tabelle

Aus SELFHTML-Wiki
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.

Inhaltsverzeichnis

[Bearbeiten] Aufbau

[Bearbeiten] Einfache Tabellen

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 …
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Aufbau einer Tabelle</title> <style> table, td, th { border: 1px solid black; } </style> </head> <body> <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> </body> </html>
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.

[Bearbeiten] 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> <tfoot> <tr> <td>Fuß</td> </tr> </tfoot> <tbody> <tr> <td>Inhalt</td> </tr> </tbody> </table>
Auch der Tabellenfuß enthält meist Informationen, die zu allen Zellen einer Spalte gehören. Deshalb ist der Tabellenfuß vor dem Körper festzulegen. Dargestellt wird er trotzdem am Ende der Tabelle.
Aufbau einer HTML-Tabelle mit Kopfzeile und (Tabellen-)Körper
Aufbau einer HTML-Tabelle mit Kopfzeile und (Tabellen-)Körper
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.

[Bearbeiten] Vorab-Definition mit colgroup und col

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.

[Bearbeiten] 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:

bgcolor, border, cellpadding, cellspacing, frame, rules, summary, width

Verwenden Sie CSS für die Tabellenformatierung.

[Bearbeiten] siehe auch

[Bearbeiten] Anwendungsbeispiele

[Bearbeiten] Referenzen

[Bearbeiten] Weblinks

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Schnell‑Index
Mitmachen
Werkzeuge
Spenden
SELFHTML