Tabelle

Tabelle mit caption/ Überschrift
Tabellenzellen verbinden colspan, rowspan
Horizontale Bereiche: thead, tbody, tfoot
Vertikale Bereiche, Spaltengruppen: colgroup, col
Barrierefreie Tabellen für nicht visuelle Medien

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 (table row) Elemente um die Reihen zu definieren. In den Reihen erzeugt man eine Anzahl von th (table headline) 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.

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

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

Tabellenbereiche thead, tbody, tfoot

Man kann eine Tabelle in horziontale Bereiche aufteilen, um sie semantisch zu strukturieren und sie mit CSS zu formatieren. Auch Screenreader können von dieser Aufteilung profitieren.

Tabellenkopf <thead>
Inhaltsbereich <tbody>
Tabellenfuß <tfoot>

Diese Elemente umschließen eine oder mehrere tr Reihen.
Im thead sollten nur th Elemente vorkommen.
thead und tfoot darf nur einmal vorkommen. tbody kann man mehrmals einsetzen.
Achtung Auch wenn man die Elemente nicht setzt sind sie vorhanden. Das kann man daran erkennen, dass man in CSS mit dem tbody Elementselektor Eigenschaften zuweisen kann und diese sichtbar sind, obwohl man kein tbody Element in HTML eingefügt hat. Auch im Chrome Developer erscheint das nicht gesetzte tbody - Element.

<table>

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

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

</table>

Das folgende Beispiel enthält einen thead Bereich der die Überschriften der einzelnen Spalten enthält. Eine Gliederung in Tag und Nacht wurde mit 2 tbody Elementen erreicht. Im tfoot Bereich erscheinen zusätzliche Informationen.

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. colgroup ist dazu gedacht Spaltenbreiten vorzudefinieren. Diese logischen Strukturen lassen sich dann mit CSS formatieren und außerdem kann man für Screenreader nutzen.
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. Jede Spalte bekommt ein col Element.

Mit dem span Element innerhalb des col Elements definiert man den Erstreckungsraum einer Spalte. Im folgendem Beispiel werden die ersten beiden Spalten zusammengefasst. Dadurch hat man insgesamt ein col Element weniger.

<colgroup> <col span="2" style="background-color:red;"> <col style="background-color: green;"> </colgroup>

so sieht's aus

Tabelle für nicht visuelle Medien

siehe auch A11Y 101

siehe auch www.zweiterblick.at

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.

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.
In Kopfzellen einen Bezug zu abhängigen Datenzellen herstellen.

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 th oder einem col soll ein Bezug zu den Datenzellen hergestellt werden. Das machen anscheinend die Screenreader unterschiedlich.

Es sind folgende Werte möglich:

siehe Beispiel

siehe auch Beispiel Wiki

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. Der Screenreader liest von oben nach unten, also spaltenweise. Im Beispiel gibt es th Zellen sowohl in der ersten Reihe als auch in der ersten Spalte. Die Tabelle sollte aber von oben nach unten vorgelesen werden.	Beispiel
	row	Der Screenreader liest zeilenweise. Zeilenüberschriften, der Inhalt aller Zellen der gleichen Zeile werden angesprochen.
	colgroup	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.