Tabellen im Responsive Webdesign

tabellen-responsive-design

Wer schon einmal eine Website mit tabellarischen Inhalten für mobile Endgeräte optimieren musste weiß: Tabellen und responsive Webdesign passen nicht gut zusammen. Ich spreche hier natürlich nicht von Tabellen die für das Layout missbraucht wurden (es dürfte klar sein, dass Tabellen NIE im Layout verwendet werden) sondern von Inhalten die in Form eine Tabelle abgebildet werden sollen. Solche Tabellen eignen sich nicht gut für die Darstellung auf einem kleinen Bildschirm und werden recht schnell unübersichtlich.
Ich möchte euch in diesem Beitrag verschiedene Lösungsansätze für Tabellen im Responsive Design vorstellen und die jeweiligen Vor- und Nachteile aufzeigen.

Webdesign-Seminare von kulturbanause

Im Rahmen der medien[plan]tage bieten wir im Juni folgende Seminare in Bremen an:

3. + 4. Juni – Grundkurs HTML5/CSS3
5. Juni – Moderne Webseiten gestalten

Kompromisse sind gefragt

Tabellen werden in der Regel dazu verwendet umfangreiche Datenmengen übersichtlich abzubilden. Dazu wird Platz benötigt und auch die Schriften müssen eine lesbare Größe beibehalten.

Im Responsive Design werden immer identische Inhalte visuell für verschiedene Displaygrößen optimiert. Eine große Tabelle passt aber nicht auf das Display eines Smartphones, es sei denn die Schriftgröße wird bis zur Unleserlichkeit verkleinert. Eine Tabelle verliert daher auf einem Smartphone fast immer an Übersichtlichkeit oder Lesbarkeit. Unser Ziel ist es die Inhalte der Tabelle bestmöglich darzustellen.

Welche der folgenden Lösung dabei zum Einsatz kommt und am geeignetsten ist hängt vor allem von den abgebildeten Informationen ab.

Tabellen zoomen

Smartphones und Tablets verfügen von Haus aus über eine Zoomfunktion. Grundsätzlich besteht daher die Möglichkeit eine große Tabelle herausgezoomt abzubilden. Der Besucher kann anschließend die Tabelle selbst auf die gewünschte Darstellung vergrößern und in der Tabelle scrollen.
Diese Variante halte ich für sehr benutzerunfreundlich. Zum einen geht die Übersicht in einer zumutbaren Schriftgröße völlig verloren, zum anderen ist es lästig sich über den Zoom in der Tabelle zu bewegen.

Gezoomte Tabellen im responsive Design
Gezoomte Tabelle auf dem Smartphone. Beide Ansichten sind benutzerunfreundlich.

Überflüssige Inhalte ausblenden

Über CSS3 Media Queries können auch Inhalte ausgeblendet werden (display:none; / visibility:hidden;). Es ist also möglich weniger wichtige Tabellenzeilen oder –spalten mit einer entsprechenden Klasse auszuzeichnen und dann auf dem kleinen Bildschirm zu verstecken. Hierbei wird allerdings zusätzliches, überfüssiges Markup erzeugt.
Alternativ können die Tabellenzellen auch über den CSS-Selektor :nth-child mathematisch identifiziert und ausgeblendet werden.

Inhalte werden im responsive Design aus der Tabelle ausgeblendet
Tabellenzellen können versteckt werden sobald zu wenig Platz zur Verfügung steht.

Eine einfache Erklärung zum Thema :nth-child findet ihr hier, die gesamte Technik im Bezug auf responsive Design wird ausführlich auf irishstu.com beschrieben.

Tabellen drehen oder umstrukturieren

Tabellen werden meist horizontal angelegt, da diese Art der Darstellung angenehmer zu lesen und übersichtlicher ist. Auf mobilen Endgeräten dominiert jedoch häufig das Hochformat.
Über CSS oder JavaScript können Tabellen auch vollständig umstrukturiert bzw. gedreht werden. Aus einer horizontalen Darstellung wird somit eine vertikale Darstellung mit untereinander abgebildeten Zellen. Auf CSS-Tricks und auf DBUSHELL werden zwei unterschiedliche Techniken vorgestellt.

Tabellen im responsive Design drehen oder umstrukturieren
Tabellen können auch wie in diesem Beispiel gedreht werden.
Technik 1 von DBUSHELL
Demo: dbushell.com/demos/tables/rt_05-01-12.html
Erklärung: dbushell.com/2012/01/05/responsive-tables-2/
Technik 2 von CSS-Tricks
Demo: css-tricks.com/examples/ResponsiveTables/responsive.php
Erklärung: css-tricks.com/responsive-data-tables/

Horizontal scrollbare Tabellen

Wenn die Tabelle inhaltlich sehr komplex ist und nicht umstrukturiert werden kann, steht man häufig vor einem Problem. Eine sehr komfortable und technisch unkomplizierte Lösung ist das horizontale Scrollen der ganzen Tabelle. Dafür ist ein Container-Element notwendig, dass die Tabelle umschließt. Zusätzlich müssen die Scrollbalken auf mobilen Betriebssystem eingeblendet werden, da sie normalerweise erst sichtbar sind, wenn bereits gescrolled wird.

Video-Screenshot einer scrollbaren Tabelle
Horizontal scrollbare Tabelle unter iOS

Das Beispiel lässt sich mit folgendem Code realisieren:

<div class="table-scrollable">
  <table>
    …
  </table>
</div>

table { /* Styling der Tabelle */ }

.table-scrollable {
  width: 100%;
  overflow-y: auto;
  margin: 0 0 1em;	
}

.table-scrollable::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
}

.table-scrollable::-webkit-scrollbar-thumb {
  border-radius: 8px;
  border: 3px solid #fff;
  background-color: rgba(0, 0, 0, .3);
}

Beispiel anschauen

Scrollende Tabellen mit fester 1. Spalte

Die Entwickler von Zurb haben ein Framework für Responsive Tables veröffentlicht mit dem Tabellen per JavaScript und CSS für kleine Bildschirme optimiert werden können. Das Script lässt sich sehr einfach integrieren und passt die Darstellung der Tabelle über den z-index an. Die erste Spalte der Tabelle wird auf eine eigene Ebene ausgelagert und fest positioniert. Die anderen Tabelleninhalte können horizontal unter dieser Ebene gescrolled werden.

Responsive Tables
Responsive Tables mit fester 1. Spalte und scrollendem Tabellen-Körper.

Durch diese Technik ist sichergestellt, dass die erste, wichtige Spalte immer sichtbar bleibt. Gleichzeitig können alle Inhalte der Tabelle sehr benutzerfreundlich angezeigt und mit Spalte 1 verglichen werden.

Tabellen per JavaScript umstrukturieren

Mit dem jQuery-Plugin "FooTable" können Tabellen für die mobile Ansicht vollständig umgestellt werden. Mit Hilfe des Data-Attributes von HTML5 werden bestimmte Zellen markiert, den Rest übernimmt das Script. Eine Live-Demo könnt ihr euch hier anschauen.

Drei Ansichten der mit FooTable umstrukturierten Demo-Tabelle
Drei Ansichten der mit FooTable umstrukturierten Demo-Tabelle

Fazit

Es gibt einige sehr brauchbare Ansätze und Lösungen für Tabellen im responsive Webdesign. Wichtig ist, dass man sich gut überlegt welche Lösung sich für die jeweilige Tabelle am ehesten anbietet. Eine Drehung der Tabelle macht beispielsweise eher bei Tabellen mit starker horizontaler Ausrichtung Sinn. Die erste Spalte zu fixieren ist nur dann sinnvoll, wenn hier die für einen Vergleich relevanten Informationen abgebildet werden etc.

Nachteilig ist, dass nahezu alle Lösungen Inkompatibiltätsprobleme mit älteren Browsern oder dem Internet Explorer haben. Da die angepasste Darstellung allerdings meist auf einem mobilen Endgerät angeschaut wird, auf dem normalerweise auch ein moderner Browser installiert ist, halte ich diesen Punkt für nicht sehr problematisch.

Die besten Scripte für responsive Tables

Eine stets aktuelle Liste der brauchbarsten Scripte findet ihr auf Best Webdesign Tools.

Links zum Thema / Quellen: