mitmario.dev

Abschnitt 7 · Lektion 1

Tabellen

HTML Im Browser 2 Min Lesezeit 3 BeispieleLektion 1 von 4

Tabellen haben einen schlechten Ruf, und der stammt aus einer Zeit, in der man ganze Seitenlayouts damit gebaut hat. Für ihren eigentlichen Zweck sind sie unersetzlich: Daten, bei denen jeder Wert zu einer Zeile und einer Spalte gehört.

Die drei Bausteine

Eine einfache Tabelle 
<table>
  <tr>
    <th>Gericht</th>
    <th>Dauer</th>
  </tr>
  <tr>
    <td>Linsensuppe</td>
    <td>30 Minuten</td>
  </tr>
  <tr>
    <td>Ofengemüse</td>
    <td>45 Minuten</td>
  </tr>
</table>

table ist die Klammer um das Ganze. Darin steht keine Spalte, sondern eine Zeile nach der anderen, denn HTML denkt zeilenweise.

tr ist eine Zeile, kurz für „table row“. Jede Zeile enthält ihre Zellen von links nach rechts.

td ist eine Datenzelle, für „table data“. Hier steht der eigentliche Wert.

th ist eine Kopfzelle, für „table header“. Der Browser stellt sie fett und zentriert dar, aber das ist wieder nur die Voreinstellung. Der eigentliche Unterschied liegt woanders.

Warum th kein fettes td ist

Alles td, also unbrauchbar 
<table>
  <tr>
    <td>Gericht</td>
    <td>Dauer</td>
  </tr>
  <tr>
    <td>Linsensuppe</td>
    <td>30 Minuten</td>
  </tr>
</table>

Diese Tabelle zeigt fast dasselbe wie die erste, nur ohne Kopfzellen. Optisch fehlt die Hervorhebung, und wer sie sieht, kann sich den Rest denken.

Wer sie nicht sieht, kann das nicht. Ein Screenreader liest eine Tabelle Zelle für Zelle vor und nennt dabei die zugehörigen Überschriften mit: „Gericht: Linsensuppe, Dauer: 30 Minuten“. Das funktioniert nur, wenn er weiß, welche Zellen Überschriften sind. Ohne th hört der Nutzer eine Folge zusammenhangloser Werte und muss sich die Zuordnung selbst merken, über zwanzig Zeilen hinweg.

Deshalb: th ist keine Formatierung, sondern die Information „diese Zelle beschriftet die anderen“.

Überschriften stehen nicht nur oben

Kopfzellen auch links 
<table>
  <tr>
    <th>Gericht</th>
    <th>Dauer</th>
    <th>Portionen</th>
  </tr>
  <tr>
    <th>Linsensuppe</th>
    <td>30 Minuten</td>
    <td>4</td>
  </tr>
  <tr>
    <th>Ofengemüse</th>
    <td>45 Minuten</td>
    <td>2</td>
  </tr>
</table>

Hier ist die erste Zelle jeder Zeile ebenfalls ein th. Das ist der Normalfall bei Vergleichstabellen: oben stehen die Merkmale, links die Dinge, die verglichen werden. Jede Datenzelle hat dann zwei Überschriften, eine über sich und eine links von sich.

Ob eine Kopfzelle für ihre Spalte oder ihre Zeile gilt, kann der Browser bei einfachen Tabellen erraten. Bei größeren wird es unsicher, und dafür gibt es das Attribut scope. Das ist Thema der nächsten Lektion, zusammen mit der Gliederung größerer Tabellen.

Wann eine Tabelle richtig ist

Die Frage ist nicht, ob etwas in Zeilen und Spalten passt. Fast alles passt in Zeilen und Spalten. Die Frage ist, ob die Daten zweidimensional sind: Hat jeder Wert eine Zeilen- und eine Spaltenbedeutung?

Preise pro Größe und Farbe, Öffnungszeiten pro Wochentag, technische Daten mehrerer Modelle: eindeutig ja. Drei Produktkarten nebeneinander: nein, das sind drei eigenständige Blöcke, also article in einem Layout aus CSS.

Der Praxistest: Nimm eine einzelne Zelle heraus. Bedeutet ihr Inhalt ohne die Überschriften noch etwas? Wenn nein, gehört sie in eine Tabelle.

Zum Mitnehmen

Tabellen sind für Daten, nicht fürs Layout. Der Test: Hätte eine Zelle allein ohne ihre Zeilen- und Spaltenüberschrift noch Bedeutung? Wenn nein, ist es eine echte Tabelle.

Jetzt du

Basis Konto, kostenlos

Zu dieser Lektion gehört eine Aufgabe. Du schreibst den Code selbst, und nach jedem Lauf sagt dir eine Prüfliste, was schon stimmt.

Dafür brauchst du das Basis Konto. Es kostet nichts, und ein Passwort gibt es auch nicht.

Was in dieser Lektion steckt

  • Artikel mit 3 Beispielen zum Ausprobieren

    Steht hier, ohne Konto lesbar.

  • Aufgabe im Editor, direkt im Browser geprüft

    Öffnet sich mit dem Basis Konto.