EMZETT.Tabellen zeigen Daten, die in Zeilen und Spalten zusammengehören (Stundenplan, Preislisten, Ergebnisse). Verwende sie nie für das Seitenlayout, das ist Aufgabe von CSS.
Ergebnis
| Element | Bedeutung |
|---|---|
<table> | die Tabelle |
<caption> | Titel der Tabelle |
<thead>, <tbody>, <tfoot> | Kopf, Körper, Fuß |
<tr> | Zeile (table row) |
<th> | Kopfzelle (header), fett und zentriert |
<td> | Datenzelle |
scope="col" / "row" | sagt Screenreadern, ob die Kopfzelle für eine Spalte oder Zeile gilt |
Zellen verbinden
colspan verbindet Zellen nach rechts, rowspan nach unten:
Ergebnis
Spalten gruppieren
Ergebnis
Tabellen gestalten
Ergebnis
Tabellen auf dem Handy
Breite Tabellen passen nicht auf kleine Bildschirme. Lass sie in einem scrollbaren Container laufen:
<div style="overflow-x: auto;" tabindex="0" role="region" aria-label="Preistabelle">
<table>...</table>
</div>Barrierefreiheit
- Immer
<th>für Kopfzellen verwenden, mitscope <caption>beschreibt den Inhalt- Bei sehr komplexen Tabellen (mehrere Kopfebenen)
idundheadersbenutzen, oder besser: in einfachere Tabellen aufteilen - Tabellen nicht für Layout "missbrauchen"
Merke
- Tabellen sind für Daten, nicht für Layout
table,tr,th,td,caption,thead/tbody/tfootscopeordnet Kopfzellen zu;colspan/rowspanverbinden Zellen- Aussehen mit CSS:
border-collapse,padding,nth-childfür Zebrastreifen - Breite Tabellen in einen scrollbaren Container legen
Aufgabe
Baue eine Preistabelle mit Kopfzeile, drei Produkten, Summe in der Fußzeile und Zebrastreifen.