Tabellen für Daten verständlich und mobil nutzbar gestalten
Eine echte Datentabelle entwickeln, ihre Beziehungen erhalten und den schmalen Ausschnitt nachvollziehbar prüfen.
Eine Datentabelle muss eine konkrete Frage beantworten
Eine verständliche Tabelle verbindet Werte mit den passenden Zeilen und Spalten. Auf einem kleinen Bildschirm darf dieser Zusammenhang nicht durch versteckte Angaben oder eine unklare Umordnung verloren gehen. Für viele Vergleiche ist eine echte HTML-Tabelle mit klaren Überschriften und einem gezielt seitlich beweglichen Bereich eine tragfähige Grundlage. Ob sie für den konkreten Inhalt passt, entscheidet sich an der Aufgabe der Leser.
Unser eigenes Beispiel vergleicht drei Wartungsleistungen in zwei fiktiven Modellen. Die Zeilen heißen Prüfung, Bericht und Rückweg. Die Spalten benennen Basis, Erweitert und eine zusätzliche Prüffrage. Es gibt keine echten Agenturpakete und keine erfundenen Preise. Die Frage lautet: Welche Leistung ist beschrieben und was muss vor einer Vereinbarung geklärt werden? An dieser überschaubaren Aufgabe entwickeln wir Markup, Gestaltung und Prüfung gemeinsam.
Beginnen Sie bei einer bestehenden Tabelle mit einem einfachen Gespräch: Was soll jemand darin finden, vergleichen oder entscheiden? Wenn jede Zeile stattdessen eine eigenständige Geschichte enthält, könnte eine gegliederte Liste geeigneter sein. Ein Raster ist nicht allein deshalb sinnvoll, weil es ordentlich aussieht. Seine Stärke liegt in wiederkehrenden Beziehungen, die Menschen entlang derselben Merkmale nachvollziehen können.
Zeilen und Spalten vor der Gestaltung festlegen
In unserem Beispiel bezeichnet eine Zeile genau eine Leistung. Die beiden mittleren Spalten beschreiben denselben Gegenstand aus zwei Modellperspektiven. Die letzte Spalte ergänzt eine konkrete Prüffrage. Diese Ordnung wird zuerst schriftlich festgehalten. Dadurch lässt sich später beurteilen, ob ein neuer Inhalt noch in das Schema passt oder ob er einen anderen Vergleich verlangt. Ein zusätzlicher Absatz gehört nicht automatisch in eine zufällig freie Zelle.
Vermeiden Sie wechselnde Bedeutungen innerhalb derselben Spalte. Wenn Basis an einer Stelle einen Rhythmus, an anderer Stelle eine zuständige Person und später einen Preis meint, kann das zwar in Einzelfällen verständlich bleiben, verlangt aber besonders klare Zeilenüberschriften. Für unseren kleinen Leistungsumfang ist das vertretbar. Für eine umfangreiche Betriebsübersicht wären getrennte Spalten für Zeit, Verantwortung und Ergebnis möglicherweise besser.
Die Begriffe sollten im ganzen Vergleich gleich bleiben. „Separat vereinbaren“ bedeutet bei beiden Modellen denselben offenen Vereinbarungspunkt. Ein leerer Bereich würde dagegen mehrere Interpretationen zulassen: unbekannt, nicht enthalten, nicht zutreffend oder schlicht vergessen. Legen Sie die Bedeutung fehlender Werte vor der Veröffentlichung fest. Eine Tabelle darf offene fachliche Fragen sichtbar machen, sollte sie aber nicht hinter dekorativen Leerstellen verbergen.
Die passende HTML-Struktur verwenden
Für den eigentlichen Vergleich nutzen wir table, thead und tbody. Überschriftszellen werden mit th statt mit td ausgezeichnet. In der Kopfzeile bekommen sie scope="col", am Anfang jeder Datenzeile scope="row". Damit sind die einfachen Beziehungen dieses Beispiels ausdrücklich beschrieben. Schriftgewicht allein würde nur eine visuelle Unterscheidung schaffen. Das Markup soll dieselbe fachliche Struktur tragen wie die sichtbare Gestaltung.
Die erste Zelle der Kopfzeile heißt Leistung und bleibt nicht leer. Sie erklärt die Bedeutung der darunterstehenden Zeilenbezeichnungen. Die Bildschirmausgabe kann diese Ecke sonst wie einen zufälligen Abstand wirken lassen. Auch in einer kleinen Tabelle lohnt es sich, jeden Überschriftentext laut als Frage zu lesen: Was bedeutet dieser Wert in Verbindung mit seiner Zeile und dieser Spalte?
Unser Entwurf benötigt keine zusammengeführten Zellen. Bei mehreren Kopfebenen, ungewöhnlichen Spannweiten oder wechselnden Gruppen werden die Beziehungen anspruchsvoller. Dann reicht die einfache Struktur nicht zwangsläufig. Prüfen Sie zunächst, ob sich der Inhalt verständlich in mehrere kleinere Tabellen zerlegen lässt. Eine technisch mögliche große Matrix ist nicht automatisch die beste Leselösung für Menschen, die eine einzige Entscheidung treffen möchten.
Tabellentitel und Erläuterung unterscheiden
Die caption benennt den konkreten Tabelleninhalt: drei Leistungen in zwei fiktiven Modellen. Die Überschrift davor führt den Abschnitt ein. Der begleitende Absatz erklärt, dass ein breiter Tabellenbereich bei wenig Platz seitlich bewegt werden kann. Diese Texte haben verschiedene Aufgaben. Eine knappe Benennung des Inhalts sollte nicht mit einer langen Bedienanleitung oder einer vollständigen Wiederholung aller Tabellenzellen überfrachtet werden.
Für den benannten Scrollbereich verwenden wir die sichtbare Abschnittsüberschrift als zugänglichen Namen. Ein weiterer Verweis verbindet den Bedienhinweis. So bleibt die Orientierung außerhalb des beweglichen Tabelleninhalts erhalten. Die caption kann beim seitlichen Bewegen aus dem sichtbaren Ausschnitt geraten. Der übergeordnete Titel und die Erklärung bleiben dagegen an ihrem gewöhnlichen Platz im Dokument. Diese Entscheidung prüfen wir im tatsächlichen kleinen Layout.
Eine zusätzliche Zusammenfassung kann bei komplexeren Vergleichen sinnvoll sein. Sie erklärt dann beispielsweise, wie Gruppen zusammenhängen oder welcher Umfang bewusst fehlt. Für unser kleines Beispiel reicht die kurze Einordnung. Schreiben Sie nicht vorsorglich mehrere ähnliche Titel, weil jeder technisch möglich ist. Das Ziel ist ein verständlicher Einstieg in die Daten und kein möglichst langer Vorspann vor dem ersten Wert.
Das vollständige Beispiel nachvollziehen
Der folgende Baustein enthält den gesamten kleinen Vergleich einschließlich seines Bedienhinweises. Die Antwort auf die Prüffrage wird nicht als bereits erfüllte Leistung ausgegeben. Gerade die Zeile Rückweg bleibt eine Vereinbarungsfrage. Wer diese Tabelle für ein echtes Angebot übernimmt, muss die Inhalte fachlich neu festlegen. Die Form allein macht aus dem fiktiven Beispiel keinen bestehenden Vertrag.
Die äußere Hülle bekommt tabindex="0", eine Regionrolle und eine sichtbare Namensquelle. Das ist eine bewusste einfache Lösung für genau einen begrenzten Datenbereich. Sie erzeugt auch in breiten Ansichten einen zusätzlichen erreichbaren Bereich. Bei vielen Tabellen sollte ein Team den Nutzen und die zusätzliche Fokusfolge sorgfältig abwägen und gegebenenfalls eine geprüfte Verbesserung für tatsächlich überlaufende Bereiche ergänzen.
<h2 id="maintenance-title">Wartungsumfang vergleichen</h2>
<p id="table-help">Falls die Tabelle breiter als der verfügbare Platz ist,
können Sie den Tabellenbereich seitlich bewegen.</p>
<div class="table-scroll" tabindex="0" role="region"
aria-labelledby="maintenance-title" aria-describedby="table-help">
<table>
<caption>Fiktives Beispiel: drei Leistungen in zwei Modellen</caption>
<thead>
<tr><th scope="col">Leistung</th><th scope="col">Basis</th>
<th scope="col">Erweitert</th><th scope="col">Prüffrage</th></tr>
</thead>
<tbody>
<tr><th scope="row">Prüfung</th><td>Monatlich</td><td>Monatlich</td>
<td>Welche Auffälligkeiten wurden festgestellt?</td></tr>
<tr><th scope="row">Bericht</th><td>Kurzprotokoll</td>
<td>Einordnung mit nächsten Schritten</td>
<td>Was muss die zuständige Person entscheiden?</td></tr>
<tr><th scope="row">Rückweg</th><td>Separat vereinbaren</td>
<td>Separat vereinbaren</td>
<td>Wie wird eine Änderung bei Bedarf zurückgenommen?</td></tr>
</tbody>
</table>
</div>
<p>Das Beispiel zeigt keine tatsächlichen Agenturpakete oder Preise.</p>Den seitlich beweglichen Bereich gezielt begrenzen
Die Hülle erhält max-width:100% und overflow-x:auto. Die Tabelle selbst hat eine bewusst gewählte Mindestbreite von 46rem. Bei wenig Platz bleibt der Datenvergleich dadurch als Tabelle erhalten und kann innerhalb seiner Hülle bewegt werden. Die gesamte Seite soll dagegen nicht seitlich aus dem Bildschirm ragen. Die Mindestbreite ist ein Entwurfswert für diese vier Spalten und keine allgemeine Grenze für Mobilgeräte.
Ein sichtbarer Fokus zeigt, wann die Hülle über die Tastatur erreicht wurde. Der konkrete Browserlauf prüft anschließend die Bewegung mit der rechten Pfeiltaste und den weiteren Tabulatorschritt aus dem Bereich. Eine CSS-Eigenschaft allein beweist noch keine brauchbare Bedienung. Außerdem müssen tatsächliche Touchgeräte und relevante assistive Kombinationen im Einsatzkontext geprüft werden. Unser Desktopnachweis behauptet diese zusätzlichen Prüfungen nicht.
Die fokussierbare Hülle darf keinen Tastaturfang erzeugen. Ein Mensch muss den Datenbereich wieder verlassen und den nächsten Inhalt erreichen können. Für lange Tabellen gehört zusätzlich die Frage dazu, wie die Orientierung nach vielen Zeilen erhalten bleibt. Unser Beispiel bleibt mit drei Zeilen klein. Eine umfassende Betriebsübersicht würde andere Entscheidungen über Suche, Filter oder sinnvolle Aufteilung verlangen.
Mit lesbaren Abständen und stabilen Bezeichnungen gestalten
Jede Zelle bekommt einen klaren Innenabstand, eine ruhige Umrandung und eine Ausrichtung am oberen Rand. Die Kopfzeile hebt sich mit kräftigem Rot und weißer Schrift ab. Die Zeilenüberschriften erhalten einen hellen Hintergrund. Diese Gestaltung unterstützt die Struktur, während die semantischen Beziehungen im HTML bestehen bleiben. Ein rein farbiger Unterschied wäre für die Zuordnung einzelner Werte zu wenig.
Im ersten eigenen Browserentwurf wurden kurze Zeilenbezeichnungen an ungünstigen Stellen getrennt. Deshalb erhält die erste Spalte eine Mindestbreite von acht rem und hält diese kurzen Bezeichnungen zusammen. Diese Korrektur folgt dem tatsächlichen Inhalt, nicht einer pauschalen Regel für jede erste Tabellenspalte. Eine lange freie Beschreibung müsste anders behandelt werden. Die übrigen Zellen dürfen bei Bedarf innerhalb ihres Bereichs umbrechen.
Eine wechselnde dezente Hintergrundfläche kann längere Zeilen beim Lesen unterstützen. Sie ist ein Zusatz und ersetzt keine Überschriften. Auf einem kleinen Ausschnitt muss außerdem erkennbar bleiben, dass weitere Daten seitlich liegen. Der eigene Bedienhinweis ist deshalb nicht lediglich eine dekorative Bildunterschrift. Seine Verständlichkeit gehört in dieselbe Abnahme wie Zeilenabstände und Schriftgrößen.
Das CSS zusammen mit dem Inhalt prüfen
Das folgende CSS gehört zum zuvor gezeigten HTML. Es verändert nicht die semantische Rolle der Tabelle und erzeugt keine Ersatzbeschriftungen über Pseudoelemente. Die Mindestbreite hängt von der Wurzelschriftgröße ab. Bei vergrößertem Text wächst der benötigte Tabellenraum entsprechend. Die Hülle muss diese zusätzliche Breite weiterhin kontrolliert aufnehmen. Ein Textvergrößerungstest ist dabei von einer vollständigen Browserzoomprüfung zu unterscheiden.
Die Eigenschaft overflow-wrap:anywhere hilft bei sehr langen ununterbrochenen Angaben innerhalb gewöhnlicher Datenzellen. Sie wird nicht als fachliche Kürzung benutzt. Ein Dateiname bleibt vollständig vorhanden, auch wenn er auf mehrere Zeilen verteilt wird. Für unsere kurzen Zeilenbezeichnungen wird der Umbruch bewusst eingeschränkt. So entstehen unterschiedliche Regeln aus unterschiedlichen Inhaltstypen, statt den gesamten Vergleich mit einer einzigen starren Trennstrategie zu behandeln.
.table-scroll { max-width: 100%; overflow-x: auto; }
.table-scroll:focus-visible { outline: 3px solid #cf0711; outline-offset: 4px; }
.table-scroll table { width: 100%; min-width: 46rem; border-collapse: collapse; }
.table-scroll caption { text-align: left; padding: .9rem; font-weight: 700; }
.table-scroll th, .table-scroll td { padding: .9rem; border: 1px solid #73787b;
text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.table-scroll thead { background: #cf0711; color: #fff; }
.table-scroll tbody th { background: #e9e4db; color: #202326; }
.table-scroll tbody td { background: #fffaf0; color: #202326; }
.table-scroll tbody tr:nth-child(even) td { background: #f0ece4; }.table-scroll th:first-child { min-width: 8rem; width: 8rem; white-space: nowrap; }
Auf Mobilgeräten keine wichtigen Spalten verschwinden lassen
Ein häufiger schneller Entwurf blendet die letzten Spalten auf kleinen Bildschirmen aus. Das würde in unserem Beispiel gerade die Prüffrage entfernen. Die Person sähe dann zwar ein kompakteres Raster, verlöre aber den Teil, der eine offene Entscheidung erklärt. Deshalb bleiben alle Daten im selben Dokument erhalten. Seitliche Bewegung ist hier die bewusst gewählte Gegenleistung für den vollständigen Vergleich.
Eine alternative Kartendarstellung kann bei anderen Aufgaben sinnvoll sein. Sie muss jedoch dieselben Beziehungen verständlich wiedergeben und ihre technische Semantik prüfen lassen. Nur mit display:block aus Tabellenzellen Karten zu machen, garantiert diesen Zusammenhang nicht. Eine zusätzliche mobile Kopie schafft außerdem Pflegeaufwand: Ändert sich eine Leistung, müssen beide Ansichten zuverlässig aus derselben Datenquelle folgen.
Für unser überschaubares Beispiel gewinnt die erhaltene Tabelle. Wer dagegen unterwegs nur den Status eines einzelnen Vorgangs abrufen möchte, braucht vielleicht gar keinen breiten Vergleich. Dann kann eine fokussierte Detailansicht die eigentliche Aufgabe besser lösen. Die Entscheidung entsteht aus dem Nutzungsvorgang. „Mobil“ ist keine ausreichende Begründung dafür, beliebige Daten zu verstecken oder jede Tabelle in eine Liste umzubauen.
Zahlen, Einheiten und offene Werte eindeutig halten
Unser Vergleich enthält bewusst keine Geldwerte. Bei einer echten Kostentabelle gehören Währung, Bezugszeitraum und Netto- beziehungsweise Bruttobedeutung zum verständlichen Inhalt. Eine Zahl wie 120 ohne Einheit wäre dort unzureichend. Ebenso müssen Prozentwerte einen klaren Bezug besitzen. Die Ausrichtung von Zahlen kann das Vergleichen erleichtern, macht aber eine fehlende fachliche Definition nicht nachträglich eindeutig.
Datumswerte brauchen einen nachvollziehbaren Kontext. Ein Termin, ein letzter Prüfstand und ein Gültigkeitsende sind verschiedene Informationen. Wenn eine Zeile einen abweichenden Datenstand hat, muss dies sichtbar werden. Ein gemeinsamer Titel „aktuell“ ist dann möglicherweise irreführend. Für einen wiederkehrenden redaktionellen Vergleich lohnt sich eine kleine Datenvereinbarung mit Quelle, Verantwortlichem und zulässigen Werten für unbekannte Angaben.
Vermeiden Sie ein willkürliches Strichzeichen für jede Leerstelle. „Nicht zutreffend“, „noch zu vereinbaren“ und „nicht geprüft“ sind unterschiedliche Aussagen. In unserem Beispiel verwenden wir die konkrete Formulierung Separat vereinbaren. Die spätere Bearbeitung weiß dadurch, welche Entscheidung fehlt. Gute Tabellen sparen Erklärarbeit gerade dadurch, dass sie wichtige Unterschiede nicht hinter denselben knappen Symbolen verschwinden lassen.
Sortierung und Interaktion nur mit klarem Nutzen ergänzen
Unsere drei fachlichen Zeilen benötigen keine Sortierung. Ihre Reihenfolge führt von der Prüfung über den Bericht zum Rückweg. Eine alphabetische Sortierfunktion würde zusätzliche Bedienung schaffen, ohne eine relevante Suche zu erleichtern. Bei großen Datenmengen kann Sortierung dagegen zentral sein. Dann muss eine bedienbare Kopfaktion deutlich von einer bloß lesbaren Spaltenüberschrift unterschieden werden.
Eine sortierte Zahlenspalte darf nicht versehentlich als Text verglichen werden. Datumswerte brauchen ein geeignetes internes Format, während die sichtbare Darstellung lesbar bleibt. Der aktive Sortierzustand sollte nachvollziehbar sein und nach einer Änderung sinnvoll erhalten werden. Diese Anforderungen gelten unabhängig davon, ob eine Bibliothek oder eigener Code verwendet wird. Eine zusätzliche Funktion erweitert immer auch den Prüfvertrag.
Bei Filtern gehört die Zahl der verbleibenden Ergebnisse zur Orientierung. Eine leere Ansicht sollte verständlich machen, ob keine passenden Daten existieren oder eine technische Anfrage scheiterte. Für eine veröffentlichte statische Vergleichstabelle wäre diese Komplexität unnötig. Wir lassen sie deshalb weg und konzentrieren die Abnahme auf vollständige Daten, eindeutige Beziehungen und einen kontrollierten kleinen Ausschnitt.
Die tatsächlichen Browserergebnisse lesen
Der konkrete HTML- und CSS-Entwurf wurde in Desktop-Edge mit 34 Prüfungen ausgeführt. Die Tabelle besitzt einen über ihre caption auffindbaren Namen, vier Spaltenüberschriften und drei Zeilenüberschriften. Die Tabellenrolle bleibt erhalten. Die Daten werden bei 320, 390, 900 und 1440 Pixeln nicht ausgeblendet oder umgeordnet. Bei den beiden kleinen Breiten liegt die zusätzliche Breite innerhalb des dafür vorgesehenen Bereichs.
Zusätzlich wurde die Tastaturbewegung wirklich ausgeführt: Der Tabellenbereich erhält Fokus und die rechte Pfeiltaste verändert seinen horizontalen Ausschnitt. Ein weiterer Tabulatorschritt verlässt den Bereich wieder. Eine vergrößerte Wurzelschrift und eine sehr lange ununterbrochene Zeichenfolge wurden gesondert geprüft. Diese konkreten Fälle sind nützlicher als die allgemeine Behauptung, eine Tabelle sei durch eine einzelne CSS-Regel automatisch für jeden Kontext geeignet.
Die Abbildung zeigt denselben Entwurf in einer 900 Pixel breiten Hülle und zweimal mit 320 Pixeln. Eine kleine Ansicht steht am Anfang, die andere nach seitlicher Bewegung am Ende. Es sind tatsächlich gerenderte Browseransichten. Die Vergleichsdaten bleiben fiktiv. Die Grafik ist deshalb ein Nachweis der gezeigten Darstellung und kein Beleg über ein reales Wartungsangebot oder über das Verhalten jeder möglichen Hilfstechnologie.
Eine Abnahme mit echten Leseraufgaben durchführen
Geben Sie einer Testperson eine konkrete Frage: Worin unterscheiden sich die Berichte und was ist beim Rückweg noch offen? Die Person soll die Antwort auf einem schmalen Bildschirm finden und danach eine zweite Leistung vergleichen. Beobachten Sie, ob sie den seitlichen Inhalt entdeckt und den Bezug zu ihrer Zeile behält. Ein bloßer Blick auf ein ordentliches Vorschaubild beantwortet diese Fragen nicht.
Prüfen Sie außerdem längere Inhalte aus dem wirklichen Einsatz. Ein geänderter Modellname, eine andere Sprache oder ein ausführlicher Prüfhinweis kann die Verteilung stark verändern. Der richtige Testdatensatz enthält nicht nur kurze freundliche Wörter. Für unser Beispiel wurde eine lange ununterbrochene Angabe ergänzt, um die Begrenzung der Seitenbreite zu prüfen. Bei echten Daten entscheidet das Team zusätzlich, ob solche Angaben überhaupt in dieselbe Übersicht gehören.
Zur Übergabe gehören die Quelle des Tabelleninhalts und eine zuständige Person für Änderungen. Wenn eine neue Spalte hinzukommt, müssen Benennung, Reihenfolge, Hülle und kleine Ansicht erneut betrachtet werden. Die Tabelle bleibt ein fachlicher Baustein. Eine einmal bestandene Prüfung des ursprünglichen Beispiels ist keine dauerhafte Freigabe für beliebige spätere Datenmengen und Strukturen.
Häufige Fragen aus der Praxis
Darf eine Datentabelle seitlich scrollen? Für echte zweidimensionale Zusammenhänge kann das sinnvoll sein. Die Reflow-Erläuterung der WCAG behandelt Inhalte mit erforderlichem zweidimensionalem Layout gesondert. Daraus folgt keine pauschale Freigabe für seitliches Überlaufen der ganzen Seite. Der übrige Text soll weiter lesbar fließen und der Tabellenbereich muss verständlich erreichbar und bedienbar bleiben.
Sollte die erste Spalte feststehen? Bei breiten langen Vergleichen kann das die Orientierung unterstützen. Es kann aber auch zu überdecktem Inhalt und sehr wenig verbleibendem Platz führen. Unser kleines Beispiel benötigt diese zusätzliche Gestaltung nicht. Wer sie ergänzt, prüft schmale Ansichten, Hintergründe, Fokus und den letzten sichtbaren Datenbereich. Ein klebender Bereich ist erst hilfreich, wenn er die Aufgabe tatsächlich erleichtert.
Ist eine Tabelle als Bild eine gute Alternative? Für eine gewöhnliche Datentabelle gehen dabei maschinenlesbare Beziehungen und flexible Textdarstellung verloren. Unsere Abbildung erklärt deshalb einen HTML-Entwurf, ersetzt ihn aber nicht. Die eigentlichen Daten gehören in zugängliches Markup beziehungsweise in einen geeigneten strukturierten Datenweg. Ein Bild kann einen Zusammenhang anschaulich machen und braucht für seine eigene Information einen passenden Alternativtext.
Checkliste für eine verständliche Datentabelle
- Leseraufgabe und Vergleichsmerkmale sind geklärt.
- Zeilen, Spalten und fehlende Werte haben eindeutige Bedeutungen.
- Caption, Überschriftszellen und Zuordnungen passen zum Inhalt.
- Alle fachlich nötigen Daten bleiben bei wenig Platz vorhanden.
- Seitliche Bewegung bleibt auf den benannten Bereich begrenzt.
- Tastaturzugang, Ausstieg und lange Inhalte wurden tatsächlich geprüft.
- Kleine Ansichten und größere Schrift sind mit realistischen Inhalten geprüft.
- Datenquelle, Änderungsverantwortung und weitere Gerätetests sind festgelegt.
Quellen und fachlicher Stand
Primärquellen am 09.11.2026 geprüft. Wartungsmodelle und Vergleichsdaten sind eigene fiktive Beispiele. Die 34 Browserprüfungen beziehen sich auf den gezeigten HTML- und CSS-Entwurf.
