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.
Geschrieben von:
Thomas Bieli, Frontend-Entwickler bei der raffiniert media AG
Bleib mit unserem Newsletter auf dem Laufenden
Hast du eine Idee?
Nur keine scheu! Schreib uns.