HTML/Tabellen/Aufbau einer Tabelle

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Inhaltsverzeichnis

[Bearbeiten] Einfache Tabellen

  • HTML 3.2
  • XHTML 1.0
  • Android
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari

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 den gültigen Webstandards, ist nicht barrierefrei und schlecht zu warten.

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).

Beachten Sie: Folgende Attribute sind in HTML5 obsolet:

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

Verwenden Sie CSS für die Tabellenformatierung.


<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, <td> eine normale Datenzelle (th = table header = Tabellenkopf, 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 Block- und Inline-Elemente.

Die folgende Grafik zeigt die Wirkung der HTML-Elemente, die eine Tabelle erzeugen:
Tabellen-aufbau.png

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 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.

Beachten Sie: Die meisten Browser ergänzen ein fehlendes tbody-Element automatisch, so dass obiges Beispiel so übersetzt wird.
Beispiel
<table> <thead> <tr> <th>Kopf</th> </tr> </thead> <tbody> <tr> <td>Inhalt</td> </tr> </tbody> <tfoot> <tr> <td>Fuß</td> </tr> </tfoot> </table>

[Bearbeiten] Tabellenspalten

Die werden ausführlich in Gestaltung behandelt

[Bearbeiten] CSS

[Bearbeiten] siehe auch

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Schnell‑Index
Mitmachen
Werkzeuge
Spenden
SELFHTML