HTML-Tabellen präsentieren Tabellendaten (Zeilen und Spalten zusammenhängender Daten) — nicht für Layout. Eine zugängliche Tabelle verwendet die richtige Struktur, sodass Bildschirmleser Header mit jeder Zelle ankündigen können.
Q2 Sales by Region
Region
Revenue
North
$12,000
South
$9,500
Total$21,500
<th> mit scope — markiert Kopfzellen. scope="col" für Spaltenüberschriften, scope="row" für Zeilenüberschriften. Bildschirmleser kündigen dann "North, Revenue: $12,000" an, anstatt Zellen ohne Kontext zu lesen.<caption> — ein Titel für die gesamte Tabelle, das erste Kind von <table>; wird gelesen, um Benutzer zu orientieren.<thead>/<tbody>/<tfoot> — gruppiert Header-, Text- und Zusammenfassungszeilen; unterstützt Navigation und ermöglicht das Wiederholen des Headers beim Drucken.<!-- ❌ this was 1990s practice — use CSS grid/flexbox instead -->
<table><tr><td>sidebar</td><td>content</td></tr></table>
Layout-Tabellen verwirren Bildschirmleser (sie kündigen Datentabellen-Semantik an) und sind inflexibel. Verwenden Sie CSS Grid/Flexbox für das Seiten-Layout.
Korrekte Tabellensemantik (<th scope>, <caption>, Abschnitte) macht Datentabellen für Bildschirmleserbenutzer nutzbar — sie verbinden jeden Wert mit seinen Zeilen- und Spaltenüberschriften.
Reservieren Sie <table> streng für echte Tabellendaten.