Tabelle

Tabellen bestehen aus Reihen und Spalten und werden für jede Art von tabellarischen Daten verwendet. Eine tabellarische Anordnung kann auch eine Thumbnail Galerie von Bildern oder Auflistung innerhalb eines Formulars sein. Man verwendet Tabellen nicht, um das Layout einer Webseite zu bestimmen, dazu verwendet man CSS.

Eine einfache Tabelle besteht aus einer oder mehreren Zeilen und Spalten. Die Tabelle wird vom Element table umschlossen.

Es folgen tr Elemente um die Reihen zu definieren. In den Reihen erzeugt man eine Anzahl von th (table head) oder td (table data) Elementen, um die Spalten zu definieren. Die Anzahl der Spalten sollte in allen Reihen gleich sein. Somit wird in der ersten Reihe die Anzahl festgelegt.

th Elemente sind Kopfzellen. Darin ist nur Phrasing Content erlaubt, Elemente die keine neue Zeile im Textfluss erzeugen.

In einer Datenzelle td ist Flow-Content erlaubt. Das ist Text und die meisten anderen HTML Elemente, sogar eine komplette weitere Tabelle kann innerhalb einer Datenzelle eingefügt werden.

<table>
    <tr>
      <th>Spalte 1</th>
      <th>Spalte 2</th>
    </tr>
    
    <tr>
      <td>Spalte 1</td>
      <td>Spalte 2</td>
    </tr>
</table>

so sieht's aus:

HTML stellt bei Tabellen kaum Formatierungsmöglichkeiten zur Verfügung. Die werden per CSS definiert. Alle älteren HTML Attribute, die zur Formatierung der Tabellen eingesetzt wurden, sind mit HTML 5 veraltet.

Die Browser stellen Tabellen standardmäßig ohne Rahmen dar. Die Größe der Tabelle und Tabellenzellen passt sich dem Inhalt an. Vertikal werden die Inhalte per Standard mittig ausgerichtet. Das kommt zum Tragen, wenn die Inhalte in den Tabellenzellen unterschiedlich hoch sind.

Der Gültigkeitsbereich einer Tabellenzelle darf auch leer sein. Ein erzwungenes Leerzeichen ist nicht erforderlich. Per CSS kann man das Aussehen einer leeren Tabellenzelle bestimmen.

Tabellenbeschriftung caption

Direkt nach dem table Element kann man eine Tabellenbeschriftung notieren. Das Element caption muss direkt nach dem table Element vor allen anderen Elementen notiert werden. In diesem Titelbereich kann eine Überschrift oder auch eine Legende zur Tabelle notiert werden.

Die Tabellenüberschrift kann man mittels CSS auch seitlich oder unterhalb einer Tabelle positionieren.

so sieht's aus:

<table>
<caption>Überschrift </caption>
<tr>
<td>Spalte 1</td>
<td>Spalte 2</td>
</tr>
</table>

 

Tabellenbereiche Kopf, Inhalt, Fuß

Man kann eine Tabelle in 3 horizontale Bereiche aufteilen.

Tabellenkopf <thead>

Inhaltsbereich <tbody>

Tabellenfuß <tfoot>

 

Der Tabellenkopf wird von dem Element <thead> </head>umschlossen. Darin werden ein oder mehrere Reihen mit th-oder td- Elementen eingefügt.

Der Tabellenfuß wird direkt nach dem Tabellenkopf auf gleiche Weise notiert. Das Element ist <tfoot></tfoot> Der Tabellenfuß wird jedoch unterhalb des Tabelleninhalts angezeigt.

Nach dem Tabellenfuß kann man mittels <tbody> den Inhaltsbereich definieren.

Man muss eine Tabelle nicht auf diese Weise formatieren, wenn man jedoch diese Aufteilung nutzt, muss folgende Reihenfolge eingehalten werden.

Achtung! Die Tabelle wird nicht in dieser Reihenfolge angezeigt.

  1. thead
  2. tfoot
  3. tbody

thead und tfoot darf nur einmal vorkommen. tbody kann man mehrmals einsetzen.

<table>

  <thead>
    <tr>....</tr>
  </thead>

  <tfoot>
    <tr>....</tr>
  </tfoot>

 <tbody>
    <tr>....</tr>
  </tbody>

</table>

so sieht's aus

Spalten und Spaltengruppen

Neben der horizontalen Einteilung einer Tabelle besteht auch die Möglichkeit eine vertikale Einteilung mittes Spalten und Spaltengruppen mit HTML zu definieren. Diese logischen Strukturen lassen sich dann mit CSS formatieren.
Achtung! CSS Angaben für colgroup und col Elemente werden von CSS Angaben für thead, tfoot, tbody überschrieben

Mittels dem Element colgroup kann man Spalten und Spaltengruppen definieren. Die Definition erfolgt noch vor allen Elementen wie thead, tfoot, tbody, tr.

Mit colgroup erzeugt man eine Spaltengruppe. Darin werden die einzelnen Spalten mit dem Standalone- Tag col notiert.

Es gibt hier 2 Möglichkeiten.

Das folgende Beispiel zeigt eine mögliche Einteilung für eine dreispaltige Tabelle. Die ersten beiden Spalten werden durch span="2" zusammengefasst. Die dritte Spalte wird in einer weiteren colgroup eingeschlossen.
<colgroup span="2"></colgroup>

<colgroup>
  <col>
</colgroup>

Tabellenzellen verbinden

Man kann zwei oder mehr Tabellenzellen miteinander verbinden. Das kann innerhalb einer Reihe geschehen oder man verbindet Tabellenzellen spaltenweise über Reihen hinweg. Auch beides zusammen ist möglich.

Tabellenzellen innerhalb einer Reihe verbinden

colspan Attribut

Hier werden mehrere Tabellenzellen innerhalb einer Reihe verbunden, so dass sich die Zelle über mehrere Spalten erstreckt.

Mit dem Attribut colspan gibt man in einer ganzzahligen Wertzuweisung die Anzahl der Spalten an, über die sich die Tabellenzelle erstrecken soll. Dadurch verringert sich die Anzahl der td oder th Elemente innerhalb der Reihe.

<table>
  <tr>
    <td colspan="2"></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>
so sieht's aus:

Tabellenzellen über Reihen hinweg verbinden

rowspan Atrribut

Dem Attribut rowspan übergibt man die Anzahl der Reihen der über das sich die Tabellenzelle erstrecken soll. Die Anzahl der Zellen innerhalb der Reihen muss enstprechend angepasst werden, so dass die Summe aller Zellen in jeder Reihe gleich ist.

<table>
  <tr>
    <td rowspan="2"></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

so sieht's aus

 

Zusammenfassung einer Tabelle für nicht visuelle Medien

siehe auch WebbIE Browser für Blinde

Tabellen lassen sich visuell schnell erfassen. Das ist allerdings bei nicht visuellen Medien wie Sprachausgabesysteme für Blinde nicht so einfach. Diesbezüglich wurde eine Reihe von Attributen eingeführt, mit denen man die Möglichkeit hat, eine Tabelle näher zu erläutern. Diese Informationen werden von den sprachlichen Ausgabemedien vorgelesen.

summary Attribut (veraltet, kein HTML5 Standard)

Mit dem summary Attribut innerhalb des table Elements kann man einen erklärenden Text zur Tabelle für nichtvisuelle Medien eingeben. summary bedeutet Zusammenfassung. Diese Zusammfassung bezieht sich auf Informationen, die die Art der Tabelle definieren, welche bei visueller Darstellung ohnehin ersichtlich ist. Eine inhaltliche Zusammfassung der Tabelle sollte in dem caption Element erfolgen.

<table summary="Das ist eine vierspaltige Tabelle. Die erste Spalte jeder Reihe ist eine Kopfzelle. Alles weitere sind Datenzellen.">

details & summary Element

Statt des summary Attributs sollte man die neuen semantischen Elemente verwenden.

Im folgenden Beispiel ist bei Browsern, die diese Element kennen nur das Wort "Info" sichtbar, welches anklickbar ist. Durch Anklicken erscheint der erklärende Text.

so sieht's aus:

Alternative Überschriften in Kopfzellen

Mit dem Attribut abbr kann man in Kopfzellen alternative Überschriften für nicht visuelle Anzeigegeräte definieren.

<th abbr="Fußballverein Dortmund">BVB</th>

Kopfzellenbezug herstellen

Es gibt 2 Möglichkeiten für nicht-visuelle Medien einen Kopfzellenbezug herzustellen. Die Ausgabesysteme lesen dann die Bezüge vor, z.B. Stadt 1 Hamburg

In Datenzellen einen Kopfzellenbezug herstellen.

Innerhalb der Kopfzelle wird ein id Attribut mit einem eindeutigen Wert vergeben. Die Datenzellen stellen dann mit dem Attribut headers = Kopfzelle den Bezug dazu her.

so sieht's aus

In Kopfzellen einen Bezug zu abhängigen Datenzellen herstellen.

Mit dem Attribut scope innerhalb einer Kopfzelle wird ein Bezug zu den Datenzellen hergestellt.

Es sind folgende Werte möglich:

scope Attribut für th-Elemente
Attribut Wert Bedeutung Beispiel
scope col Spaltenüberschrift, der Inhalt der Kopfzelle ist für alle Zellen der darunterliegenden Spalte gültig. Beispiel
row Zeilenüberschriften, der Inhalt aller Zellen der gleichen Zeile werden angesprochen. Beispiel
colgroup Spaltenüberschriften bei Spaltengruppen. Alle Zellen die in dieser Spaltengruppe definiert sind, werden angesprochen.  
rowgroup Zeilengruppen. Die Zellen die einer Zeilengruppe angehören werden durch thead, tbody und tfoot definiert. Beispiel

Tabellenlayout

Bevor man Webseiten mit CSS formatierte wurde das Layout einer Webseite mit Tabellen angelegt. Auch heute hat man die Möglichkeit das Layout einer Seite mit den Möglichkeiten der Tabellenanzeige zu gestalten. Dazu werden jedoch nicht HTML- Tabellenelemente eingesetzt, stattdessen wird mittels der CSS Eigenschaft display eine derartige Anzeige erreicht.