table im HTML
Eine Tabelle, die man zellenweise lesen kann
Titel, Kopfzeile, Zellbezug, Scrollrahmen: fünf Stellen einer Preistabelle.
table im HTML
Eine Zelle hat zwei Koordinaten
Eine Datentabelle wird verständlich, wenn jede Zahl mit ihrem Zeilenkopf und ihrem Spaltenkopf verbunden ist. Das folgende Modell macht diese Beziehung sichtbar und setzt sie anschließend in vollständiges HTML um.
| Leistung | Stunden | Satz | Betrag |
|---|---|---|---|
| Beratung | 12 | 80,00 | 960,00 |
| Umsetzung | 30 | 80,00 | 2.400,00 |
| Schulung | 6 | 95,00 | 570,00 |
| Gesamt | 48 | 3.930,00 |
scope="row" Umsetzungscope="col" Betrag01 / Titel
caption benennt das Ganze
Die caption ist ein direktes Kind der Tabelle. Sie beschreibt kurz, welche Daten folgen; Einheit oder Zeitraum passen ebenfalls hierher, wenn sie für alle Zellen gelten.
02 / Achsen
th und scope schaffen Bezüge
In einer einfachen Matrix gilt scope="col" für die Spalte darunter und scope="row" für die Zeile daneben. Dadurch kann Software zu einer Datenzelle den passenden Kontext ermitteln.
03 / Reflow
Nur die Tabelle scrollt quer
Tabellen dürfen ihre zweidimensionale Anordnung behalten. Ein eigener Scrollrahmen verhindert, dass auch Überschrift und Fließtext seitlich aus dem Viewport laufen. Sobald der Rahmen tatsächlich scrollt, muss er per Tastatur erreichbar sein.
Kopierbare Vorlage
Eine vollständige Preistabelle
Das HTML bildet die Beziehungen ab. Das CSS ordnet Zahlen, Grenzen und den fokussierbaren Scrollrahmen.
<div class="preis-rahmen" role="region" tabindex="0"
aria-labelledby="preis-titel">
<table class="preis">
<caption id="preis-titel">
Projektaufwand – Beispieldaten, Beträge in Euro
</caption>
<thead>
<tr>
<th scope="col">Leistung</th>
<th scope="col" class="zahl">Stunden</th>
<th scope="col" class="zahl">Satz</th>
<th scope="col" class="zahl">Betrag</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Beratung</th>
<td class="zahl">12</td>
<td class="zahl">80,00</td>
<td class="zahl">960,00</td>
</tr>
<tr>
<th scope="row">Umsetzung</th>
<td class="zahl">30</td>
<td class="zahl">80,00</td>
<td class="zahl">2.400,00</td>
</tr>
<tr>
<th scope="row">Schulung</th>
<td class="zahl">6</td>
<td class="zahl">95,00</td>
<td class="zahl">570,00</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row">Gesamt</th>
<td class="zahl">48</td>
<td aria-label="kein Wert"></td>
<td class="zahl">3.930,00</td>
</tr>
</tfoot>
</table>
</div>.preis-rahmen {
overflow-x: auto;
border: 1px solid currentColor;
}
.preis-rahmen:focus-visible {
outline: 3px solid Highlight;
outline-offset: 3px;
}
.preis {
width: 100%;
min-width: 42rem;
border-collapse: collapse;
}
.preis caption {
padding: 0.8rem 1rem;
text-align: left;
font-weight: 700;
}
.preis th,
.preis td {
padding: 0.75rem 1rem;
text-align: left;
border-block-end: 1px solid currentColor;
}
.preis .zahl {
text-align: right;
font-variant-numeric: tabular-nums;
}
.preis thead th {
border-block-end-width: 2px;
}
.preis tfoot th,
.preis tfoot td {
border-block-start: 2px solid currentColor;
border-block-end: 0;
font-weight: 700;
}Einfach oder komplex? Für diese klare Kopfzeile und Kopfspalte reicht scope. Bei mehrstufigen oder unregelmäßigen Kopfstrukturen prüfen Sie colgroup, rowgroup oder explizite id/headers-Bezüge.
Keine Layout-Tabelle. Verwenden Sie table für Daten mit Beziehungen in Zeilen und Spalten. Seitenraster entstehen mit CSS Grid oder Flexbox.
Abnahme
So prüfen Sie es
- Bezüge: Navigieren Sie mit der Tabellensteuerung Ihres Vorleseprogramms zur Zelle „2.400,00“. Prüfen Sie, ob „Umsetzung“ und „Betrag“ als zugehörige Köpfe ausgegeben werden.
- Titel: Rufen Sie die Tabellenübersicht des Vorleseprogramms auf. Die Tabelle muss über ihre
captionals „Projektaufwand – Beispieldaten, Beträge in Euro“ erkennbar sein. - Tastatur: Verkleinern Sie das Fenster, bis der Tabellenrahmen quer scrollt. Gehen Sie mit
Tabauf den Rahmen und bewegen Sie ihn mit den Pfeiltasten; der Fokus bleibt sichtbar. - 320 CSS-Pixel: Prüfen Sie die Seite bei dieser Viewportbreite. Nur die Tabelle erhält eine waagerechte Scrollstrecke; Überschriften, Hinweise und Code bleiben innerhalb der Seite.
Aus dem Prüfbericht
Fünf Stellen an einer Tabelle
Kritisch Die Kopfzeile besteht aus Datenzellen Regel td-has-header
Die erste Zeile sieht wie ein Kopf aus, enthält aber td. Mit th und scope="col" bekommt jede Zahl ihren Bezug.
Kritisch Ein Zellbezug führt ins Leere Regel td-headers-attr
Das headers-Attribut nennt eine id, die es in dieser Tabelle nicht gibt. Tragen Sie die id der echten Kopfzelle ein.
Prüfen Ein Spaltenkopf ohne Daten darunter Regel th-has-data-cells
Eine Überschrift hat in keiner Zeile eine Zelle. Löschen Sie den Kopf oder ergänzen Sie die fehlenden Werte.
Kritisch Der Scrollrahmen um die breite Tabelle Regel scrollable-region-focusable
Auf schmalen Bildschirmen scrollt die Tabelle in einem div. Ohne tabindex="0" bleiben die rechten Spalten ohne Maus unerreichbar.
Kritisch Der Tabellentitel steht in einer Zelle Regel table-fake-caption
Der Titel füllt als td die ganze erste Zeile. Als caption gehört er zur Tabelle statt zu ihren Daten.
Zum Mitnehmen
Die Preistabelle, korrigiert
Ein caption, echte Kopfzellen und ein bedienbarer Scrollrahmen.
Korrektur in 3 Schritten ansehen
Titel und Kopfzeile richtig auszeichnen
caption benennt die Tabelle, th mit scope benennt Spalte und Zeile. Erst dann gehört die 12 hörbar zu Beratung und Umfang.
KorrekturvergleichSchritt 1 · HTML Vorher
<table> <tr><td colspan="3">Preisliste 2026</td></tr> <tr><td>Leistung</td><td>Umfang</td><td>Preis</td></tr> <tr><td>Beratung</td><td>12</td><td>960 Euro</td></tr> </table>Nachher
<table> <caption>Preisliste 2026</caption> <tr><th scope="col">Leistung</th><th scope="col">Umfang</th> <th scope="col">Preis</th></tr> <tr><th scope="row">Beratung</th><td>12</td><td>960 Euro</td></tr> </table>Markierte Zeilen wurden geändert
So prüfen Sie es Lesen Sie die Tabelle mit einem Vorleseprogramm Zelle für Zelle. Jede Zahl nennt ihre Überschriften.
Den Zellbezug auf die echte Kopf-id setzen
headers verweist auf die id einer Kopfzelle in derselben Tabelle. Zeigt der Verweis ins Leere, fehlt der Zelle ihr Bezug.
KorrekturvergleichSchritt 2 · HTML Vorher
<th id="umfang">Umfang</th> <td headers="umfang-spalte">12</td>Nachher
<th id="umfang">Umfang</th> <td headers="umfang">12</td>Markierte Zeilen wurden geändert
So prüfen Sie es Vergleichen Sie id und headers Zeichen für Zeichen. Beide müssen gleich lauten.
Den Scrollrahmen bedienbar machen
Ein waagerecht scrollender Rahmen braucht einen Tastaturfokus. Sonst bleiben die rechten Spalten auf schmalen Bildschirmen ohne Maus unerreichbar.
KorrekturvergleichSchritt 3 · HTML Vorher
<div class="tabelle-rahmen" style="overflow-x:auto"> <table>…</table> </div>Nachher
<div class="tabelle-rahmen" style="overflow-x:auto" tabindex="0" role="region" aria-label="Preisliste 2026"> <table>…</table> </div>Markierte Zeilen wurden geändert
So prüfen Sie es Verkleinern Sie das Fenster, tabben Sie in den Rahmen und drücken Sie Pfeil-rechts.