Tabellen

Tabellen sind für Daten, die in Zeilen und Spalten zusammengehören, zum Beispiel die Lauftermine des Vereins.

Was du am Ende kannst

• eine Tabelle mit Kopf, Körper und Beschriftung aufbauen
• Kopfzellen so auszeichnen, dass Screenreader sie zuordnen können
• Zellen über mehrere Spalten oder Zeilen verbinden

Live-Coding zum Mitmachen

⤓ demo-03-tabellen.zip herunterladen

Der Ordner starter ist der Ausgangsstand, fertig der Stand nach dem Live-Coding.

Enthält: bilder/laufstrecke.svg, index.html, termine.html

Der Aufbau

Eine vollständige Tabelle

table { border-collapse: collapse; }
th, td { border: 1px solid #999; padding: 0.25rem 0.75rem; text-align: left; }

<table>
  <caption>Bestzeiten 2026</caption>
  <thead>
    <tr><th scope="col">Name</th><th scope="col">5 km</th><th scope="col">10 km</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">Alex</th><td>24:10</td><td>51:02</td></tr>
    <tr><th scope="row">Sam</th><td colspan="2">verletzt</td></tr>
  </tbody>
</table>

Element	Aufgabe
table	die Tabelle
caption	die Überschrift der Tabelle
thead, tbody, tfoot	Kopf, Körper und Fuß
tr	eine Zeile
th	eine Kopfzelle
td	eine Datenzelle

Das Attribut scope sagt, wofür eine Kopfzelle gilt: scope="col" für die Spalte, scope="row" für die Zeile. Ein Screenreader liest dann bei „24:10“ auch „Alex, 5 km“ vor.

Zellen verbinden

colspan="2" lässt eine Zelle über zwei Spalten laufen, rowspan="2" über zwei Zeilen. Die überdeckten Zellen lässt du in den betroffenen Zeilen weg. Setze das sparsam ein, denn verbundene Zellen sind für Screenreader schwerer zu lesen.

Tabellen nur für Daten

Altlast: Tabellenlayouts

Früher baute man ganze Seitenlayouts mit Tabellen, weil es nichts Besseres gab. Das siehst du noch in alten Anwendungen und in HTML-E-Mails. Für neue Seiten ist es falsch: Screenreader lesen sonst das Layout als Daten vor, und auf dem Handy passt es nicht. Für Layout gibt es seit Jahren Flexbox und Grid (Tag 3).

Live-Coding: Der Terminplan

termine.html

  <main>
    <h1>Termine</h1>
    <table>
      <caption>Unsere festen Lauftermine</caption>
      <thead>
        <tr>
          <th scope="col">Tag</th>
          <th scope="col">Uhrzeit</th>
          <th scope="col">Treffpunkt</th>
          <th scope="col">Strecke</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">Montag</th>
          <td>07:00</td>
          <td>Parkeingang Nord</td>
          <td>5 km</td>
        </tr>
        <tr>
          <th scope="row">Mittwoch</th>
          <td>07:00</td>
          <td>Parkeingang Nord</td>
          <td>8 km</td>
        </tr>
        <tr>
          <th scope="row">Samstag</th>
          <td>08:30</td>
          <td>Seeterrasse</td>
          <td>12 km</td>
        </tr>
      </tbody>
    </table>

Übung

Starter für die Übung

⤓ uebung-03-tabellen.zip herunterladen

ZIP-Datei entpacken und den Ordner in VS Code öffnen (Datei → Ordner öffnen).

Enthält: bilder/laufstrecke.svg, index.html, termine.html

Auf der Seite termine.html sollen auch die Mitgliedsbeiträge stehen.

Mitgliedschaft	Beitrag pro Jahr	Enthalten
Einzelperson	48 €	Alle Lauftermine
Ermäßigt	24 €	Alle Lauftermine
Familie	84 €	Alle Lauftermine, bis zu vier Personen

Stufe 1: Grundlage

Baue die Tabelle mit table, tr, th und td an der markierten Stelle ein.

Stufe 2: Struktur

Ergänze caption, thead und tbody, außerdem scope an allen Kopfzellen.

Stufe 3: Zellen verbinden

Fasse die beiden Zellen „Alle Lauftermine“ von Einzelperson und Ermäßigt zusammen.

Für Schnelle

Ergänze einen tfoot mit einer Zelle über alle Spalten: „Die ersten drei Läufe sind immer kostenlos.“ Prüfe die Tabelle dann im Barrierefreiheitsbaum der DevTools (Elements → Accessibility).