Tabellen in HTML

Tabellen dienen zur strukturierten Darstellung von tabellarischen Daten. Sie sind kein Layout-Werkzeug, sondern ein semantisches Mittel zur Organisation von Informationen.

1. Grundidee einer Tabelle

Eine HTML-Tabelle besteht aus Zeilen und Spalten. Jede Zelle enthält einen Datenwert.

Typische Anwendungsfälle:

2. Grundstruktur einer Tabelle

Die grundlegenden Elemente einer Tabelle sind: 
<table>
  <tr>
    <td>A</td>
    <td>B</td>
  </tr>
  <tr>
    <td>C</td>
    <td>D</td>
  </tr>
</table>

3. Tabellenüberschriften (<th>)

Tabellenüberschriften werden mit <th> definiert und beschreiben den Inhalt einer Spalte oder Zeile. 
<table>
  <tr>
    <th>Name</th>
    <th>Alter</th>
  </tr>
  <tr>
    <td>Anna</td>
    <td>22</td>
  </tr>
</table>
<th>-Zellen sind semantisch wichtig und werden von Screenreadern hervorgehoben.

4. Tabellenkopf, -körper und -fuß

Komplexere Tabellen können logisch unterteilt werden: 
<table>
  <thead>
    <tr>
      <th>Produkt</th>
      <th>Preis</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Buch</td>
      <td>12 €</td>
    </tr>
    <tr>
      <td>Heft</td>
      <td>3 €</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td>Summe</td>
      <td>15 €</td>
    </tr>
  </tfoot>
</table>

5. Zeilen- und Spaltenzusammenfassung

Zellen können mehrere Zeilen oder Spalten überspannen. 
<table>
  <tr>
    <th colspan="2">Überschrift</th>
  </tr>
  <tr>
    <td>Links</td>
    <td>Rechts</td>
  </tr>
</table>

6. Semantik und Barrierefreiheit

Tabellen haben eine starke semantische Bedeutung.
Tabellen dürfen nicht für allgemeines Seitenlayout verwendet werden.

7. Typische Fehler

8. Zusammenfassung