PFAD: ./module/html/html2/

DATEI: string(25) "00Inhaltsverzeichnis2.php"
DATEI: string(15) "03HTML-Text.php"
DATEI: string(17) "04HTML-Listen.php"
DATEI: string(19) "05HTML-Tabellen.php"
DATEI: string(29) "06HTML-Tabellen-Erweitert.php"
DATEI: string(36) "07HTML-Tabellen-Barrierefreiheit.php"

html mit Adi Prinz

Tabellenaufbau

HTML-Tabellen stellen zusammengehörende Daten in Zeilen und Spalten dar. Sie eignen sich beispielsweise für Preislisten, Stundenpläne, Messwerte oder Produktvergleiche.

Wichtig: Tabellen sollten ausschließlich für tabellarische Daten verwendet werden. Für die Gestaltung und Anordnung einer Webseite sind CSS Grid, Flexbox oder andere CSS-Layouttechniken vorgesehen.

Grundstruktur einer Tabelle

Eine einfache Tabelle besteht aus dem Tabellenelement <table>, mehreren Tabellenzeilen <tr> und den darin enthaltenen Tabellenzellen <td>. 

<table>
  <tr>
    <td>HTML</td>
    <td>Struktur</td>
  </tr>

  <tr>
    <td>CSS</td>
    <td>Gestaltung</td>
  </tr>
</table>
Element Bedeutung
<table> Umschließt die gesamte Tabelle
<tr> Erstellt eine Tabellenzeile; table row
<td> Erstellt eine Datenzelle; table data cell
<th> Erstellt eine Überschriftenzelle; table header cell

Alle Zeilen einer Tabelle sollten grundsätzlich zur vorgesehenen Tabellenstruktur passen. Eine einfache Datentabelle besitzt normalerweise in jeder Zeile dieselbe Anzahl an Zellen.

Überschriftenzellen

Spalten- und Zeilenüberschriften werden mit dem Element <th> ausgezeichnet. Dadurch erhalten die Zellen eine semantische Bedeutung als Überschriften. 

<table>
  <tr>
    <th>Sprache</th>
    <th>Aufgabe</th>
  </tr>

  <tr>
    <td>HTML</td>
    <td>Struktur und Bedeutung</td>
  </tr>

  <tr>
    <td>CSS</td>
    <td>Gestaltung und Layout</td>
  </tr>
</table>

Browser stellen den Inhalt von Überschriftenzellen normalerweise fett und zentriert dar. Entscheidend ist jedoch nicht diese voreingestellte Gestaltung, sondern die semantische Kennzeichnung der Überschrift.

Hinweis: Screenreader können Tabellen leichter verständlich vorlesen, wenn Überschriften korrekt mit <th> ausgezeichnet werden.

Zuordnung mit dem Attribut scope

Das Attribut scope gibt an, ob sich eine Überschriftenzelle auf eine Spalte oder eine Zeile bezieht.

Wert Bedeutung
col Die Überschrift gilt für die zugehörige Spalte
row Die Überschrift gilt für die zugehörige Zeile
colgroup Die Überschrift gilt für eine Gruppe von Spalten
rowgroup Die Überschrift gilt für eine Gruppe von Zeilen 
<table>
  <tr>
    <th scope="col">Produkt</th>
    <th scope="col">Preis</th>
  </tr>

  <tr>
    <th scope="row">Tastatur</th>
    <td>49,90 €</td>
  </tr>

  <tr>
    <th scope="row">Maus</th>
    <td>24,90 €</td>
  </tr>
</table>

Bei einfachen Tabellen ist die Zuordnung häufig bereits aus der Struktur erkennbar. Das Attribut scope macht die Beziehung zwischen Überschriften und Datenzellen dennoch ausdrücklich deutlich.

Tabellenbeschriftung

Mit dem Element <caption> erhält eine Tabelle eine Beschriftung. Sie beschreibt kurz, welche Daten in der Tabelle dargestellt werden. 

<table>
  <caption>Preisliste für Computerzubehör</caption>

  <tr>
    <th scope="col">Produkt</th>
    <th scope="col">Preis</th>
  </tr>

  <tr>
    <th scope="row">Tastatur</th>
    <td>49,90 €</td>
  </tr>
</table>

Das <caption>-Element muss als erstes untergeordnetes Element innerhalb von <table> stehen.

Merke: Eine sichtbare Tabellenbeschriftung hilft allen Benutzern, den Zweck der Tabelle schnell zu erkennen. Sie ersetzt jedoch keine Überschriftenzellen.

Vollständiges Beispiel

<table>
  <caption>Aufgaben der Webtechnologien</caption>

  <tr>
    <th scope="col">Technologie</th>
    <th scope="col">Aufgabe</th>
  </tr>

  <tr>
    <th scope="row">HTML</th>
    <td>Struktur und Bedeutung</td>
  </tr>

  <tr>
    <th scope="row">CSS</th>
    <td>Gestaltung und Layout</td>
  </tr>

  <tr>
    <th scope="row">JavaScript</th>
    <td>Verhalten und Interaktivität</td>
  </tr>
</table>

Die sichtbare Gestaltung der Tabelle – beispielsweise Rahmen, Farben, Innenabstände oder wechselnde Zeilenfarben – wird anschließend mit CSS festgelegt.

Tabellenbereiche

Umfangreichere Tabellen können in einen Kopfbereich, einen Datenbereich und einen Fußbereich gegliedert werden. Dafür stehen die Elemente <thead>, <tbody> und <tfoot> zur Verfügung.

Aufbau der Tabellenbereiche

Element Bedeutung
<thead> Enthält den Kopfbereich mit den Spaltenüberschriften
<tbody> Enthält die eigentlichen Tabellendaten
<tfoot> Enthält zusammenfassende Angaben oder Ergebnisse 
<table>
  <caption>Monatliche Bestellungen</caption>

  <thead>
    <tr>
      <th scope="col">Monat</th>
      <th scope="col">Bestellungen</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th scope="row">Jänner</th>
      <td>125</td>
    </tr>

    <tr>
      <th scope="row">Februar</th>
      <td>148</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <th scope="row">Gesamt</th>
      <td>273</td>
    </tr>
  </tfoot>
</table>

Die Tabellenzeilen <tr> und ihre Zellen stehen innerhalb des jeweiligen Tabellenbereichs.

Der Tabellenkopf

Das Element <thead> fasst die Zeilen zusammen, die den Tabellenkopf bilden. Meist enthält dieser Bereich die Überschriften der Tabellenspalten. 

<thead>
  <tr>
    <th scope="col">Artikel</th>
    <th scope="col">Anzahl</th>
    <th scope="col">Preis</th>
  </tr>
</thead>

Ein Tabellenkopf kann auch mehrere Zeilen enthalten, beispielsweise bei mehrstufigen Spaltenüberschriften.

Hinweis: Das Element <thead> erzeugt nicht automatisch Überschriftenzellen. Die Überschriften müssen weiterhin mit <th> ausgezeichnet werden.

Der Tabellenkörper

Das Element <tbody> enthält die eigentlichen Datensätze der Tabelle. 

<tbody>
  <tr>
    <th scope="row">Tastatur</th>
    <td>2</td>
    <td>49,90 €</td>
  </tr>

  <tr>
    <th scope="row">Maus</th>
    <td>3</td>
    <td>24,90 €</td>
  </tr>
</tbody>

Eine Tabelle kann mehrere <tbody>-Bereiche besitzen. Dadurch lassen sich zusammengehörende Datengruppen semantisch voneinander trennen. 

<tbody>
  <tr>
    <th colspan="2" scope="colgroup">Eingabegeräte</th>
  </tr>
  <tr>
    <th scope="row">Tastatur</th>
    <td>49,90 €</td>
  </tr>
</tbody>

<tbody>
  <tr>
    <th colspan="2" scope="colgroup">Ausgabegeräte</th>
  </tr>
  <tr>
    <th scope="row">Monitor</th>
    <td>249,00 €</td>
  </tr>
</tbody>

Der Tabellenfuß

Das Element <tfoot> enthält zusammenfassende Angaben, beispielsweise Gesamtsummen, Durchschnittswerte oder abschließende Hinweise. 

<tfoot>
  <tr>
    <th scope="row">Gesamtbetrag</th>
    <td>174,50 €</td>
  </tr>
</tfoot>

Der Tabellenfuß ist kein allgemeiner Platz für Quellenangaben oder erklärende Fließtexte. Solche Informationen sollten normalerweise außerhalb der Tabelle stehen.

Vorteile der Tabellengliederung

Bei sehr kleinen Tabellen sind die Tabellenbereiche nicht zwingend erforderlich. Bei umfangreicheren Tabellen verbessern sie jedoch die Struktur und Verständlichkeit.

  • Der Tabellenkopf ist eindeutig von den Daten getrennt.
  • Zusammengehörende Daten können in Gruppen gegliedert werden.
  • Gesamtergebnisse erhalten einen eigenen Bereich.
  • Die Bereiche können gezielt mit CSS gestaltet werden.
  • Das Auslesen und Bearbeiten der Tabelle mit JavaScript wird erleichtert.
thead {
  background-color: #343a40;
  color: #fff;
}

tbody tr:nth-child(even) {
  background-color: #f2f2f2;
}

tfoot {
  font-weight: bold;
  border-top: 2px solid #343a40;
}

Vollständiges Beispiel

<table>
  <caption>Umsatz nach Quartal</caption>

  <thead>
    <tr>
      <th scope="col">Quartal</th>
      <th scope="col">Umsatz</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th scope="row">1. Quartal</th>
      <td>12.500,00 €</td>
    </tr>

    <tr>
      <th scope="row">2. Quartal</th>
      <td>14.800,00 €</td>
    </tr>

    <tr>
      <th scope="row">3. Quartal</th>
      <td>13.900,00 €</td>
    </tr>

    <tr>
      <th scope="row">4. Quartal</th>
      <td>16.200,00 €</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <th scope="row">Jahresumsatz</th>
      <td>57.400,00 €</td>
    </tr>
  </tfoot>
</table>

Tabellenzellen verbinden

Tabellenzellen können sich über mehrere Spalten oder Zeilen erstrecken. Dafür werden die Attribute colspan und rowspan verwendet.

Zellen über mehrere Spalten verbinden

Mit dem Attribut colspan wird festgelegt, über wie viele Spalten sich eine Zelle erstreckt. 

<table>
  <tr>
    <th colspan="3">Webtechnologien</th>
  </tr>

  <tr>
    <td>HTML</td>
    <td>CSS</td>
    <td>JavaScript</td>
  </tr>
</table>

Die Überschriftenzelle der ersten Zeile nimmt den Platz von drei gewöhnlichen Tabellenzellen ein. Deshalb enthält diese Zeile keine weiteren Zellen.

Hinweis: Der Wert von colspan gibt die Gesamtzahl der belegten Spalten an. Mit colspan="3" erstreckt sich eine Zelle somit über drei Spalten.

Zellen über mehrere Zeilen verbinden

Mit dem Attribut rowspan wird festgelegt, über wie viele Zeilen sich eine Zelle erstreckt. 

<table>
  <tr>
    <th scope="row" rowspan="2">Webdesign</th>
    <td>HTML</td>
  </tr>

  <tr>
    <td>CSS</td>
  </tr>
</table>

Die Überschriftenzelle mit dem Inhalt „Webdesign“ reicht über zwei Zeilen. In der zweiten Tabellenzeile darf an dieser Position deshalb keine weitere Zelle eingefügt werden.

colspan und rowspan kombinieren

Beide Attribute können innerhalb derselben Tabelle verwendet werden. Dadurch lassen sich beispielsweise mehrstufige Überschriften erstellen. 

<table>
  <thead>
    <tr>
      <th rowspan="2" scope="col">Produkt</th>
      <th colspan="2" scope="colgroup">Preis</th>
    </tr>

    <tr>
      <th scope="col">Netto</th>
      <th scope="col">Brutto</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th scope="row">Tastatur</th>
      <td>41,58 €</td>
      <td>49,90 €</td>
    </tr>

    <tr>
      <th scope="row">Maus</th>
      <td>20,75 €</td>
      <td>24,90 €</td>
    </tr>
  </tbody>
</table>

Die Überschrift „Produkt“ erstreckt sich über zwei Zeilen. Die Überschrift „Preis“ umfasst dagegen die beiden Spalten „Netto“ und „Brutto“.

Zellenstruktur richtig planen

Beim Verbinden von Zellen muss die Gesamtzahl der belegten Spalten und Zeilen berücksichtigt werden. Jede Tabellenzeile muss zur vorgesehenen Tabellenstruktur passen.

Attribut Wirkung Beispiel
colspan Eine Zelle erstreckt sich über mehrere Spalten colspan="3"
rowspan Eine Zelle erstreckt sich über mehrere Zeilen rowspan="2"

Eine Zelle mit colspan="2" belegt zwei Spaltenplätze. Eine Zelle mit rowspan="3" belegt ihre Position auch in den beiden folgenden Zeilen.

Wichtig: Unübersichtlich verschachtelte Tabellen mit vielen verbundenen Zellen sind schwer verständlich und können auch für Screenreader problematisch sein. Die Tabellenstruktur sollte deshalb möglichst einfach bleiben.

Beispiel: Stundenplan

In diesem Beispiel wird rowspan für eine Unterrichtseinheit verwendet, die zwei Zeilen umfasst. Mit colspan wird eine Pause über drei Spalten dargestellt. 

<table>
  <caption>Stundenplan am Montag</caption>

  <thead>
    <tr>
      <th scope="col">Zeit</th>
      <th scope="col">Fach</th>
      <th scope="col">Raum</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th scope="row">08:00–08:50</th>
      <td rowspan="2">Webdesign</td>
      <td rowspan="2">EDV-Raum 1</td>
    </tr>

    <tr>
      <th scope="row">08:50–09:40</th>
    </tr>

    <tr>
      <th colspan="3" scope="row">Pause</th>
    </tr>

    <tr>
      <th scope="row">10:00–10:50</th>
      <td>Excel</td>
      <td>EDV-Raum 2</td>
    </tr>
  </tbody>
</table>