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

===== 1. Grundlegender Aufbau einer Tabelle =====

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

==== Grundlegende Tags ====
  * **<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].

==== Code-Beispiel ====
<code html>
<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>
</code>

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

===== 2. Barrierefreiheit und Tabellenüberschrift =====

==== Tabellentitel (<caption>) ====
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].

==== Bedeutung von <th> für Screenreader ====
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].

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

===== 3. Zellübergreifendes Dehnen (Spanning) =====

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

==== Spalten zusammenfassen (colspan) ====
Dehnt eine Zelle nach rechts über mehrere Spalten aus[cite: 7]:

<code html>
<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>
</code>

==== Zeilen zusammenfassen (rowspan) ====
Dehnt eine Zelle nach unten über mehrere Zeilen aus[cite: 7]:

<code html>
<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>
</code>

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

===== 4. Semantische Zeilengruppen =====

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

<code html>
<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>
</code>

===== 5. Spaltengruppen (<colgroup> und <col>) =====

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

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

==== Nutzung von <col> für einzelne Spalten ====
<code html>
<table>
  <colgroup>
    <col class="highlight-column">
    <col class="standard-column">
    <col class="standard-column">
  </colgroup>
  <!-- ... Rest der Tabelle ... -->
</table>
</code>