Webkrauts

Responsive Webdesign

Tabellen, die sich anpassen

Tabellen können sehr komplex werden. Oft sind sie schon an Deskptop-Rechnern unübersichtlich. Doch wie gehen wir mit ihnen in responsiven Projekten um und bereiten ihre Inhalte sinnvoll für kleine Bildschirme auf?

Responsive Webdesign ist keine einfache Sache, das sollte sich herumgesprochen haben. Neben einer anderen Art zu denken und an Projekte heranzugehen, stoßen wir immer wieder auf Herausforderungen im Layout. Tabellen sind eine solche Herausforderung. Denn schließlich gilt es, eine Tabelle so zu formatieren, dass sie auch auf einem kleinen Monitor bedienbar und verständlich ist.

Es gibt viele Arten von Tabellen

Es ist eine simple Erkenntnis, aber sie ist wichtig: Es gibt nicht die Tabelle, es gibt sehr viele unterschiedlich komplexe Tabellen. Deshalb gibt es auch keine einfache, für alles gültige Lösung. Es kann sich anbieten, eine Tabelle auf kleinen Monitoren in ein Diagramm zu wandeln und die Tabelle selber auszublenden. Zudem bietet sich JavaScript an, um eine Tabelle besser nutzbar zu machen. Es gibt aber auch reine CSS-Techniken, um eine Tabelle umzuformatieren.

Umformatierung mit CSS

Tabellen sehen in HTML-Dokumenten nach Tabellen aus, weil ihnen die passenden display-Eigenschaften vom Browser-Stylesheet mitgegeben werden. Diese hat bspw. die Ausprägungen table, table-row oder table-cell. Webworker können sich dies zu Nutze machen und die display-Eigenschaften ändern. Die einfachste Variante ist, allen Tabellen-Elementen ein display: block zu geben. Das führt dazu, dass alle Tabellenzellen schlicht untereinander gesetzt werden. Dabei muss der Webworker dann zwei Herausforderungen meistern:

1. Zum einen muss der Tabellenkopf versteckt werden, da er nicht mehr gebraucht wird. Wir positionieren ihn dazu absolut und schieben ihn weit außerhalb des Viewports.
2. Zum anderen müssen die Inhalte des Tabellenkopfes nun nachträglich zu den Inhalten generiert werden; am Besten ohne Hilfe von JavaScript. Dafür geben wir allen Tabellenzellen ein data-Attribut, dessen Inhalt den Titel des jeweiligen Tabellenkopfes wiedergibt. Diese Inhalte werden dann ausgelesen und in der content-Eigenschaft wiedergegeben.

Table Demo 4 - responsive von Jens Grochtdreis (@jensgro) auf CodePen anschauen.

So schön und schön einfach diese Variante auch ist, der IE 9 kann nicht mit ihr umgehen. Aber das sollte niemanden davon abhalten, sie zu benutzen. Denn Ziel einer solchen Umformatierung sind schließlich Geräte mit kleinen Bildschirmen. Der IE9 ist der Browser auf alten Windows-Phone-7-Telefonen. Netmarketshare – als eine Beispielquelle – gibt als Verbreitungsgrad ganze 0,29% an. Damit ist der IE9 kein ernst zu nehmender Hemmschuh.

Ein anderer Ansatz funktioniert u.a. mit Floats. Hierbei wird der Tabellenkopf nach links gefloatet, der Tabellen-Body bekommt ein overflow: scroll, damit dessen Inhalt später mittels Scrollbar erreichbar ist. Um die Inhalte dem umarrangierten Tabellenkopf anzupassen, müssen nun die Tabellenreihen mit display: inline-block und die Zellen mit display: block formatiert werden. Jetzt haben wir in der Tabelle quasi x- und y-Achse vertauscht. Auf kleineren Monitoren sind die Inhalte jetzt besser zu lesen. Auch hier spielt der IE9 wieder nicht mit.

Responsive Table von Jens Grochtdreis (@jensgro) auf CodePen anschauen.

Weiterführende Links

Tabellen sind in responsiven Projekten immer eine Herausforderung. Deshalb sollten Webworker sich intensiv und immer wieder mit ihnen auseinandersetzen. Die oben beschriebenen Techniken sind ein Ausschnitt der vielen Möglichkeiten. Die folgenden Links sollen das Bild kompletter machen:

• Aaron Gustafson schreibt über »Responsive Tables«.
• Die BBC lässt sich in ihrem Blog über Tabellen aus.
• Einen Kalender kann man auch responsive bekommen.
• Bei Maxdesign wird eine einfache Lösung versprochen.
• Chris Coyier gibt eine Einführung in das Problem und dann zusätzlich eine Übersicht unterschiedlicher Techniken.
• Auch Jason Grigsby gibt eine Übersicht unterschiedlicher Techniken und versucht, Empfehlungen zu geben.
• Tablesaw ist ein jQuery-Plugin der Filamentgroup für unterschiedliche Formen responsiver Tabellen.
• Übersicht bei »This is responsive« zu Tabellen bei den »Resources« und bei den »Patterns«.