HTML: Tabellen (Table Markup)

HTML-Tabellen dienen dazu, zweidimensionale Daten strukturiert in Zeilen und Spalten darzustellen (z. B. Fahrpläne, Nährwerttabellen oder Statistiken)[cite: 7].

<note warning> Wichtig: Tabellen dürfen in modernem Webdesign ausschließlich für strukturierte Daten verwendet werden, nicht für das allgemeine Seitenlayout[cite: 7]! </note>

Tabellen bestehen grundsätzlich aus Zeilen, die wiederum einzelne Daten- oder Kopfzeilen-Zellen enthalten[cite: 7].

• <table>: Der übergeordnete Container für das tabellarische Material[cite: 7].
• <tr> (Table Row): Spezifiziert eine einzelne Tabellenzeile[cite: 7]. Darf ausschließlich <th>- oder <td>-Tags enthalten[cite: 7].
• <th> (Table Header): Definiert eine Kopfzelle (Überschrift einer Spalte oder Zeile)[cite: 7]. Der Text wird standardmäßig fett und zentriert dargestellt[cite: 7].
• <td> (Table Data): Definiert eine normale Datenzelle[cite: 7].

<table>
  <tr>
    <th>Menu item</th>
    <th>Calories</th>
    <th>Fat (g)</th>
  </tr>
  <tr>
    <td>Chicken noodle soup</td>
    <td>120</td>
    <td>2</td>
  </tr>
  <tr>
    <td>Caesar salad</td>
    <td>400</td>
    <td>26</td>
  </tr>
</table>

<note tip> Hinweis zu Spalten: Spalten werden in HTML nicht durch eigene Tags erstellt, sondern ergeben sich implizit aus der Anzahl der enthaltenen Zellen in den Zeilen[cite: 7]. </note>

Das <caption>-Tag liefert einen Titel oder eine prägnante Beschreibung für die gesamte Tabelle[cite: 7].

• Es muss direkt als erstes Element innerhalb des <table>-Containers stehen[cite: 7].
• Es wird von Browsern standardmäßig oberhalb der Tabelle gerendert[cite: 7].

Kopfzellen (<th>) sind entscheidend für die Barrierefreiheit (Accessibility)[cite: 7]. Screenreader lesen bei der Navigation in Datenzellen oft den zugehörigen Header mit vor, um den visuellen Kontext für sehbehinderte Nutzer verständlich zu machen[cite: 7].

<table>
  <caption>Nährwertinformationen</caption>
  <tr>
    <th>Gericht</th>
    <th>Kalorien</th>
  </tr>
  <!-- Zeilen -->
</table>

Mit den Attributen colspan und rowspan lassen sich Zellen über mehrere Spalten oder Zeilen erstrecken[cite: 7].

Dehnt eine Zelle nach rechts über mehrere Spalten aus[cite: 7]:

<table>
  <tr>
    <!-- Erstreckt sich über 2 Spalten -->
    <th colspan="2">Fettgehalt</th>
  </tr>
  <tr>
    <td>Gesättigte Fetts (g)</td>
    <td>Ungesättigte Fetts (g)</td>
  </tr>
</table>

Dehnt eine Zelle nach unten über mehrere Zeilen aus[cite: 7]:

<table>
  <tr>
    <!-- Erstreckt sich über 3 Zeilen nach unten -->
    <th rowspan="3">Portionsgröße</th>
    <td>Klein (8oz.)</td>
  </tr>
  <tr>
    <td>Mittel (16oz.)</td>
  </tr>
  <tr>
    <td>Groß (24oz.)</td>
  </tr>
</table>

<note warning> Achten Sie beim Verwenden von colspan und rowspan darauf, dass die mathematische Gesamtzahl der Spalten und Zeilen in allen Reihen korrekt aufgeht, um Darstellungsfehler zu vermeiden[cite: 7]. </note>

Für umfangreichere oder komplexe Tabellen empfiehlt sich die Unterteilung in logische Abschnitte[cite: 7]. Dies verbessert die Semantik und unterstützt spezielle Drucklayouts (z. B. Wiederholung von Header/Footer auf jeder gedruckten Seite)[cite: 7].

• <thead>: Der Tabellenkopf (enthält eine oder mehrere <tr> mit Kopfzeilen)[cite: 7].
• <tbody>: Der eigentliche Tabellenkörper (enthält die Haupt-Datenzeilen)[cite: 7].
• <tfoot>: Der Tabellenfuß (z. B. für Summen zeilen, Anmerkungen oder Fußnoten)[cite: 7].

<table>
  <caption>Umsatzstatistik</caption>
  <thead>
    <tr>
      <th>Quartal</th>
      <th>Umsatz</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Q1</td>
      <td>10.000 €</td>
    </tr>
    <tr>
      <td>Q2</td>
      <td>15.000 €</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Gesamt</th>
      <td>25.000 €</td>
    </tr>
  </tfoot>
</table>

Um Stile (CSS) oder Skripte auf ganze Spalten anzuwenden, ohne jede einzelne Datenzelle formatieren zu müssen, nutzt man Spaltengruppen[cite: 7].

• Sie werden direkt am Anfang der Tabelle (nach <caption>, falls vorhanden) platziert[cite: 7].
• Sie enthalten selbst keinen sichtbaren Textinhalt[cite: 7].

<table>
  <caption>Beispiel mit colgroup</caption>
  <colgroup></colgroup> <!-- Spalte 1 -->
  <colgroup span="2"></colgroup> <!-- Spalte 2 & 3 zusammen gefasst -->
  <!-- ... Rest der Tabelle ... -->
</table>

<table>
  <colgroup>
    <col class="highlight-column">
    <col class="standard-column">
    <col class="standard-column">
  </colgroup>
  <!-- ... Rest der Tabelle ... -->
</table>