HTML table – Tabellen

HTML-Tabelle: Zeile für Zeile

table unterbricht den normalen Fluss von Texten und Bildern (table ist ein Block-Element) und wird in der nächsten Zeile eingefügt. Am Ende des table-Tags wird der Fluss der Texte und Bilder in der nächsten Zeile wieder aufgenommen.

HTML-Tabellen sind zeilenorientiert – d.h. sie werden Zeile für Zeile aufgebaut. Das Innenleben einer Tabelle besteht aus Tabellenzeilen (<tr>), in denen die einzelnen Tabellenzellen td und th liegen, und dem caption-Tag.

HTML Table Markup

Tabellen erben die Schrift und Schriftgröße von ihrem umfassenden Element, denn font-family und font-size gehören zu den CSS-Eigenschaften, die vererbt werden.

Der Inhalt von Tabellenzellen ist per Vorgabe vertikal zentriert (sieht man an den Bildern).

<table>
	<caption>HTML-Tabelle ohne Formatierung durch CSS-Eigenschaften</caption>
	<tr>
		<th>Titelbild</th>
		<td><img src="titanic.jpg" …></td>
		<td><img src="gormenghast.jpg" …></td>
		<td><img src="elefant.jpg" …></td>
		<td><img src="bienlein.jpg" …></td>
	</tr>
	<tr>
		<th>Autor</th>
		<td>Adams, Douglas</td>
		<td>Peake, Mervyn</td>
		<td>Pratchett, Terry</td>
		<td>Hergé</td>
	</tr>
	<tr>
		<th>Buchtitel</th>
		<td>Raumschiff Titanic</td>
		<td>Gormenghast</td>
		<td>Der 5te Elefant</td>
		<td>Professor Bienlein</td>
	</tr>
</table>

Tabellen nehmen per Vorgabe nur den Platz ein, den ihre Inhalte brauchen und Text in Tabellenzeilen bricht erst um, wenn die Tabelle die Breite des umfassenden Elements erreicht hat.

Im Quelltext oder Markup der Tabelle wird deutlich, dass die Reihenfolge der Inhalte nicht immer der logisch inhaltlichen Struktur folgt, die für Screenreader oder andere assistive Techniken nötig wäre. HTML-Tabellen sind nicht barrierefrei, wenn sie keinen korrekten semantischen Aufbau haben.

tr – Tabellenzeile

Das tr-Element (table row) erzeugt eine Zeile in einer Tabelle. Eine Tabelle kann beliebig viele Zeilen enthalten. Die Zeilen bestehen aus einer oder mehreren Zellen, jede Zelle kann jede Art von Daten enthalten. Die einzelnen Zellen innerhalb einer von tr-Elementen werden durch td- oder th-Elemente erzeugt.

Ein tr-Element darf nicht innerhalb von th-, td- oder anderen tr-Elementen stehen, wohl aber auch in tbody-, thead- oder tfoot-Elementen. Die Codesequenz ist

<tr>
	<th>Inhalt</th><th>Inhalt</th> … 
</tr> 
<tr>
	<td>Inhalte</td><td>Inhalt</td> … 
</tr> 

In Tabellenzeilen können sowohl td- als auch th-Element liegen.

Jede Zeile muss dieselbe Zahl von Zellen enthalten. Nur wenn die Tabellenzellen das rowspan- oder colspan-Attribut enthalten, das neben- oder untereinander liegende Zellen verbindet, kann die Zahl der td bzw. th-Elemente variieren.

Wenn eine Zeile in einer Tabelle durch einen Fehler zuwenige Zellen enthält, entsteht eine Lücke am Ende der Tabellenzeile und die Daten der Tabelle stimmen nicht mehr. Enthält eine Tabellenreihe zu viele Zellen, stellen die Browser die überzähligen Zellen am Ende der Reihe dar.

<table>
   <tr>
      <th>Rosen</th><th>Tulpen</th><th>Mohn</th>
   </tr>
   <tr>
      <td>Rosa centifolia</td><td>Recreado</td><td>Klatschmohn</td>
   </tr>
   <tr>
      <td>Rosa gallica</td><td>Schlafmohn</td>
   </tr>
</table>

Tabellenzellen verbinden: rowspan und colspan

Die HTML-Attribute rowspan und colspan fassen nebeneinander oder übereinander liegende Zellen einer Tabelle zeilen- oder spaltenweise zusammen. So verschmelzen Zellen über mehrere Spalten oder Zeilen.

<table class="small">
    <tr>
        <td colspan="2">11 und 12</td><td>13</td><td>14</td>
    </tr>
    …
    <tr>
        <td>31</td><td>32</td><td>33</td><td rowspan="2">34 und 44</td>
    </tr>
    <tr>
        <td>41</td><td>42</td><td>43</td>
    </tr>
</table>

Die Spalten einer Tabelle werden durch das colgroup-Tag in Gruppen zusammengefasst und über das col-Tag formatiert.

thead, tfoot

Neben tr- und td-Elementen für Tabellenzeilen und -spalten gibt es auch tbody, tfoot und thead. Diese Elemente müssen nicht verwendet werden, aber wenn sie fehlen, setzen die Browser sie automatisch ein.

Direkt innerhalb eines table-Elements dürfen nur die folgenden Elemente stehen:

• colgroup, col
• tr
• caption
• tbody, thead, tfoot

Für die Barrierefreiheit: Wird die HTML-Tabelle nur als Layout-Gerüst eingesetzt, sollen <th> und <caption> Tag nicht eingesetzt werden und auch kein summary-Attribut.

CSS für table

Die CSS-Regel border-collapse: collapse für table-Elemente verhindert den doppelten Rahmen zwischen nebeneinander liegenden Tabellenzellen. Die veralterten HTML-Attribute cellpadding und cellspacing werden durch die CSS-Eigenschaften padding und margin ersetzt.

table-layout: fixed baut große Tabellen schneller auf, caption-side legt fest, ob caption (Tabellenüberschrift) unter oder über der Tabelle gerendert wird.

HTML table für mobile Geräte

Tabellen mit vielen Spalten waren schon auf den Desktop-Monitoren ein Stolperstein, auf kleinen Monitoren werden sie entweder so weit verkleinert, dass sie nicht lesbar sind oder lassen das Design der Seite aus dem Rahmen fallen.

Diese Tabelle scrollt horizontal – aber mit welchem Hinweis würde der Leser das erkennen? Hier gibt das Symbol ◀ ███ ▶ dank einiger Zeilen Javascript einen Hinweis. Muss man aber auch erst verstehen ….

Mehr zu responsiven Tabellen

Cards / Karussell anstelle von HTML-Tabellen

Sind Tabellen nicht von vornherein für den Vergleich großen Datenmengen auf großen Monitoren gedacht, fallen sie heute aus der Zeit. Sie werden besser thematisch in Päckchen (Cards, u.U. in Karusells) untergebracht oder dargestellt.

Wenn tabellarischen Daten in semantisch logischer Reihenfolge vorliegen, lassen sie sich mit CSS als Cards oder Päckchen darstellen: CSS für Tabellen.

Attribute für table

border, cellpadding, cellspacing, frame, rules, summary und width waren Attribute für table, th und td in HTML4. Sie sind in HTML5 nicht mehr vertreten und werden heute durch CSS ersetzt.