Responsive Tabellen

Tabellen sind stark, wenn Werte wirklich verglichen werden muessen. Diese Anleitung hilft dabei, Tabellen in Inhaltsseiten, Produkttexten und Hilfebereichen so zu planen, dass Desktop-Nutzer schnell vergleichen koennen und mobile Nutzer nicht in einer unlesbaren Datenwand landen.

Inhaltsverzeichnis

Ziel

Eine gute Tabelle beantwortet eine klare Vergleichsfrage. Die Tabelle zeigt nur die Spalten, die fuer die Entscheidung noetig sind, bleibt optisch ruhig und kann auf kleinen Bildschirmen horizontal bedient oder sinnvoll ersetzt werden.

  • Tabellen nur fuer echte Vergleichsdaten nutzen.
  • Spaltenzahl klein halten und Bezeichnungen kurz formulieren.
  • Mobile Ansicht vor der Veroeffentlichung pruefen.
  • Backend-Datentabellen von Content-Tabellen unterscheiden.

Wann eine Tabelle passt

Eine Tabelle ist passend, wenn mehrere Eintraege nach denselben Kriterien verglichen werden. Typische Beispiele sind Groessentabellen, technische Merkmale, Lieferoptionen, Paketvergleiche, Preisstaffeln oder Materialangaben.

InhaltBesser als TabelleBesser als Liste
Mehrere Produkte mit gleichen MerkmalenJaNur bei wenigen Merkmalen
Schrittfolge oder AnleitungNeinJa
Vor- und NachteileTeilweiseJa, wenn wenig Werte verglichen werden
Technische DatenJaNur bei einem einzelnen Produkt
Langer FliesstextNeinNein, besser als normaler Textabschnitt

Content-Tabelle planen

  1. Vergleichsfrage klaeren: Lege fest, welche Entscheidung die Tabelle erleichtern soll.
  2. Spalten reduzieren: Entferne alles, was nicht direkt zur Entscheidung beitragt.
  3. Kurze Werte verwenden: Lange Saetze gehoeren eher unter die Tabelle oder in eine Erklaerung.
  4. Wichtiges nach links setzen: Die erste Spalte sollte den Eintrag eindeutig benennen.
  5. Einheiten sichtbar machen: Werte wie Gewicht, Dauer, Menge oder Preis brauchen klare Einheiten.
  6. Mobile Kontrolle einplanen: Pruefe, ob die Tabelle auf schmalen Bildschirmen noch bedienbar ist.

Mobile Darstellung

Breite Tabellen passen selten komplett auf ein Smartphone. Die robuste Loesung ist ein horizontal bedienbarer Tabellenbereich. So bleiben Spalten erhalten, ohne dass Inhalte gequetscht werden.

Fuer selbst gepflegte HTML-Tabellen kann ein umgebender Bereich mit table-responsive genutzt werden. Die Tabelle selbst sollte mit table und bei Bedarf mit table-striped oder table-bordered gestaltet werden.

  

    
      
MerkmalWert

    
    
      
BeispielKurz und klar

Gestaltung sinnvoll einsetzen

  • Gestreifte Zeilen: Hilfreich bei vielen Zeilen, weil das Auge leichter in der Zeile bleibt.
  • Rahmen: Hilfreich bei dichten technischen Daten, aber schnell schwerfaellig bei einfachen Tabellen.
  • Hover-Effekt: Sinnvoll auf Desktop, aber kein Ersatz fuer klare Struktur auf mobilen Geraeten.
  • Kleine Hinweise: Zusatztexte besser unter der Tabelle oder als kurzer Hinweis, nicht in jede Zelle quetschen.
  • Links und Buttons: Nur einsetzen, wenn eine klare Aktion pro Zeile noetig ist.

Backend-Tabellen abgrenzen

Backend-Tabellen sind keine frei gestalteten Content-Tabellen. Dort gelten eigene Bedienmuster: Suche, Filter, Sortierung, Seitenlaenge, Export, Spalteneinstellungen, Detailzeilen und Optionsspalten. Diese Anleitung hier behandelt dagegen Tabellen, die in sichtbaren Inhalten oder Produkttexten gepflegt werden.

Fuer Backend-Datentabellen ist die Anleitung Tabellen und Optionsspalten bedienen die passende Vertiefung. Dort geht es um Filter, Spalten ein- und ausblenden, Zeilenaktionen und sichere Sammelaktionen.

Pruefablauf vor der Veroeffentlichung

  1. Desktop-Ansicht pruefen und kontrollieren, ob Spaltenueberschriften eindeutig sind.
  2. Smartphone-Breite pruefen und horizontalen Tabellenbereich testen.
  3. Pruefen, ob die erste Spalte beim Scrollen noch verstaendlich bleibt.
  4. Sehr lange Zellen kuerzen oder in einen Erklaertext unter der Tabelle verschieben.
  5. Links, Preise, Einheiten und Statuswerte stichprobenartig kontrollieren.
  6. Nach Theme- oder Update-Aenderungen die wichtigsten Tabellen erneut ansehen.

Stolperfallen

  • Eine Tabelle wird fuer normalen Text genutzt, obwohl eine Liste besser lesbar waere.
  • Zu viele Spalten machen mobile Bedienung muehsam.
  • Spaltenueberschriften sind laenger als die eigentlichen Werte.
  • Einheiten fehlen und Werte werden falsch verstanden.
  • Ein Screenshot ersetzt echte Tabellenwerte und ist dadurch nicht suchbar oder barrierearm.
  • Die Tabelle wird auf Desktop geprueft, aber nicht auf Smartphone-Breite.

Verwandte Bereiche

  • Responsive Bilder: Fuer Bildinhalte neben oder innerhalb von Tabellen.
  • Tabellen und Optionsspalten bedienen: Fuer Backend-Tabellen mit Suche, Filter, Spalten und Aktionen.
  • Mobile Ansicht pruefen: Fuer Kontrolle auf kleinen Bildschirmen.
  • Schnelle Ladezeit erreichen: Fuer schlanke Inhalte und performante Seiten.
  • Das Frontend: Fuer Gestaltung, Lesbarkeit und Kundensicht.

War diese Seite hilfreich?

Hilf uns, das Handbuch weiter zu verbessern. Wenn etwas fehlt oder unverständlich ist, kannst Du direkt einen kurzen Kommentar senden.