Responsive Tables: Die bessere Option zu Tabellen
Tabellen werden häufig verwendet, um Daten übersichtlich darzustellen. Auch auf Webseiten sind sie oft zu finden. Allerdings werden sie immer seltener eingesetzt, da es oft Probleme mit der Darstellung auf kleinen Geräten wie Tablets oder Handys gibt.
Tabellen werden häufig verwendet, um Daten übersichtlich darzustellen. Auch auf Webseiten sind sie oft zu finden. Allerdings werden sie immer seltener eingesetzt, da es oft Probleme mit der Darstellung auf kleinen Geräten wie Tablets oder Handys gibt.
Tabellen
Um Tabellen aufzubauen, können die HTML-Tags
<table> <thead> <tbody> <tr> <th> und <td>
verwendet werden.
Hier sind einige Beispiele für einfache Tabellen, wie sie auf Webseiten eingesetzt werden können:
Tabelle mit Überschrift
Für Tabellenüberschriften sollte der HTML-Tag <th> anstelle von <td> verwendet werden.
Tabelle mit Überschrift in 1. Zeile
<th> Tags werden statt in der ersten Spalte (<tr>) immer für die erste Zelle in jeder Spalte verwendet.
Tabelle ohne Überschrift
<th> Tags werden nicht verwendet.
Tabelle mit verbundenen Zellen
Durch die Verwendung von ‹colspan› werden die drei Zellen in der ersten Zeile und mit ‹rowspan› die beiden Zellen in den letzten beiden Zeilen miteinander verbunden.
Mobile Problem
Obwohl Tabellen eine schöne und übersichtliche Darstellung bieten, können sie auf mobilen Geräten Probleme verursachen, da der verfügbare Platz in der Breite begrenzt ist. Insbesondere bei langen Wörtern wird die Tabelle abgeschnitten und wichtige Informationen sind nicht mehr sichtbar. Da immer mehr Menschen Webseiten auf ihren Handys besuchen, sollte dieses Problem nicht einfach ignoriert werden. In diesem Beispiel ist deutlich zu erkennen, dass im Vergleich zum Desktop-Beispiel auf der rechten Seite ein Teil der Tabelle abgeschnitten wird.
Tabelle mobile mit Überschrift
Als Erweiterung könnte man die einzelnen Spalten beim vertikalen Scrollen ‘snappen’, sodass die Tabelle wie ein Slider funktioniert. Wenn man zusätzlich die bereits im gesamten Internet bekannten “Dots” für alle ausgeblendeten Spalten einfügt, die ausgeblendet sind, ist die Tabelle kaum von einem normalen Slider mit Inhalt zu unterscheiden. Außerdem würde die nicht sehr ästhetische vertikale Scrollbar überflüssig werden.
Lösungsansätze
Vertical Scrolling
Bei dieser Lösung kann die Tabelle innerhalb des Fensters vertikal gescrollt werden. Hierfür wird ein div-Container um die Tabelle eingefügt, der das CSS-Attribut ‹overflow-x› mit dem Wert ‹auto› erhält. Dadurch wird, sobald die Tabelle in der Breite zu wenig Platz hat, die Scrollbar eingeblendet und der Benutzer kann die restlichen Daten außerhalb des Sichtbereichs mithilfe dieser Scrollbar erreichen.
Tabelle mobile mit Überschrift
Umbrechen
Mit Hilfe des CSS-Attributs ‘display: block;’ kann jede Zelle der Tabelle auf voller Breite angezeigt werden. Dadurch wird jedoch der Aufbau der Tabelle komplett verändert.
Tabelle mobile mit Überschrift
Bei großen Tabellen kann dies schnell unübersichtlich werden. Zusätzlich kann man die Titel der Spalten in die jeweilige erste Zelle schreiben, welche dann nur auf mobilen Geräten angezeigt werden und die erste Zeile der Tabelle auf mobilen Geräten ausblenden. Ein großer Nachteil bei diesem Beispiel ist, dass nicht der gesamte Inhalt angezeigt wird, was zu Abwertungen in der Google PageSpeedBewertung führen kann.
Keine Tabelle verwenden
Da bei dem Lösungsansatz «Umbrechen» die Tabellenstruktur auf mobilen Geräten stark angepasst wird, stellt sich die Frage, ob überhaupt eine HTML-Tabelle verwendet werden soll. Je nach Umsetzung könnte es angenehmer sein, die Struktur mit div-Tags aufzubauen und auf Desktop fixe Zeilenbreiten vorzugeben.
Spalten ausblenden
Auch eine einfache Möglichkeit wäre es, gewisse Spalten auf mobilen Geräten auszublenden. Dies wäre jedoch nur möglich, wenn sich unwichtige Daten in diesen Spalten befinden, was meist nicht zutreffend ist. Auch hier entsteht jedoch das Problem von ausgeblendetem Inhalt, was zu einer Abwertung von Google führen könnte.
Fazit
Mit Tabellen kann man einfach und effizient eine Übersicht von Daten auf Desktop Geräten erstellen. Jedoch muss man von Anfang an die mobile Umsetzung im Auge behalten und darf diese nicht unterschätzen. Möglicherweise ändert sich die Struktur der Tabelle, sobald die mobile Version umgesetzt wird. Daher würde ich zum Mobile First Ansatz raten und diese Probleme von Anfang an angehen.
Auch sollte man für seine Zwecke eine effiziente Mobile-Lösung finden. Von den oben genannten Lösungsansätzen, finde ich persönlich die Lösung mit dem Vertical Scrolling, wo die Tabelle auf Mobile als Slider dargestellt wird, am schönsten. Jedoch ist dies auch die aufwendigste Lösung.
Weitere Stories
Wie wir gemeinsam mit Coop-Experten die Lade-Performance der E-Commerce-Plattform optimieren
Ein Einblick in die Zusammenarbeit mit den Inhouse-Spezialisten von Coop. Erfahren Sie, wie durch die gemeinsame technische Optimierung kritischer Render-Pfade und Code-Strukturen die Lade-Performance der E-Commerce-Plattform nachhaltig gesteigert wurde.
Barrierefreiheit (Accessibility) im Schweizer Onlinehandel: Gesetzliche Anforderungen und technische Umsetzung.
Barrierefreiheit im Schweizer Onlinehandel ist geschäftskritisch: Der EAA verschärft die Rechtslage, bis zu 20 % der Kunden werden sonst ausgeschlossen. Wer jetzt handelt, gewinnt Rankings, Performance und Conversion.
Von Excel zur App: Wie Kilian Ricklin mit einer massgeschneiderten PWA sein Coaching-Business skaliert hat.
Erfahre, wie wir für Kilian Ricklin manuelle Prozesse durch eine performante Progressive Web App (PWA) ersetzt haben. Mit Fokus auf Kosteneffizienz und Nutzererlebnis haben wir eine zentrale Plattform geschaffen, die dein Kunden-Management revolutioniert und echtes Wachstum ermöglicht.
In 4 Wochen zum Start: Wie eine neue Event-Location dank schneller Web-Lösung durchstartete
Unter extremem Zeitdruck entwickelten wir für die Event-Location Sprängi in nur einem Monat einen SEO-optimierten Onepager mit Buchungssystem – ein Beispiel für unsere pragmatische Herangehensweise, die lokale Sichtbarkeit und reibungslose digitale Prozesse ab dem ersten Tag ermöglicht.
Das Kaufverhalten im Onlineshop: Wie Onlineshop-Giganten gezielt dein Kaufverhalten beeinflussen
Im hart umkämpften E-Commerce setzen Plattformen wie Amazon, Zalando, Etsy und Temu nicht nur auf Preise oder Sortiment. Entscheidend sind psychologische Mechanismen und gezielte UX/UI-Strategien, die Kaufentscheidungen beeinflussen, Vertrauen stärken und Kunden langfristig binden.
