• 11 min read
• CSS,JavaScript,Design Patterns,Responsive Web Design
• Zum Offline-Lesen gespeichert
• Auf Twitter teilen, LinkedIn

Tabellen sind ein Entwurfsmuster für die Anzeige großer Datenmengen in Zeilen und Spalten, was sie effizient für die vergleichende Analyse kategorischer Objekte macht. Tabellen wurden bereits im 2. Jahrhundert für diesen Zweck verwendet, und als die Welt digital wurde, kamen die Tabellen mit uns.

Es war unvermeidlich, dass das Web die Anzeige von Daten in einem Tabellenformat unterstützen würde. HTML-Tabellen stellen tabellarische Daten in einer semantisch und strukturell angemessenen Weise dar. Allerdings sind die Standardstile für HTML-Tabellen nicht gerade die ästhetisch ansprechendsten, die Sie je gesehen haben. Je nach gewünschter visueller Gestaltung war ein gewisser Aufwand an der CSS-Front erforderlich, um diese Tabellen zu verschönern. Vor einem Jahrzehnt wurde im Smashing Magazine ein Artikel mit den “Top 10 CSS-Tabellendesigns” veröffentlicht, der auch heute noch regen Zuspruch findet.

Das Web hat sich in den letzten zehn Jahren stark weiterentwickelt, und es ist bequemer denn je, eine Website oder Anwendung an das jeweilige Ansichtsfenster anzupassen. Dennoch müssen wir weiterhin überlegte Designentscheidungen treffen, die die Zugänglichkeit nicht beeinträchtigen. Da Tabellen in absehbarer Zeit nicht aus der Mode kommen werden, sehen wir uns an, wie Tabellen im Jahr 2019 im Web erstellt werden können.

CSS-only-Optionen

Wenn Ihr Datensatz nicht so groß ist und Funktionen wie Paginierung und Sortierung nicht erforderlich sind, sollten Sie eine JavaScript-freie Option in Betracht ziehen. Damit lassen sich sehr schöne Ergebnisse erzielen, die auf einer ganzen Reihe von Bildschirmgrößen gut funktionieren, ohne dass eine große Bibliothek erforderlich ist.

Leider gibt es ohne die Hilfe von JavaScript für einige DOM-Manipulationen im Hinblick auf die Barrierefreiheit nur eine Handvoll reiner CSS-Optionen. Aber für kleine Datensätze sind sie oft ausreichend.

Option 1: Nichts tun

Wir beginnen mit einem Szenario, das wenig Aufwand bedeutet. Wenn Ihre Daten in eine Tabelle mit nur wenigen Spalten und vielen Zeilen passen, dann ist eine solche Tabelle von vornherein ziemlich mobilfähig.

Das Problem, das Sie haben, ist wahrscheinlich, dass Sie auf breiten Bildschirmen zu viel Platz haben, daher könnte es ratsam sein, die maximale Breite der Tabelle mit einem max-width zu “deckeln”, während Sie sie auf einem schmalen Bildschirm so klein wie nötig werden lassen.

Diese Art von Muster funktioniert am besten, wenn Ihre Daten selbst nicht aus Zeilen und Zeilen von Text bestehen. Wenn es sich um Zahlen oder kurze Sätze handelt, können Sie wahrscheinlich mit wenig Aufwand auskommen.

Option 2: Style The Scroll

David Bushell schrieb 2012 über seine Technik für responsive Tabellen, die einen Überlauf vorsieht und den Nutzern erlaubt, zu scrollen, um mehr Daten zu sehen. Man könnte argumentieren, dass dies nicht gerade eine responsive Lösung ist, aber technisch gesehen reagiert der Container auf die Breite des Ansichtsfensters.

Lassen Sie uns zuerst den “einfachen” Überlauf betrachten. Stellen Sie sich vor, dass ich “basic” in Anführungszeichen setze, denn das Styling für die Rollschatten ist alles andere als einfach. Dennoch bezieht sich “basic” in diesem Fall auf die Tatsache, dass die Tabelle in keiner Weise transformiert wird.

Diese Technik für scrollende Schatten stammt von Roma Komarov und Lea Verou, die die Ideen des jeweils anderen aufgreifen, um Magie zu erzeugen. Sie beruht auf der Verwendung von mehreren Farbverläufen (linear und radial) als Hintergrundbilder für das enthaltende Element und der Verwendung von background-attachment: local, um den Hintergrund relativ zum Inhalt zu positionieren.

Das Schöne an dieser Technik ist, dass man bei Browsern, die keine Rollschatten unterstützen, die Tabelle trotzdem wie gewohnt rollen kann. Das Layout wird dadurch nicht beeinträchtigt.

Eine andere Möglichkeit des Scrollens besteht darin, die Tabellenüberschriften von einer Zeilenkonfiguration in eine Spaltenkonfiguration umzuwandeln und dabei einen horizontalen Bildlauf auf den Inhalt des <tbody>-Elements anzuwenden. Diese Technik nutzt das Flexbox-Verhalten, um die Zeilen der Tabelle in Spalten umzuwandeln.

Durch die Anwendung von display: flex auf die Tabelle werden <thead> und <tbody> zu Flex-Kindern, die standardmäßig nebeneinander in derselben Flex-Zeile angeordnet sind.

Wir machen das <tbody>-Element außerdem zu einem Flex-Container, wodurch alle <tr>-Elemente darin zu Flex-Kindern werden, die ebenfalls in einer einzigen Flex-Zeile angeordnet sind. Schließlich muss für jede Tabellenzelle die Anzeige auf block anstelle des Standardwerts table-cell eingestellt werden.

Der Vorteil dieser Technik besteht darin, dass die Überschriften immer sichtbar sind, wie ein fester Überschrifteneffekt, so dass die Benutzer den Kontext nicht verlieren, wenn sie durch die Datenspalten blättern. Eine Sache, die man beachten sollte, ist, dass diese Technik zu einer Diskrepanz zwischen der visuellen und der Quelltext-Reihenfolge führt, was die Sache etwas unintuitiv macht.

Sprinkle On Some JavaScript

Wie bereits erwähnt, haben Layout-Optionen, die das Morphing der Tabelle durch die Änderung von display-Werten beinhalten, manchmal negative Auswirkungen auf die Zugänglichkeit, die einige kleine DOM-Manipulationen erfordern, um sie zu korrigieren.

Außerdem gibt Andrew Coyle eine Reihe von Tipps zur Benutzerfreundlichkeit bei der Gestaltung von Datentabellen, einschließlich Funktionen wie Paginierung, Sortierung, Filterung usw. (Funktionen, die zur Aktivierung etwas JavaScript erfordern).

Wenn Sie mit einem relativ einfachen Datensatz arbeiten, möchten Sie vielleicht Ihre eigenen Funktionen für einige dieser Features schreiben.

Rows To Blocks, With Accessibility Fix

Soweit ich weiß, stammt diese Technik für responsive Datentabellen aus dem CSS-Tricks-Artikel “Responsive Data Tables” von Chris Coyier aus dem Jahr 2011. Seitdem wurde sie von vielen anderen angepasst und erweitert.

Der Kern dieser Technik besteht darin, eine Media Query zu verwenden, um die Display-Eigenschaft des Tabellenelements und seiner Kinder auf block in einem schmalen Viewport umzuschalten.

Auf einem schmalen Bildschirm werden die Tabellenköpfe visuell ausgeblendet, sind aber in der Zugänglichkeitsstruktur noch vorhanden. Durch die Anwendung von Datenattributen auf die Tabellenzellen können wir dann Beschriftungen für die Daten über CSS anzeigen, während der Inhalt der Beschriftung im HTML bleibt. Wie das Markup und die Stile aussehen, entnehmen Sie bitte dem folgenden CodePen:

Die ursprüngliche Methode wendet eine Breite auf das Pseudo-Element an, das den Beschriftungstext anzeigt, aber das bedeutet, dass Sie wissen müssen, wie viel Platz Ihre Beschriftung zu Beginn benötigt. Das obige Beispiel verwendet einen etwas anderen Ansatz, bei dem sich die Beschriftung und die Daten jeweils auf gegenüberliegenden Seiten ihres Blocks befinden.

Einen solchen Effekt können wir über automatische Ränder in einem Flex-Formatierungskontext erzielen. Wenn wir die Display-Eigenschaft für jedes <td>-Element auf Flex setzen, werden sie zu Flex-Kindern des <td>-Elements, da Pseudo-Elemente Boxen so erzeugen, als wären sie unmittelbare Kinder ihres Ursprungselements.

Danach ist es eine Frage der Einstellung von margin-right: auto auf dem Pseudo-Element, um den Inhalt der Zelle an den äußersten Rand der Zelle zu schieben.

Ein anderer Ansatz für das schmale Ansichtsfenster-Layout ist die Verwendung einer Kombination von Grid und display: contents. Bitte beachten Sie, dass display: contents in unterstützenden Browsern derzeit Probleme mit der Barrierefreiheit hat, und diese Methode sollte nicht in der Produktion verwendet werden, bis diese Fehler behoben sind.

Aber vielleicht lesen Sie dies, nachdem diese Fehler behoben wurden, in diesem Fall, hier ist eine alternative Layout-Option.

Jedes <tr>-Element wird auf display: grid gesetzt, und jedes <td>-Element wird auf display: contents gesetzt. Nur die unmittelbaren Kinder eines Grid-Containers nehmen an einem Grid-Formatierungskontext teil; in diesem Fall ist es das <td>-Element.

Wenn display: contents auf das <td>-Element angewendet wird, wird es durch seinen Inhalt “ersetzt”; in diesem Fall werden das Pseudo-Element und das <span>-Element innerhalb des <td>-Elements stattdessen zu den Grid-Kindern.

Was mir an diesem Ansatz gefällt, ist die Möglichkeit, max-content zu verwenden, um die Größe der Spalte der Pseudoelemente zu bestimmen, wodurch sichergestellt wird, dass die Spalte immer die Breite des längsten Etiketts hat, ohne dass wir ihr manuell einen Breitenwert zuweisen müssen.

Wenn in Zukunft die Größenwerte min-content, max-content und fit-content (die vom CSS Intrinsic & Extrinsic Sizing Module Level 3 abgedeckt werden) als allgemeine width– und height-Werte unterstützt werden, haben wir noch mehr Möglichkeiten, Dinge anzuordnen.

Der Nachteil dieses Ansatzes ist, dass man ein zusätzliches <span> oder <p> um den Inhalt in der Tabellenzelle braucht, wenn er nicht schon eines hat, sonst gäbe es keine Möglichkeit, Stile darauf anzuwenden.

Einfache Paginierung

Dieses Beispiel zeigt eine einfache Paginierungsimplementierung, die von Gjore Milevski auf diesem CodePen modifiziert wurde, um auf Tabellenzeilen anstelle von Divs zu paginieren. Es ist eine Erweiterung des “style the scroll”-Beispiels, das im vorherigen Abschnitt besprochen wurde.

Aus einer Layout-Perspektive ist Flexbox sehr nützlich für die Positionierung der Paginierungselemente über verschiedene Viewport-Größen. Verschiedene Projektdesigns werden unterschiedliche Anforderungen haben, aber die Vielseitigkeit von Flexbox sollte es Ihnen ermöglichen, diese Unterschiede entsprechend zu berücksichtigen.

In diesem Fall ist die Paginierung auf der Seite zentriert und über der Tabelle. Die Steuerelemente für die Rückwärts- und Vorwärtsnavigation befinden sich auf breiteren Bildschirmen auf beiden Seiten der Seitenindikatoren, auf schmalen Bildschirmen erscheinen jedoch alle vier oberhalb der Seitenindikatoren.

Dies können wir erreichen, indem wir die order-Eigenschaft aushebeln. Die visuelle Umordnung von Inhalten sollte immer mit Bedacht erfolgen, da diese Eigenschaft nicht die Reihenfolge des Quelltextes ändert, sondern nur, wie er auf dem Bildschirm erscheint.

Einfache Sortierung

Dieses Beispiel zeigt eine einfache Sortierungsimplementierung, die von diesem Code-Schnipsel von Peter Noble abgewandelt wurde, um sowohl Text als auch Ziffern zu berücksichtigen:

Es wäre nützlich, eine Art Indikator dafür zu haben, welche Spalte gerade sortiert wird und in welcher Reihenfolge. Wir können das mit dem Hinzufügen von CSS-Klassen erreichen, die dann nach Belieben gestylt werden können. In diesem Fall sind die Indikatorsymbole Pseudoelemente, die umgeschaltet werden, wenn die Zielüberschrift angeklickt wird.

Einfache Suche

Dieses Beispiel ist eine einfache Filterfunktion, die den gesamten Textinhalt jeder Tabellenzelle durchläuft und eine CSS-Klasse anwendet, um alle Zeilen auszublenden, die nicht mit dem Sucheingabefeld übereinstimmen.

Eine solche Implementierung ist relativ naiv, und wenn Ihr Anwendungsfall es erfordert, könnte es sinnvoll sein, stattdessen pro Spalte zu suchen. In diesem Szenario könnte es eine gute Idee sein, jedes Eingabefeld als Teil der Tabelle in den jeweiligen Spalten zu haben.

Let A Library Handle It

Die obigen JavaScript-Schnipsel dienen dazu, zu demonstrieren, wie Tabellen mit größeren Datenmengen verbessert werden können, um den Benutzern dieser Tabellen das Leben zu erleichtern. Bei wirklich großen Datenmengen kann es jedoch sinnvoll sein, eine vorhandene Bibliothek zur Verwaltung großer Tabellen zu verwenden.

Das Muster der Spaltenumschaltung bewirkt, dass nicht benötigte Spalten auf kleineren Bildschirmen ausgeblendet werden. Normalerweise bin ich kein Fan davon, Inhalte auszublenden, nur weil das Sichtfeld schmal ist, aber dieser Ansatz von Maggie Costello Wachs von der Filament Group löst dieses Problem, indem er ein Dropdown-Menü bereitstellt, mit dem der Benutzer die ausgeblendeten Spalten wieder sichtbar machen kann.

Der obige Artikel wurde 2011 veröffentlicht, aber die Filament Group hat seitdem eine vollständige Suite von responsiven Tabellen-Plugins entwickelt, die unter dem Namen Tablesaw bekannt sind und Funktionen wie Sortierung, Zeilenauswahl, Internationalisierung usw. enthalten.

Die Spaltenumschaltfunktion in TableSaw hängt auch nicht mehr von jQuery ab, anders als die Beispiele aus dem ursprünglichen Artikel. Tablesaw ist eine der einzigen Bibliotheken, die ich finden konnte, die derzeit nicht von jQuery abhängig ist.

Wrapping Up

Es gibt eine Vielzahl von Tabellenentwurfsmustern, und welcher Ansatz gewählt wird, hängt stark von der Art der Daten und dem Zielpublikum für diese Daten ab. Letzten Endes sind Tabellen eine Methode zur Organisation und Präsentation von Daten. Es ist wichtig, herauszufinden, welche Informationen für Ihre Benutzer am wichtigsten sind, und sich für einen Ansatz zu entscheiden, der ihren Bedürfnissen am besten gerecht wird.

Weitere Lektüre

• “Responsive Tabellen nur mit CSS”, David Bushell
• “Zugängliche, einfache, responsive Tabellen”, Davide Rizzo, CSS-Tricks
• “Responsive Tabellenlayout”, Matt Smith
• “Responsive Patterns: Tabellen”, Brad Frost
• “Hey, es ist immer noch OK, Tabellen zu verwenden”, Adrian Roselli
• “Tabellen, CSS-Anzeigeeigenschaften und ARIA”, Adrian Roselli
• “Datentabellen”, Heydon Pickering

(ra, il)