HTML-Tabellen

Wenn Daten klare Zeilen und Spalten haben — Stundenpläne, Ergebnistabellen, Preisvergleiche, Sitzpläne — nutze eine HTML-table, keine Lücken-Haufen oder ein Schein-Raster aus Listen. Listen haben Mengen und Sequenzen entlang einer Hauptachse gelehrt. Tabellen lehren zweidimensionale Daten: jede Zelle sitzt an einer Zeilen–Spalten-Kreuzung mit einer Benennung, die du benennen kannst. Fragt jemand „was steht in Zeile zwei, Spalte Score?“, ist eine Tabelle die ehrliche Antwort.

Wofür eine Tabelle da ist

Eine Tabelle drückt Beziehungen über ein Raster aus. Leser schauen eine Spalte hinunter oder eine Zeile entlang, um Werte schnell zu vergleichen. Hilfstechnologien können Kopfzellen zusammen mit Datenzellen ansagen, wenn du Köpfe mit th markierst statt normalen td-Text fett zu stylen. Deshalb gehören Tabellen zu tabellarischen Informationen — nicht dazu, Banner, Sidebar und Footer einer ganzen Website mit verschachtelten table-Tags zu bauen, wie alte Layout-Tutorials es taten. Wenn dein Inhalt wirklich ein Raster vergleichbarer Fakten ist, verdient Tabellen-Markup seine Komplexität.

Direkte Antwort

• table — die ganze Tabelle
• tr — eine Tabellenzeile
• th — Kopfzelle (Spalten- oder Zeilenbeschriftung)
• td — Datenzelle
  Setze Kopfbeschriftungen in th, damit die Bedeutung für Menschen und Hilfsmittel klar ist. Halte die Zellenzahl über Zeilen hinweg konsistent, bis du später fortgeschrittene Span-Attribute wie colspan lernst. Nutze Tabellen für Datenraster; nutze CSS und semantische Abschnitte für Seitenlayout. Eine kurze caption (im zweiten Demo) benennt den Datensatz für alle, die auf das Raster treffen.

Einfache Datentabelle

Starte mit einer Kopfzeile aus th-Zellen, dann Datenzellenzeilen aus td. Diese Form deckt viele Anfänger-Scoreboards und Vergleichstabellen ab.

Das einfache Beispiel lesen

• table umschließt das gesamte Raster
• Jedes tr ist eine horizontale Zeile
• Die erste Zeile nutzt th für Spaltenbeschriftungen („Name“, „Score“)
• Folgende Zeilen nutzen td für gewöhnliche Werte
• Browser-Standardstil kann Ränder leicht oder gar nicht zeigen — spätere Lektionen decken Ränder ab; Struktur zuerst
• Zähle Zellen pro Zeile: beide Datenzeilen haben zwei Zellen, passend zu den zwei Köpfen

Caption und Zeilenbeschriftungen

Eine caption benennt die Tabelle für alle. th in der ersten Spalte kann jede Zeile beschriften, wenn Zeilentitel ebenso wichtig sind wie Spaltentitel. Halte die Caption kurz und konkret.

Das Caption-Beispiel lesen

• caption sollte in gängigen Einsteiger-Mustern das erste Kind in table sein
• Spaltenköpfe bleiben in der obersten Zeile als th
• Zeilennamen in der ersten Spalte können ebenfalls th sein, damit „Ada“ eine Beschriftung ist, nicht nur eine zahlähnliche Zelle
• Übrige Zellen bleiben td für die echten Punktzahlen
• Du baust immer noch kein Seitenlayout — du beschreibst einen kleinen Datensatz

Tabellen vs. Listen vs. Layout

• Verwandte Einträge oder Schritte mit einer Hauptachse → Listen (ul / ol aus der vorherigen Lektion)
• Werte verglichen über Zeilen und Spalten → Tabellen
• Ganzseitige Regionen (Banner, Spalten, Footer) → semantische Struktur + CSS später, keine riesigen verschachtelten Layout-Tabellen
  Alte „Tabellen-Layout“-Gewohnheiten brechen Responsiveness auf kleinen Screens und erschweren Barrierefreiheit. Wenn du Tabellen nur verschachtelst, um ein Logo neben ein Menü zu setzen, stoppe und warte auf Layout-Lektionen. Die Frage: „Vergleiche ich Zellen in einem Raster, oder zeichne ich nur Kästen auf die Seite?“

Barrierefreiheits-Gewohnheiten für Raster

Bevorzuge echte th-Köpfe gegenüber fettem td-Text, der nur optisch wie ein Kopf aussieht. Eine klare caption (oder eine nahe Überschrift) sagt Lesern vor dem Einstieg, worum es geht. Halte Zeilenzellzahlen ausgerichtet, damit Spalten beim Tabben oder Wischen ehrlich bleiben. Fortgeschrittene Attribute wie scope verbessern Kopfzuordnungen bei komplexen Tabellen — lerne zuerst die Basis-Trennung th/td solide, dann verfeinere. Verlasse dich nie nur auf Farbe, um Beschriftungszellen zu markieren.

Übung im Editor

1. Erstelle eine table mit zwei Kopfzellen (th) in der ersten Zeile.
2. Füge drei Datenzeilen mit passenden td-Anzahlen hinzu.
3. Sieh sie im Browser an und bestätige, dass das Raster links-nach-rechts, oben-nach-unten wie erwartet lesbar ist.
4. Optional: füge eine caption hinzu und mache die erste Spalte zu Zeilenbeschriftungs-th wie im zweiten Beispiel.
5. Zerbrich absichtlich eine Zeile mit fehlender Zelle, notiere die seltsame Form, dann repariere sie.
6. Schreibe einen Satz über der Tabelle oder in der Caption, was die Daten messen.
7. Frage eine Mitschülerin anhand nur deiner Köpfe, welche Spalte welche ist — bei Fehlraten den th-Text umbenennen.

Leichte Fehler

• Ganze Websites als riesige verschachtelte Tabellen bauen (Legacy-Layout-Gewohnheit)
• Nur td nutzen, wenn Zellen wirklich Köpfe sind
• Ungleiche Zellenzahlen pro Zeile
• Eine Tabelle nutzen, wo eine einfache ul/ol eine einachsige Liste besser ausdrückt
• Die Tabelle ohne menschenlesbaren Titel lassen (Caption oder Überschrift)
• Antike „Layout-Tabellen“-Snippets in moderne Übungsseiten kopieren

Einordnung nach Listen

Listen organisieren eindimensionale Sammlungen. Tabellen organisieren Raster. Bald stylst du Ränder und Abstände; diese Lektion verriegelt das Skelett: table, tr, th und td mit ehrlichen Köpfen. Halte Daten tabellarisch, Layout woanders — spätere CSS-Arbeit schmückt eine Struktur, die schon Sinn ergibt.

Zusammenfassung

• Tabellen nutzen table + tr + th / td
• Für tabellarische Datenraster, nicht modernes Vollseiten-Layout
• Bevorzuge th für Kopfbeschriftungen (Spalten und, wenn nützlich, Zeilen)
• caption hilft, den Datensatz zu benennen
• Halte Zellenzahlen über Zeilen konsistent
• Listen bleiben besser für einfache Mengen und Schritte ohne zweite Achse