Mobilfreundliche Tabelle gestalten: Scrollen, Karten, Barrierefreiheit

Eine mobilfreundliche Tabelle ist eine Datentabelle, die Sie auf dem Smartphone bequem lesen und bedienen können. In diesem Leitfaden zeigen wir, Talha Aslan und Team, die Methoden, die wir in Projekten am häufigsten einsetzen. Dazu gehören horizontales Scrollen, eine fixierte erste Spalte, die Kartenansicht und barrierefreie Überschriften. Außerdem erfahren Sie, welche Methode zu welchen Daten passt und wie Sie testen.

Kurz gesagt gibt es keine einzige richtige Lösung. Vergleichsdaten wollen nebeneinander stehen. Eine Liste einzelner Datensätze liest sich dagegen als Karten deutlich leichter. Deshalb sollten Sie vor der Wahl der Methode klären, was Ihre Leser in der Tabelle eigentlich suchen. Die folgenden Abschnitte führen Sie Schritt für Schritt durch diese Entscheidung.

Warum funktionieren Tabellen auf dem Smartphone so oft nicht?

Eine Tabelle, die am Desktop gut aussieht, scheitert am Smartphone meist auf drei Arten. Zunächst sprengen die Spalten die Bildschirmbreite, und die ganze Seite verschiebt sich seitlich. Dann schrumpfen die Zellen, bis Wörter Buchstabe für Buchstabe umbrechen. Schließlich verschwindet die Kopfzeile, und Leser vergessen, was jede Zahl bedeutet.

• Überlauf: Die Tabelle zwingt die restliche Seite zum horizontalen Scrollen.
• Quetschen: Jede Spalte erhält den gleichen Anteil, langer Text bleibt unlesbar.
• Kontextverlust: Ohne Kopfzeile und erste Spalte verlieren die Zellen ihre Bedeutung.
• Tippprobleme: Links und Schaltflächen in Zellen sind für den Finger zu klein.

Allerdings ist das Problem nicht nur optisch. Vorlagen, die Tabellen mit div Boxen nachbauen, entfernen die Zeilen und Spaltenbeziehungen für Screenreader. Daher darf die mobile Lösung die Struktur niemals zerstören.

Brauchen Sie überhaupt eine Tabelle?

Nicht jede Tabelle muss eine Tabelle sein. Eine zweispaltige Liste aus Merkmal und Beschreibung liest sich am Smartphone oft besser als Definitionsliste oder als kurze Absätze mit Zwischenüberschriften. Ebenso rechtfertigt eine einzelne Preiszeile kein Tabellenmarkup.

Eine mobilfreundliche Tabelle lohnt sich dann, wenn die Daten eine zweiseitige Beziehung haben. Zum Beispiel lesen Nutzer beim Vergleich von drei Paketen über fünf Merkmale sowohl entlang der Zeilen als auch entlang der Spalten. In diesem Fall passen Sie die Tabelle an den schmalen Bildschirm an, statt sie zu entfernen. Die entscheidende Frage lautet also: Vergleichen Ihre Leser diese Daten, oder lesen sie sie nur?

Diese Entscheidung treffen Sie am besten in der Seitenplanung, nicht erst nach dem Design. Beim Ansatz Mobile First Design planen Sie Inhalte zuerst für kleine Bildschirme; so zeigt sich der Bedarf an Tabellen früh. Hat Ihre Website datenreiche Seiten, planen wir das gern im Rahmen unserer Webdesign Leistungen mit Ihnen und erstellen ein passendes Angebot.

Welche Methode passt für eine mobilfreundliche Tabelle zu welchen Daten?

Die Struktur Ihrer Daten entscheidet über die Methode. Der folgende Vergleich fasst die vier Ansätze zusammen, die uns in der Praxis am häufigsten begegnen. Trotzdem ist er nur ein Ausgangspunkt; testen Sie immer mit Ihren eigenen Daten.

In der Praxis kombinieren wir diese Methoden oft. Horizontales Scrollen und eine fixierte erste Spalte arbeiten zum Beispiel meist gut zusammen. Die Kartenansicht spielt dagegen ihre Stärken aus, wenn es viele Spalten gibt, aber jede Zeile für sich steht.

Wie richten Sie horizontales Scrollen richtig ein?

Die Grundregel für die mobilfreundliche Tabelle lautet: Die Tabelle scrollt, die Seite nicht. Dafür legen Sie die Tabelle in einen umschließenden Container und erlauben nur diesem Container einen horizontalen Überlauf. Somit behalten Überschriften, Absätze und Navigation ihre normale Breite.

Die W3C Seite Understanding Reflow liefert dazu ein wichtiges Detail. Das Kriterium verlangt, dass Inhalte bei einer Breite von 320 CSS Pixeln ohne Scrollen in zwei Richtungen funktionieren. Allerdings nimmt es Datentabellen ausdrücklich aus, denn Tabellen brauchen ein zweidimensionales Layout, um verständlich zu sein. Inhalte rund um die Tabelle, etwa Überschriften, Suchfelder und Seitennavigation, müssen dennoch umbrechen.

1. Legen Sie die Tabelle in einen eigenen Scrollcontainer.
2. Geben Sie Zellen eine sinnvolle Mindestbreite, damit Wörter nicht Buchstabe für Buchstabe umbrechen.
3. Zeigen Sie, dass es weitere Inhalte gibt, etwa mit einer angeschnittenen letzten Spalte, einem Schatten oder einem kurzen Hinweis.
4. Prüfen Sie, dass der Rest der Seite bei 320 Pixeln nicht überläuft.

So bleibt die Seite ruhig, während Leser mit der Tabelle arbeiten. Damit der Scrollrhythmus der ganzen Seite stimmt, lesen Sie außerdem unseren Beitrag zum Scrolling im Webdesign.

Den scrollbaren Tabellenbereich für alle bedienbar machen

Mit dem Finger zu wischen ist einfach. Für Tastaturnutzer bleibt ein Scrollcontainer allerdings oft unerreichbar. Enthält er keinen fokussierbaren Link, kommen Nutzer per Tabulatortaste nicht hinein und können nicht seitlich scrollen. Deshalb sollten Sie den Container selbst fokussierbar machen.

Konkret geben Sie dem Container den tabindex Wert null, weisen ihm die Rolle region zu und ergänzen eine kurze Beschriftung. Eine Beschriftung wie „Paketvergleich, horizontal scrollbar“ funktioniert gut. Screenreader nennen dann den Zweck des Bereichs, und Tastaturnutzer scrollen mit den Pfeiltasten. Zeigen Sie zudem bei Fokus einen deutlichen Rahmen.

• Erhält der Scrollcontainer den Tastaturfokus?
• Erscheint bei Fokus ein deutlicher Rahmen?
• Nennt die Beschriftung das Thema der Tabelle?
• Stützt sich der Scrollhinweis auf Text und nicht nur auf Farbe?

Diese Details wirken klein. Trotzdem gehören sie zu den Punkten, die bei Prüfungen zur Barrierefreiheit am häufigsten fehlen. Den größeren Rahmen erklärt unser Beitrag zur barrierefreien Website nach WCAG.

Wie funktioniert eine fixierte erste Spalte?

Eine fixierte erste Spalte macht die mobilfreundliche Tabelle übersichtlich und hält die Zeilennamen an ihrem Platz, während Leser seitlich scrollen. In einem Paketvergleich bleibt zum Beispiel die Zeile „Monatlicher Bericht“ links stehen. Scrollen Nutzer nach rechts, ordnen sie jeden Paketwert dieser Zeile zu. Der Kontext geht also nie verloren.

Technisch nutzen Sie dafür die Positionierung sticky in CSS. Laut der MDN Dokumentation zu position richtet sich ein Element mit sticky nach dem nächsten scrollenden Vorfahren. Es braucht außerdem mindestens einen Schwellenwert, etwa einen linken Abstand von null. Ohne Schwellenwert verhält es sich wie relative Positionierung. Liegt zudem ein weiterer Container mit Überlaufeinstellung dazwischen, haftet die Spalte womöglich am falschen Container.

1. Geben Sie den Zellen der ersten Spalte die Positionierung sticky und einen linken Schwellenwert.
2. Geben Sie den fixierten Zellen einen deckenden Hintergrund, sonst scheint scrollender Text durch.
3. Ergänzen Sie rechts einen feinen Schatten oder eine Linie, damit die Trennung klar ist.
4. Begrenzen Sie die Breite der ersten Spalte; auf schmalen Bildschirmen ist höchstens ein Drittel ein gutes Ziel.

Dennoch passt eine fixierte Spalte nicht zu jeder Tabelle. Enthält die erste Spalte langen Text, bleibt nach dem Fixieren kaum Platz für Daten. Dann wirkt ein kürzerer Zeilenname oder die Kartenansicht besser.

Wann hilft eine fixierte Kopfzeile?

In langen Tabellen vergessen Leser beim Herunterscrollen die Spaltenüberschriften. Eine fixierte Kopfzeile löst dieses Problem. Die Überschriften bleiben oben am Bildschirm, und jede Zeile behält ihre Bedeutung. Vor allem bei Bestelllisten, Lagertabellen oder Stundenplänen mit Dutzenden Zeilen ist der Unterschied deutlich.

Allerdings passiert hier ein typischer Fehler. Hat Ihre Website bereits ein fixiertes Menü, rutscht die Tabellenkopfzeile darunter und verschwindet. Deshalb sollten Sie den oberen Schwellenwert der Kopfzeile an die Menühöhe anpassen. Die Wirkung fixierter Menüs behandeln wir ausführlich im Beitrag wie sich ein Sticky Header auf die Conversion auswirkt.

Zudem muss die Zelle oben links in beide Richtungen fixiert bleiben, wenn Kopfzeile und erste Spalte gleichzeitig haften. Diese Zelle erhält eine höhere Stapelreihenfolge als die übrigen. Somit überlagern sich die Zellen beim Scrollen nicht. Bei kurzen Tabellen bringt eine fixierte Kopfzeile dagegen wenig. Unter etwa zehn Zeilen verzichten wir meist darauf.

Wann lohnt sich die Umwandlung in eine Kartenansicht?

In der Kartenansicht verwandelt sich jede Zeile auf schmalen Bildschirmen in einen eigenen Kasten. Die Überschriften stehen als Beschriftung neben jedem Wert. Zum Beispiel stehen „Bestellnummer“, „Datum“, „Betrag“ und „Status“ untereinander in einer Karte. Die mobilfreundliche Tabelle verlangt dann kein seitliches Scrollen mehr, sondern nur noch Scrollen nach unten.

Diese Methode glänzt, wenn die Zeilen voneinander unabhängig sind. Bestellhistorie, Inserate, Veranstaltungskalender und Terminlisten sind typische Beispiele. Leser vergleichen hier keine Zeilen. Stattdessen suchen sie einen bestimmten Datensatz und prüfen seine Details. Folglich passt die vertikale Kartenansicht zur natürlichen Lesegewohnheit am Smartphone.

Andererseits versagt die Kartenansicht bei Vergleichstabellen. Vergleichen Leser drei Pakete über fünf Merkmale, zwingen Karten sie zum Hin und Herscrollen. Sie müssen dasselbe Merkmal in verschiedenen Karten suchen. Die Regel lautet also: Scrollen und fixierte Spalte für Vergleiche, Karten für unabhängige Datensätze.

• Sind die Zeilen unabhängig? Dann passt die Kartenansicht.
• Vergleichen Leser Spalte für Spalte? Dann passt horizontales Scrollen.
• Ist der Zeilenname der Schlüssel zu allem? Dann ergänzen Sie eine fixierte erste Spalte.

Woher kommen die Beschriftungen in der Kartenansicht?

In der Kartenansicht braucht jeder Wert eine Beschriftung daneben. Sonst erkennen Leser nicht, ob „12.03“ ein Datum oder ein Betrag ist. Der verbreitetste Weg: Jede Zelle erhält ihre Spaltenüberschrift als Datenattribut. Jede Zelle der Spalte „Datum“ trägt also den Wert „Datum“ in einem eigenen Attribut.

Danach liest CSS dieses Attribut auf schmalen Bildschirmen aus und setzt es vor den Zellwert. So brauchen Sie keine separate mobile Tabelle, denn dasselbe HTML funktioniert in zwei Layouts. Beschriftungen von Hand zu pflegen ist allerdings fehleranfällig. Daher empfehlen wir eine Vorlage oder ein CMS, das die Überschriften automatisch in die Zellen überträgt.

Ein weiterer Punkt verdient Aufmerksamkeit. Ändern Sie die Anzeigeart von Tabellenelementen, verlieren manche Kombinationen aus Browser und Screenreader die Tabellensemantik. Deshalb sollten Sie die Kartenansicht immer mit einem Screenreader testen. Treten Probleme auf, stellen Sie die Struktur wieder her, indem Sie Rollen für Zeile, Zelle und Überschrift ausdrücklich angeben.

Wie programmieren Sie barrierefreie Tabellenüberschriften?

Die Grundlage einer barrierefreien Tabelle ist der richtige Zelltyp. Das Tabellen Tutorial der W3C WAI legt fest, dass Kopfzellen th und Datenzellen td nutzen. Erreicht ein Screenreader eine Zelle, liest er die zugehörige Überschrift mit. Nutzer hören dann etwas Sinnvolles wie „Pro Paket, monatlicher Bericht, enthalten“.

Ist die Richtung einer Überschrift unklar, kommt das Attribut scope ins Spiel. Für Spaltenüberschriften nutzen Sie col, für Zeilenüberschriften row. Für eine Gruppenüberschrift über mehrere Spalten brauchen Sie colgroup, über mehrere Zeilen rowgroup. Die MDN Seite zur Barrierefreiheit von Tabellen erklärt außerdem die Verknüpfung über id und headers für mehrstufige Überschriften. Sie betont jedoch, dass dies viel mehr Markup erfordert und scope meist genügt.

1. Setzen Sie die erste Zeile in thead und machen Sie ihre Zellen zu th.
2. Machen Sie auch die erste Spalte mit den Zeilennamen zu th, mit dem Wert row.
3. Nutzen Sie Gruppenwerte für Kopfzellen, die mehrere Spalten oder Zeilen umfassen.
4. Lassen Sie keine Kopfzelle leer; auch die Eckzelle braucht einen kurzen Namen.

Diese Struktur erfüllt zugleich das WCAG Kriterium Info and Relationships. Das heißt: Beziehungen, die Sie visuell zeigen, kann auch Software auslesen.

Tabellentitel (caption) und kurze Lesehinweise

Die caption ist der sichtbare Titel, der das Thema einer Tabelle beschreibt; sie steht als erstes Element in der Tabelle. Laut MDN entscheiden Screenreader Nutzer anhand dieses Titels, ob sie die Tabelle überhaupt lesen. Somit ist die caption eine Abkürzung, die das Anhören Dutzender Zellen erspart.

Auf dem Smartphone hat die caption einen weiteren Vorteil. Eine Tabelle füllt dort oft den ganzen Bildschirm, und Leser sehen die Zwischenüberschrift darüber nicht mehr. Ein kurzer, klarer Titel direkt oben beantwortet sofort die Frage: Was sehe ich hier? Zum Beispiel genügt „Monatlicher Leistungsumfang nach Paket“.

Bei komplexen Tabellen können Sie unter die caption zusätzlich einen Lesehinweis in einem Satz setzen, etwa „Wischen Sie nach rechts, um alle Pakete zu sehen“. Verzichten Sie allerdings auf das alte Attribut summary. MDN erinnert daran, dass es veraltet und für sehende Nutzer unsichtbar ist. Kurz gesagt: Schreiben Sie jede Erklärung als sichtbaren Text für alle.

Spaltenpriorität und Schalter zum Ein und Ausblenden

In manchen Tabellen haben nicht alle Spalten das gleiche Gewicht. In einer Produktliste sind Name, Preis und Lagerstatus Kerndaten. Gewicht, Maße und Barcode können dagegen Nebensache bleiben. Bei der Spaltenpriorität zeigen Sie auf schmalen Bildschirmen nur die Kernspalten und überlassen den Rest dem Leser.

Eine Spalte komplett zu verstecken ist allerdings riskant. Wissen Leser nicht, dass es die Daten gibt, suchen sie nie danach. Deshalb brauchen ausgeblendete Spalten immer ein deutliches Bedienelement. Eine Schaltfläche „Alle Spalten anzeigen“ oder ein Menü zur Spaltenauswahl funktioniert gut. Teilen Sie außerdem den Zustand dieses Elements Screenreadern mit.

• Bestimmen Sie die Kernspalten anhand von Nutzerforschung oder Supportanfragen.
• Löschen Sie eine ausgeblendete Spalte nie, ändern Sie nur ihre Sichtbarkeit.
• Überlegen Sie, die gewählten Spalten auch nach dem Neuladen zu merken.
• Lassen Sie die Daten für Suchmaschinen und Screenreader im HTML.

So bieten Sie einen aufgeräumten Bildschirm und trotzdem vollen Zugriff auf die Daten. Dieser Ansatz bewährt sich vor allem in Verwaltungsoberflächen und langen Produktkatalogen.

Wie bleiben Zahlen und Zellinhalte auf dem Smartphone lesbar?

Auf einem schmalen Bildschirm zählt jedes Zeichen. Daher bringt ein schlankerer Zellinhalt oft mehr als das Layout selbst. Statt in jede Zelle „EUR“ zu schreiben, verschieben Sie die Einheit zum Beispiel in die Spaltenüberschrift: „Betrag (EUR)“. Jede Zelle enthält dann nur noch die Zahl.

• Richten Sie Zahlen rechtsbündig aus, damit die Stellen untereinander stehen.
• Richten Sie Text linksbündig aus und zentrieren Sie ihn nicht.
• Aktivieren Sie Ziffern mit gleicher Breite, damit Zahlen nicht springen.
• Begrenzen Sie langen Text in einer Zelle auf zwei Zeilen und verlinken Sie die Details.
• Zeigen Sie „enthalten“ und „nicht enthalten“ mit Text und nicht nur mit Symbolen.

Auch Farbe spielt eine Rolle. Eine Regel wie „rote Zelle bedeutet nicht vorrätig“ verliert Information für Leser, die Farben nicht unterscheiden. Schreiben Sie den Status deshalb auch als Wort. Für den Unterschied zwischen Text und Hintergrund helfen Ihnen die Prinzipien aus unserem Beitrag zum Kontrast im Webdesign. Schließlich wirken feine Trennlinien auf kleinen Bildschirmen oft ruhiger als Zebrastreifen.

Tippflächen, Zoom und Interaktion in Tabellen

Enthalten Zellen Links, Schaltflächen oder Kontrollkästchen, müssen Nutzer sie am Smartphone treffen können. Stehen zwei Links in einer engen Zelle nebeneinander, tippen Leser oft auf den falschen. Darum geben Sie interaktiven Elementen genug Innenabstand und Abstand zueinander.

Ein weiterer häufiger Fehler ist das Sperren des Zooms. Manche Vorlagen schalten das Zoomen ab, um das Tabellenlayout zu schützen. Dabei ist Zoom das wichtigste Werkzeug für alle, die kleine Schrift schlecht lesen. Bauen Sie die Tabelle also so, dass sie das Zoomen verträgt, statt es zu verbieten.

Zudem hilft es, wichtige Aktionen dort zu platzieren, wo der Daumen bequem hinkommt. Eine Schaltfläche „Details“ am Zeilenende liegt bei einer gescrollten Tabelle zum Beispiel ganz rechts. Dort entdecken Leser sie womöglich nie. Halten Sie die Schaltfläche dann nahe an der ersten Spalte. Bequeme Daumenbereiche erklären wir im Beitrag zur Daumenzone im mobilen Design.

Beispielszenario: Vergleichstabelle für Leistungspakete

Als Beispielszenario nehmen wir eine Leistungsseite mit drei Paketen. Am Desktop hat die Tabelle vier Spalten: den Merkmalsnamen und drei Pakete. Auf dem Smartphone passen diese vier Spalten nicht in 360 Pixel, und Leser können die Pakete nicht vergleichen.

Die Kartenansicht wäre hier die falsche Wahl, denn die Hauptaufgabe der Leser ist der Vergleich. Stattdessen setzen wir folgenden Aufbau um:

1. Zunächst legen wir die Tabelle in einen fokussierbaren Scrollcontainer.
2. Die erste Spalte mit den Merkmalsnamen fixieren wir und begrenzen ihre Breite.
3. Paketnamen in der Kopfzeile halten wir kurz und kürzen lange Marketingnamen.
4. Werte für „enthalten“ und „nicht enthalten“ erscheinen als Symbol plus Text.
5. Über der Tabelle steht der Hinweis „Nach rechts wischen, um alle Pakete zu sehen“.

Leser erkennen nun an der ersten Spalte, was jede Zeile bedeutet, und wischen zwischen den Paketen. Pakete als Reiter sind eine Alternative. Allerdings nehmen Reiter die Möglichkeit, zwei Pakete gleichzeitig zu sehen. Deshalb bevorzugen wir die scrollbare Tabelle, wenn der Vergleich selbst zählt.

Beispielszenario: Bestellhistorie und Datensatzlisten

Als zweites Beispielszenario dient eine Bestellhistorie im Kundenkonto. Jede Zeile zeigt Bestellnummer, Datum, Artikelanzahl, Betrag, Status und einen Link „Details“. Nutzer wollen meist eine bestimmte Bestellung finden. Sie vergleichen die Zeilen nicht miteinander.

Deshalb ist die Kartenansicht hier die richtige Wahl. Auf schmalen Bildschirmen verwandelt sich jede Bestellung in eine Karte. Bestellnummer und Status stehen oben, weil Nutzer genau danach zuerst suchen. Dann folgen Datum und Betrag, und ganz unten steht ein Link „Details“ in voller Breite.

• Zeigen Sie den Status mit Farbe und Wort, etwa „Versendet“ oder „Abgeschlossen“.
• Lassen Sie deutlichen Abstand zwischen den Karten, damit Zeilen nicht verschwimmen.
• Ergänzen Sie bei langen Listen eine Seitennavigation oder „Mehr laden“.
• Halten Sie Filter und Suchfeld über den Karten in normaler Breite.

Am Desktop bleiben dieselben Daten eine klassische Tabelle. Das heißt, eine einzige HTML Struktur bedient je nach Bildschirmbreite zwei Layouts. Dieser Ansatz senkt den Pflegeaufwand und hält die Inhalte konsistent.

Warum sollten Tabellendaten HTML bleiben und kein Bild sein?

Manche Websites lösen das mobile Problem, indem sie die Tabelle als Screenshot einfügen. Kurzfristig wirkt das praktisch. Langfristig entstehen allerdings drei Verluste. Erstens schrumpft das Bild am Smartphone und bleibt ohne Zoom schwer lesbar. Zweitens erreichen Screenreader die Zellen im Bild nicht. Drittens verstehen Suchmaschinen Bilddaten schlechter als Text.

Außerdem bedeutet jede Änderung an einer Bildtabelle eine neue Datei. Ändern sich Preise oder Umfang und vergisst das Team diesen Schritt, bleiben alte Angaben auf der Seite. Deshalb halten wir die Daten immer als HTML Tabelle und lösen das mobile Layout mit CSS. Somit lebt der Inhalt an einem Ort und erscheint auf jedem Bildschirm gleich korrekt.

Wann reichen fertige Tabellenplugins aus?

Viele CMS Plugins bieten Funktionen für mobile Tabellen. Für eine einfache Blogtabelle erfüllen sie oft ihren Zweck. Prüfen Sie vor der Auswahl dennoch einige Punkte, denn manche Plugins bauen die Tabelle mit div Boxen neu auf und entfernen die barrierefreie Struktur.

• Gibt das Plugin echte Elemente table, th und td aus?
• Können Sie caption und scope eintragen?
• Erhält der Scrollcontainer den Tastaturfokus?
• Wie viel zusätzlichen Code lädt das Plugin auf die Seite?

Lautet eine Antwort „nein“, ist eine kleine Tabellenkomponente für Ihr Theme meist die gesündere Wahl. Ein paar Zeilen CSS statt eines schweren Plugins schützen zum Beispiel Geschwindigkeit und Barrierefreiheit zugleich.

Wie testen Sie eine mobilfreundliche Tabelle?

Eine mobilfreundliche Tabelle zu testen heißt mehr, als die Seite einmal am Smartphone zu öffnen. Eine systematische Prüfung umfasst verschiedene Breiten, die Tastatur und einen Screenreader. In unseren Projekten folgen wir dieser Reihenfolge.

1. Stellen Sie die Entwicklertools des Browsers auf 320 Pixel Breite und prüfen Sie, ob die Seite überläuft.
2. Zoomen Sie die Desktopseite auf 400 Prozent; der Inhalt sollte lesbar bleiben.
3. Erreichen Sie die Tabelle nur mit der Tastatur und scrollen Sie seitlich.
4. Hören Sie einige Zellen mit einem Screenreader an und achten Sie darauf, ob Sie die Überschriften mithören.
5. Testen Sie Hoch und Querformat auf einem echten Smartphone.

Für eine schnelle Vorprüfung nutzen Sie unser Tool für den Mobile Friendly Test. Trotzdem ersetzt kein Tool den manuellen Test. Große Tabellen beeinflussen außerdem die Ladezeit. Vor allem bei Tausenden Zeilen hilft eine Seitennavigation, Ihre Core Web Vitals zu schützen.

Checkliste für die mobilfreundliche Tabelle vor dem Livegang

Haken Sie die folgende Liste vor der Veröffentlichung Punkt für Punkt ab. Sie deckt die Fehler ab, die wir in der Praxis am häufigsten sehen, und dauert nur wenige Minuten.

• Ist eine Tabelle wirklich nötig, oder passt eine Liste besser?
• Läuft der Rest der Seite bei 320 Pixeln nicht seitlich über?
• Steht die Tabelle in einem eigenen Scrollcontainer mit Tastaturfokus?
• Sind Kopfzellen th, mit korrekten scope Werten?
• Hat die Tabelle eine sichtbare caption?
• Sind bei Bedarf erste Spalte oder Kopfzeile fixiert, mit deckendem Hintergrund?
• Hat jeder Wert in der Kartenansicht die richtige Beschriftung?
• Stehen Zahlen rechtsbündig, Text linksbündig und Einheiten in den Überschriften?
• Stützt sich ein Status nur auf Farbe?
• Ist Zoom erlaubt, und sind die Tippflächen groß genug?
• Haben Sie mit einem Screenreader getestet?

Jeder Punkt ist für sich eine kleine Korrektur. Zusammen ergeben sie allerdings eine mobilfreundliche Tabelle, die am Smartphone wirklich funktioniert.

Wer sollte das Tabellensystem auf Ihrer Website aufbauen?

Eine einzelne Tabelle zu reparieren ist meist einfach. Schwierig wird es auf Websites, auf denen verschiedene Redakteure Tabellen über Hunderte Seiten verteilt anlegen. Dort liegt die dauerhafte Lösung in einer Tabellenkomponente auf Vorlagenebene. Scrollcontainer, Feld für die caption, scope Werte und Kartenansicht sind dann bereits eingebaut. Redakteure geben nur Daten ein, und die Struktur stimmt immer.

Diesen Aufbau setzen wir auf Ihrer Website um. Wir prüfen Ihre datenreichen Seiten, wählen für jeden Tabellentyp die passende Methode, integrieren die Komponente in Ihr Theme und schließen die Tests zur Barrierefreiheit ab. Um den Umfang zu klären, senden Sie uns Ihre Angebotsanfrage über unsere Webdesign Seite. Danach erstellen wir ein individuelles Angebot nach Seitenzahl und Tabellenvielfalt.

Zusammengefasst verbindet eine gute mobilfreundliche Tabelle die richtige Methode, die richtige HTML Struktur und Tests auf echten Geräten. Lassen Sie diese drei Schritte weg, sieht die Tabelle am Desktop gut aus und scheitert am Smartphone. Fragen Sie deshalb immer zuerst, was Ihre Leser in der Tabelle suchen.