HTML5: Tabellen

Tabellen dienen der Strukturierung von Daten in einer tabellarischen Form. Werden in (X)HTML also Elemente verwendet, die zur Auszeichnung von Tabellen gedacht sind, sind die darin enthaltenen Informationen automatisch miteinander korreliert.

Trotzdem wurden früher zur Zeit von HTML von vielen Autoren die Tabellenelemente fehlerhaft eingesetzt. Sie wurden zur Ausrichtung und Anordnung von nicht miteinander korrelierten Informationen verwendet, um Dokumente zu dekorieren. Vor der Einführung von CSS war dies die einzige Methode, um dies zu erreichen, daher ist der Mißbrauch nachvollziehbar, zeigt aber trotzdem, daß von diesen Autoren (X)HTML nicht verstanden wurde.

Zudem sind Tabellen in (X)HTML immer so darzustellen, daß die Korrelation der Daten darin gut verständlich ist. Ein Darstellungsprogramm soll gegebenenfalls also andere Angaben des Autors ignorieren, um eine gute Verstehbarkeit für den Leser zu gewährleisten. Damit ergibt sich bereits, daß eine definierte Anordnung von Inhalt (Layout) mit Tabellen nicht möglich ist, zudem kann die Darstellung zwischen Darstellungsprogrammen variieren, da diese für ihre jeweiligen Nutzer andere Möglichkeiten der optimierten Lesbarkeit von korrelierten Daten gefunden haben mögen.

Werden unkorrelierte Daten in Tabellen als korrelierte Daten notiert, fällt es bei Programmen mit nicht visueller Darstellung natürlich besonders schwer, die Darstellung zu verstehen, weil auch diese Programme versuchen werden, die (nicht vorhandene) Korrelation von Daten gut verständlich zu machen.

Somit sollten Tabellen also nur dafür verwendet werden, um korrelierte Daten korrekt und – verständlich darzustellen. Typische Anwendungen aus dem Alltag wären zum Beispiel Stundenpläne, Fahrpläne, Statistiken mit mehreren Variablen. Zur besseren Verständlichkeit gibt es zudem spezielle Strukturen wie Tabellenbeschriftungen und Zusammenfassungen, Kopfzellen. Bei einer korrekten Anwendung einer Tabelle wird man automatisch das Bedürfnis haben, diese Strukturen häufig zu verwenden. Anders herum, kann man mit diesen Strukturen nichts anfangen, ist dies ein deutliches Indiz, daß es sich wohl um keine Anwendung für Tabellenelemente handelt.

Hinsichtlich eines sinnvollen Layouts wie auch der optischen Gestaltung von Tabellen sei auf CSS verwiesen. Um die Lesbarkeit von Tabelleninhalten zu optimieren, verfügt (X)HTML über diesbezügliche Grundfunktionen, allerdings nicht im Umfange einer freien, dekorativen Gestaltung einer Tabelle. Dekorations- und Layoutfragen werden behandelt im entsprechenden Kapitel im Wikibook: CSS.

Grundgerüst einer Tabelle

Zur Umsetzung von Tabellen sind mindestens vier Elemente notwendig. table (deutsch: Tabelle) dient zur Einleitung der Tabelle. Das Element ist ein Blockelement mit speziellem Inhaltsmodell, kann also notiert werden, wo fließender Inhalt oder Blockelemente erwartet werden.

tr wird als Kindelement von table notiert und definiert eine neue Tabellenzeile für mehrere Tabellenzellen.

Mit th (englisch: table header, deutsch: Tabellenkopf) kann man Zellen mit Kopfinformationen füllen und mit td (englisch: table data, deutsch: Tabellendaten) wird eine neue Tabellenzelle erzeugt, die Daten enthält. In dieser Reihenfolge müssen die Elemente auch ineinander verschachtelt werden. th und td sind also wiederum Kindelemente von tr. In ihnen kann fließender Inhalt notiert werden. Im Sinne einer sinnvollen inhaltlichen Struktur also entweder Phraseninhalt oder Blockelemente.

Ein sehr einfaches Beispiel ist folgendes:

<table>
    <tr>
        <th>Überschrift, 1. Spalte</th>
        <th>Überschrift, 2. Spalte</th>
        <th>Überschrift, 3. Spalte</th>
    </tr>
    <tr>
        <td>1. Zeile, 1. Spalte</td>
        <td>1. Zeile, 2. Spalte</td>
        <td>1. Zeile, 3. Spalte</td>
    </tr>
    <tr>
        <td>2. Zeile, 1. Spalte</td>
        <td>2. Zeile, 2. Spalte</td>
        <td>2. Zeile, 3. Spalte</td>
    </tr>
    <tr>
        <td>3. Zeile, 1. Spalte</td>
        <td>3. Zeile, 2. Spalte</td>
        <td>3. Zeile, 3. Spalte</td>
    </tr>
</table>

Das wird zum Beispiel wie folgt präsentiert (das hängt von der verwendeten Stilvorlage ab):

Überschrift, 1. Spalte	Überschrift, 2. Spalte	Überschrift, 3. Spalte
1. Zeile, 1. Spalte	1. Zeile, 2. Spalte	1. Zeile, 3. Spalte
2. Zeile, 1. Spalte	2. Zeile, 2. Spalte	2. Zeile, 3. Spalte
3. Zeile, 1. Spalte	3. Zeile, 2. Spalte	3. Zeile, 3. Spalte

Element table

Das Element table ist ein Blockelement. Es wird erwartet, wo fließender Inhalt erwartet wird. Bei einer sinnvollen Struktur ist es also auf gleicher Ebene wie andere Blockelemente einzusetzen, nicht wie Phrasenelemente.

Der Inhalt ist für dieses Element spezifisch. Was als Inhalt korrekt ist, hängt stark von der betrachteten Version von (X)HTML ab. Dies hängt mit einer Konfusion in HTML5 zusammen, in HTML5.0 wurde zunächst das ältere Modell lediglich erweitert, in HTML5.1 wurde die von HTML4 sowie XHTML1.x vorgesehene Reihenfolge der Elemente inkompatibel ungültig. Eine in allen Versionen gültige Reihenfolge ist nur möglich, wenn generell mindestens auf das Element tfoot verzichtet wird.

Das Element table kann optional an erster Stelle ein Element caption für eine Tabellenüberschrift enthalten.

Ferner gibt es die optionalen Elemente colgroup. Diese können zu Beginn, nach dem optionalen caption notiert werden, entweder ein oder mehrere Elemente colgroup. Diese dienen dazu, die Struktur der Tabellen vor dem eigentlichen Datenbereich festzulegen.

Im einfachen Modell können dann ein oder mehr Elemente tr notiert werden.

Alternativ kann ein strukturiertes Modell verwendet werden. Dann wird direkt in table kein tr notiert.

Strukturiertes Modell kompatibel zu HTML4, XHTML1.x, HTML5.0:
Nach caption wird genau ein thead für Kopfzeilen notiert und danach optional genau ein tfoot für Fußzeilen. Diesen folgt dann mindestens ein Element tbody für den eigentlichen Tabellenkörper.

Strukturiertes Modell kompatibel zu HTML5.0, 5.1, 5.2 (eventuell auch weitere Unterversionen 5.x):
Nach caption wird genau ein thead für Kopfzeilen notiert. Diesen folgt dann mindestens ein Element tbody für den eigentlichen Tabellenkörper. Danach kann optional genau ein tfoot für Fußzeilen folgen.

table hatte in früheren Versionen neben den allgemein verwendbaren einige Attribute, die spezifisch für dieses Element sind. Bis auf ein Attribut sind in HTML5 alle spezifischen Attribute gestrichen. Verblieben ist das Attribut border. Ohne die gestrichenen Attribute sowie ohne passende Autorenstilvorlage per CSS kann es bei der visuellen Darstellungen Probleme mit guter Lesbarkeit oder Verständlichkeit der Präsentation geben.

Attribut border

Mit dem Attribut border kann angegeben werden, ob die Tabelle bei einer visuellen Darstellung einen sichtbaren Rahmen haben soll. Der Wert ist leer oder eine '1' und entspricht einem darzustellenden Rahmen. Ist das Attribut nicht angegeben, entspricht das effektiv einer Darstellung ohne Rahmen. Oft verbessert ein sichtbarer Rahmen die Lesbarkeit der Tabelleninformation bei visueller Darstellung.

Tabellenüberschrift, Element caption

Mit dem Element caption, welches als erstes Kindelement von table notiert werden kann, wird eine Tabellenüberschrift angegeben.

Der Inhalt von caption ist fließender Inhalt.

Hinsichtlich der Verstehbarkeit von Tabellen ist eine solche Überschrift ein sehr wichtiger Bestandteil einer Tabelle. Im klassischen Sinne sind Überschriften Kurzzusammenfassungen, in diesem Falle also eine Kurzdarstellung des Themas der Tabelle.

Beispiel:

<table border="">
    <caption>Wahrheitstabelle</caption>
    <tr><th>und</th><th>0</th><th>1</th></tr>
    <tr><th>0</th><td>0</td><td>0</td></tr>
    <tr><th>1</th><td>0</td><td>1</td></tr>
</table>

Wahrheitstabelle
und	0	1
0	0	0
1	0	1

Tabellenzeilen, Element tr

Mit dem Element tr werden alle Zellen einer Tabellenzeile zusammengefaßt. Möglicher Inhalt sind die Elemente th und td. Mindestens eines davon sollte notiert werden, um eine sinnvolle Tabelle zu erhalten, mehrere in beliebiger Reihenfolge sind erlaubt.

Tabellenzellen, Elemente th und td

In den Tabellenzellen th und td kann beliebiger fließender Inhalt stehen. Um eine gute Struktur zu bekommen, sollte man sich nur entscheiden, ob man als direkte Kindelemente nur Blockelemente verwendet oder nur Text und Phrasenelemente.

th wird für Tabellenköpfe verwendet, sowohl für Spalten als auch Zeilen. Sie geben also an, welcher Variable oder welchem Objekt die Daten in einer Spalte oder Zeile zugeordnet sind.

Um Spalten zu kennzeichnen, sind typisch die Zellen im ersten tr beziehungsweise im letzten tr Element vom Typ th, in denen dann die Beschriftung steht. Im strukturierten Modell wären das dann entsprechend Elemente in thead und tfoot.

Um Zeilen zu kennzeichnen, ist typisch das erste oder letzte Kindelement eines jeden tr ein Element th.

In td stehen die eigentlichen Zellendaten der Tabelle. td sollte auch verwendet werden, wenn eine Zelle Inhalt enthält, der sowohl als Kopfinformation als auch als normaler Zelleninhalt interpretiert werden kann. th und td haben neben den allgemein verwendbaren auch einige spezifische Attribute, die allesamt optional sind.

Werden unterschiedlich viele Zellen pro Zeile beziehungsweise Spalte angegeben, so werden entsprechend weitere leere Zellen impliziert, bis es paßt. Da mit rowspan und colspan auch Zellen über mehrere Zeilen oder Spalten ausgedehnt werden können, zählen solche Zellen dann natürlich entsprechend mehrfach, daß heißt, es werden dann wirklich entsprechend weniger Elemente in der jeweiligen Zeile oder Spalte notiert. Passend gemacht wird dann alles unter Einbeziehung von rowspan und colspan.

Attribut scope

Mit dem Attribut wird angegeben, auf welche Tabellenzellen sich eine Kopfinformation bezieht. Ein solches Attribut ist verwendbar für th-Elemente.

Das Attribut wird dann im Kopfelement notiert, mögliche Werte sind:

row: Die Zelle, in der das Attribut notiert ist, enthält die Kopfinformation für den Rest der Zeile.
col: Die Zelle, in der das Attribut notiert ist, enthält die Kopfinformation für den Rest der Spalte.
rowgroup: Die Zelle, in der das Attribut notiert ist, enthält die Kopfinformation für den Rest der Zeilengruppe (Zellen im zugehörigen thead, tfoot oder tbody).
colgroup: Die Zelle, in der das Attribut notiert ist, enthält die Kopfinformation für den Rest der Spaltengruppe (Struktur gemäß der Elemente colgroup oder col)

Attribut headers

Mit dem Attribut wird angegeben, welche Kopfzelle sich auf die Datenzelle bezieht, in welcher headers notiert ist.

Anders als bei scope wird hier als Wert des Attributes allerdings eine Liste von Fragmentidentifizierern der Zellenelemente angegeben, in welchen sich die Kopfinformation befindet. Zwei aufeinanderfolgende Listenpunkte werden dabei mit einem Leerzeichen voneinander separiert. Da keine Klassen angegeben werden können, können solche Listen folglich sehr lang werden. Damit läßt sich aber eine nahezu beliebige Zuordnung erreichen, währendscope bereits eine gute Struktur voraussetzt. Bei gut strukturierten einfachen Tabellen wird man es also offenbar effizienter und einfacher haben, scope zu verwenden. Andererseits kann es bei mehr als zwei Variablen notwendig werden, mehrdimensionale Datensätze zu verschachteln, wofür dann headers viel flexibler einsetzbar ist.

Es ist jedenfalls zu empfehlen, nur eines der beiden Attribute scope und headers zu verwenden, auch schon um Widersprüche zu vermeiden. Im Konfliktfalle ist nicht definiert, welche Information Vorrang hat.

Attribut abbr

Mit dem Attribut kann eine Abkürzung für den Tabelleninhalt angegeben werden. Das Attribut ist verwendbar bei th. Bei einer akustischen Wiedergabe (Vorlesen) kann so bei jeder Datenzelle die Abkürzung statt des kompletten Kopfes verwendet werden, nachdem bei der Kopfzelle selbst wiedergegeben wurde, wofür die Abkürzung steht. Das kann die Verstehbarkeit vorgelesener Tabellen deutlich verbessern. Das ist folglich nur hilfreich, wenn mittels scope oder headers die Kopfinformation mehreren Zellen zugeordnet wird, also somit mehrmals vorgelesen werden müßte, was bei den Datenzellen durch die Abkürzungen ersetzt werden kann.

Wert des Attributes ist einfacher Text, der eine Abkürzung des Tabelleninhaltes darstellt.

Spannweite von Zellen, Attribute rowspan und colspan

Manchmal kann es vorkommen, daß mehrere Zellen zu einer zusammengefaßt werden sollen, die nebeneinander oder übereinander stehen. Um dies zu realisieren, gibt es die Attribute rowspan und colspan.

Mittels rowspan wird angegeben, auf wieviele Zeilen eine Zelle ausgedehnt werden soll.

Mittels colspan wird angegeben, auf wieviele Spalten eine Zelle ausgedehnt werden soll.

Der Wert ist jeweils eine (ganze, positive) Zahl, also die Anzahl der Zeilen, beziehungsweise Spalten. Sofern nicht angegeben, wird jeweils '1' angenommen.

Ein Beispiel:

<table border="">
    <tr>
        <td colspan="2">Zelle mit colspan="2"</td>
        <td rowspan="3">Zelle mit rowspan="3"</td>
    </tr>
    <tr>
        <td>2. Zeile, 1. Spalte</td>
        <td>2. Zeile, 2. Spalte</td>
    </tr>
    <tr>
        <td>3. Zeile, 1. Spalte</td>
        <td>3. Zeile, 2. Spalte</td>
    </tr>
</table>

Zelle mit colspan="2"		Zelle mit rowspan="3"
2. Zeile, 1. Spalte	2. Zeile, 2. Spalte
3. Zeile, 1. Spalte	3. Zeile, 2. Spalte

Es ist zu erkennen, daß die erste Zelle mit colspan sich über zwei Zellen erstreckt. Die Zelle mit rowspan spannt sich über alle drei Zeilen. Zu beachten ist, daß sich Zellen immer von links nach rechts beziehungsweise von oben nach unten spannen, und die Zellen, über die gespannt wird, herausgenommen werden müssen.

Zeilengruppen, Elemente thead, tfoot, tbody

Die Zeilen einer Tabelle können zu Gruppen angeordnet werden, um die jeweilige Funktion genauer herauszustellen. Dazu werden ein thead (Tabellenkopf), ein tfoot (Tabellenfuß) und ein oder mehrere tbody (Tabellenkörper) notiert. Die Reihenfolge hängt von der HTML-Version ab, siehe oben zum strukturierten Inhaltsmodell von table. Mögliche Inhalte der drei Elemente sind jeweils ein oder mehrere Elemente tr.

Unter anderem ist diese Einteilung auch praktisch, wenn eine lange Tabelle ausgedruckt werden soll. Eine mögliche Umsetzung wäre dann zum Beispiel, daß auf jeder ausgedruckten Seite die Kopf- und Fußinformationen zu den Spalten der Zeilen erscheinen. Andere Umsetzungen und Nutzungen der Strukturinformationen durch das Darstellungsprogramm sind natürlich auch möglich. Ansonsten dient natürlich auch die Einteilung in Kopf, Fuß und Körper der Strukturierung des Inhaltes und hilft dem Autor, die Daten verständlicher zu notieren und dem Leser beim Verstehen des Inhaltes.

Neben den allgemein nutzbaren Attributen hatten die drei Elemente in früheren Versionen auch einige spezifische Attribute, die in HTML5 gestrichen wurden.

Beispiel (kompatibel zu HTML4, XHTML1.x, HTML5.0. Diese Reihenfolge ist insbesondere hilfreich für Programme, welche Inhalte automatisch in Seiten einteilen, diese sollten die jeweilige Teiltabelle auf einer Seite jeweils mit Kopf und Fuß versehen. Weil hier der Fuß vor dem Körper notiert ist, muß solch ein Programm nicht die gesamte Tabelle analysieren, um die Seiteneinteilung vornehmen zu können):

<table border="">
  <thead>
    <tr>
      <th>Buchstabe</th>
      <th>Stadt</th>
      <th>Land</th>
      <th>Fluß</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Nur lateinische Buchstaben</td>
      <td>Größer als 10 Tausend Einwohner</td>
      <td>Größer als 50 Tausend km<sup>2</sup></td>
      <td>Breite größer als 20 Meter</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>D</td>
      <td>Darmstadt</td>
      <td>Deutschland</td>
      <td>Donau</td>
    </tr>
    <!-- … -->
  </tbody>
</table>

Beispiel (kompatibel zu HTML5.0, 5.1, 5.2, eventuell weitere Versionen von HTML5. Diese Variante ist etwas einfacher in endlosen Rollmedien zu präsentieren, weil die Elemente in der Reihenfolge der Präsentation notiert sind.):

<table border="">
  <thead>
    <tr>
      <th>Buchstabe</th>
      <th>Stadt</th>
      <th>Land</th>
      <th>Fluß</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>D</td>
      <td>Darmstadt</td>
      <td>Deutschland</td>
      <td>Donau</td>
    </tr>
    <!-- … -->
  </tbody>
  <tfoot>
    <tr>
      <td>Nur lateinische Buchstaben</td>
      <td>Größer als 10 Tausend Einwohner</td>
      <td>Größer als 50 Tausend km<sup>2</sup></td>
      <td>Breite größer als 20 Meter</td>
    </tr>
  </tfoot>
</table>

colgroup und col

Mit Hilfe von colgroup (englisch: column group, deutsch: Spaltengruppe) und col (englisch: column, deutsch: Spalte) ist es möglich, dem Darstellungsprogramm frühzeitig die Anzahl der Spalten und die Breite der einzelnen Spalten zu übermitteln. So können Verzögerungen und somit leere Inhalte beim Laden der Seite vermieden werden.

Dazu werden die Elemente colgroup hinter dem gegebenenfalls vorhandenen caption und vor thead notiert, beziehungsweise falls keine Strukturierung mit thead, tfoot, tbody erfolgt, vor dem ersten tr.

Mit colgroup können entweder Angaben zu mehreren gleichartigen Spalten notiert werden oder damit können mehrere Spalten zu einer Gruppe zusammengefaßt werden. Einzelne Spalten werden dann darin mittels col gekennzeichnet. Während mit colgroup eine inhaltliche Aussage über die Struktur der Tabelle gemacht wird, macht col keine Aussage über die inhaltliche Struktur der Tabelle, sondern dient nur der Aufnahme von Attributen zur praktischen Umsetzung der Struktur.

col selbst hat keinen Inhalt, colgroup kann mehrere Elemente col als Inhalt haben, falls nicht das Attribut span bei colgroup gesetzt ist.

Attribut span

Der Wert von span ist eine ganze Zahl, die größer als 0 ist. Bei colgroup notiert gibt sie die Anzahl gleichartiger Spalten der Gruppe an. Dies ist für colgroup nur zulässig, wenn keine Kindelemente col notiert werden. Sind diese vorhanden, wird das Attribut ignoriert.

Ist das optionale Attribut nicht notiert, so richtet sich die Anzahl der Spalten nach den Kindelementen col von colgroup. Sind diese nicht vorhanden und auch das Attribut nicht notiert, so wird eine Spalte angenommen.

Auch beim Element col kann das Attribut span notiert werden. Sofern vorhanden, gibt es an, wieviele gleichartige Spalten damit repräsentiert werden. Ist also eine Zahl S größer als 1 notiert, so teilt col seine Attributwerte mit den nächsten S-1 Spalten.

Beispiele zu colgroup und col

<table>
    <colgroup>
       <col />
       <col span="2" />
    </colgroup>
    <tr>
        <th>Überschrift, 1. Spalte</th>
        <th>Überschrift, 2. Spalte</th>
        <th>Überschrift, 3. Spalte</th>
    </tr>
    <tr>
        <td>1. Zeile, 1. Spalte</td>
        <td>1. Zeile, 2. Spalte</td>
        <td>1. Zeile, 3. Spalte</td>
    </tr>
</table>

  <colgroup span="3"></colgroup>

oder nur für XML-Notation kurz:

  <colgroup span="3" />

(Man beachte, daß diese Variante nicht rückwärtskompatibel zur Markierungssuppenvariante ist.)

Zurück zu Verweissensitive Graphiken |

Hoch zum Inhaltsverzeichnis |

Vor zu Formulare

td>0