Tabellenentwurfsmuster im Web

Tabellen sind ein Entwurfsmuster zum Anzeigen großer Datenmengen in Zeilen und Spalten, wodurch sie für vergleichende Analysen kategorialer Objekte effizient sind. Tabellen wurden für diesen Zweck bereits im ^2. Jahrhundert verwendet, und als die Welt begann, digital zu werden, kamen Tabellen mit uns.

Es war unvermeidlich, dass das Web die Anzeige von Daten in einem tabellarischen Format unterstützen würde. HTML-Tabellen präsentieren tabellarische Daten semantisch und strukturell angemessen. Die Standardstile für HTML-Tabellen sind jedoch nicht gerade das ästhetisch ansprechendste, was Sie je gesehen haben. Abhängig von der gewünschten visuellen Gestaltung war einige Anstrengung 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 Table Designs“ veröffentlicht, der bis heute viel Traffic erhält.

Das Web hat sich in den letzten zehn Jahren stark weiterentwickelt, und es ist bequemer denn je, Ihre Website oder Anwendung an den Darstellungsbereich anzupassen, in dem sie angezeigt wird. Davon abgesehen müssen wir weiterhin wohlüberlegte Designentscheidungen treffen, die keine Kompromisse eingehen Barrierefreiheit. Da Tabellen nicht so schnell in Ungnade fallen, sehen wir uns an, wie Tabellen 2019 im Web erstellt werden können.

Nur-CSS-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. Sie können einige ziemlich schöne Ergebnisse erzielen, die auf einer ganzen Reihe von Bildschirmgrößen gut funktionieren, ohne das zusätzliche Gewicht einer großen Bibliothek.

Leider haben wir ohne die Hilfe von JavaScript für einige DOM-Manipulationen an der Zugänglichkeitsfront nur eine Handvoll Nur-CSS-Optionen. Aber für kleine Datenmengen sind sie oft ausreichend.

Option 1: Nichts tun

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

Das Problem, das Sie haben, ist wahrscheinlich, dass Sie auf breiteren Bildschirmen zu viel Platz haben, daher ist es möglicherweise ratsam, die maximale Breite der Tabelle mit einer max-width Breite zu „begrenzen“, während Sie sie auf einem schmalen Bildschirm nach Bedarf verkleinern.

Diese Art von Muster funktioniert am besten, wenn Ihre Daten selbst nicht aus Textzeilen bestehen. Wenn es sich um Zahlen oder kurze Sätze handelt, können Sie wahrscheinlich nicht viel tun.

Option 2: Gestalten Sie die Schriftrolle

David Bushell schrieb bereits 2012 seine Technik für reaktionsschnelle Tabellen, die darin bestand, einen Überlauf aufzurufen und Benutzern das Scrollen zu ermöglichen, um mehr Daten anzuzeigen. Man könnte argumentieren, dass dies nicht gerade eine responsive Lösung ist, aber technisch gesehen reagiert der Container auf die Breite des Ansichtsfensters.

Schauen wir uns zuerst den „einfachen“ Überlauf an. Stellen Sie sich vor, ich würde Luftanführungszeichen um Basics herum verwenden, denn das Styling für die scrollenden Schatten ist alles andere als das. In diesem Fall bezieht sich „einfach“ jedoch darauf, dass sich die Tabelle in keiner Weise verändert.

Diese Technik für scrollende Schatten stammt von Roma Komarov und Lea Verou, die die Ideen der anderen abgreifen, um Magie zu erschaffen. Es hängt davon ab, mehrere Farbverläufe (linear und radial) als Hintergrundbilder auf dem enthaltenden Element zu verwenden und background-attachment: local zu verwenden, um den Hintergrund relativ zu seinem Inhalt zu positionieren.

Das Schöne an dieser Technik ist, dass Sie bei Browsern, die keine scrollenden Schatten unterstützen, trotzdem wie gewohnt durch die Tabelle scrollen können. Es stört das Layout überhaupt nicht.

Eine andere Bildlaufoption wäre, die Tabellenköpfe von einer Zeilenkonfiguration in eine Spaltenkonfiguration umzukehren, während ein horizontaler Bildlauf auf den Inhalt des <tbody> -Elements angewendet wird. Diese Technik nutzt das Flexbox-Verhalten, um die Zeilen der Tabelle in Spalten umzuwandeln.

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

Wir machen auch das <tbody> -Element zu einem Flex-Container, wodurch alle darin enthaltenen <tr> -Elemente ebenfalls in einer einzigen Flex-Zeile angeordnet werden. Schließlich muss für jede Tabellenzelle die Anzeige so eingestellt sein, dass sie anstelle der standardmäßigen table-cell block wird.

Der Vorteil dieser Technik besteht darin, dass die Kopfzeilen wie ein fester Kopfzeileneffekt immer sichtbar sind, sodass Benutzer den Kontext nicht verlieren, wenn sie durch die Datenspalten scrollen. Zu beachten ist, dass diese Technik zu einer Diskrepanz zwischen der visuellen und der Quellenreihenfolge führt, was die Dinge etwas unintuitiv macht.

Streuen Sie etwas JavaScript ein

Wie bereits erwähnt, haben Layoutoptionen, die das Morphen der Tabelle durch Ändern von display beinhalten, manchmal negative Auswirkungen auf die Zugänglichkeit, die eine geringfügige DOM-Manipulation erfordern, um sie zu korrigieren.

Darüber hinaus gibt es eine Reihe von Benutzererfahrungstipps zum Entwerfen von Datentabellen von Andrew Coyle, einschließlich Funktionen wie Paginierung, Sortierung, Filterung usw. (Funktionen, für deren Aktivierung etwas JavaScript erforderlich ist).

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

Zeilen zu Blöcken, mit Accessibility Fix

Diese responsive Datentabellen-Technik ist meines Wissens aus dem CSS-Tricks-Artikel „Responsive Data Tables“ von Chris Coyier aus dem Jahr 2011 entstanden. Seitdem wurde sie von vielen anderen angepasst und erweitert.

Der Kern dieser Technik besteht darin, eine Medienabfrage zu verwenden, um die Anzeigeeigenschaft des Tabellenelements und seiner untergeordneten Elemente so umzuschalten, dass sie in einem schmalen Darstellungsbereich block werden.

Auf einem schmalen Bildschirm sind die Tabellenüberschriften visuell ausgeblendet, existieren aber weiterhin in der Barrierefreiheitsstruktur. Indem wir Datenattribute auf die Tabellenzellen anwenden, können wir dann Beschriftungen für die Daten über CSS anzeigen, während der Inhalt der Beschriftung im HTML beibehalten wird. Bitte beziehen Sie sich auf den CodePen unten, um zu sehen, wie die Markierung und die Stile aussehen:

Die ursprüngliche Methode wendet eine Breite auf das Pseudoelement 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, wobei sich das Label und die Daten jeweils auf gegenüberliegenden Seiten ihres umgebenden Blocks befinden.

Wir können einen solchen Effekt über automatische Ränder in einem flexiblen Formatierungskontext erzielen. Wenn wir die display -Eigenschaft für jedes <td> -Element auf flex setzen, werden sie zu Flex-Kindern von <td> , da Pseudoelemente Boxen erzeugen, als wären sie unmittelbare Kinder ihres Ursprungselements.

Danach müssen Sie margin-right: auto für das Pseudo-Element festlegen, um den Inhalt der Zelle an den äußersten Rand der Zelle zu verschieben.

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

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

Jedes <tr> -Element ist auf display: grid und jedes <td> -Element auf display: contents eingestellt. Nur die unmittelbar untergeordneten Elemente eines Grid-Containers nehmen an einem Grid-Formatierungskontext teil; in diesem Fall ist es das Element <td> .

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

Was mir an diesem Ansatz gefällt, ist die Möglichkeit, mit max-content die Spalte der Pseudoelemente zu dimensionieren und sicherzustellen, 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 von min-content , max-content und fit-content (abgedeckt durch das CSS Intrinsic & Extrinsic Sizing Module Level 3) als allgemeine width und height unterstützt werden, haben wir noch mehr Möglichkeiten für das Legen Dinge aus.

Der Nachteil dieses Ansatzes ist, dass Sie dieses zusätzliche <span> oder <p> um den Inhalt in Ihrer Tabellenzelle herum benötigen, wenn es noch keines gibt, sonst gäbe es keine Möglichkeit, Stile darauf anzuwenden.

Einfache Paginierung

Dieses Beispiel zeigt eine grundlegende Paginierungsimplementierung, die von diesem CodePen von Gjore Milevski modifiziert wurde, um Tabellenzeilen anstelle von Divs zu paginieren. Es ist eine Erweiterung des im vorherigen Abschnitt besprochenen Beispiels „Style the Scroll“.

Aus Layout-Sicht ist Flexbox sehr praktisch, um die Paginierungselemente über verschiedene Viewport-Größen hinweg zu positionieren. Unterschiedliche Projektdesigns haben unterschiedliche Anforderungen, aber die Vielseitigkeit von Flexbox sollte es Ihnen ermöglichen, diese Unterschiede entsprechend zu berücksichtigen.

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

Wir können dies tun, indem wir die order nutzen. Die visuelle Neuordnung von Inhalten sollte immer mit Bedacht erfolgen, da diese Eigenschaft die Reihenfolge der Quellen nicht ändert – nur wie sie auf Bildschirmen angezeigt werden.

Einfache Sortierung

Dieses Beispiel zeigt eine grundlegende Sortierimplementierung, die von diesem Codeausschnitt von Peter Noble modifiziert 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 dies durch das Hinzufügen von CSS-Klassen tun, die dann nach Belieben gestaltet werden können. In diesem Fall sind die Indikatorsymbole Pseudoelemente, die umgeschaltet werden, wenn auf die Zielüberschrift geklickt wird.

Einfache Suche

Dieses Beispiel ist eine grundlegende 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 dies erfordert, kann es sinnvoll sein, stattdessen nach Spalten zu suchen. In diesem Szenario ist es möglicherweise eine gute Idee, jedes Eingabefeld als Teil der Tabelle in seinen jeweiligen Spalten zu haben.

Lassen Sie es eine Bibliothek erledigen

Die obigen JavaScript-Snippets dienen dazu, zu demonstrieren, wie Tabellen mit größeren Datenmengen verbessert werden können, um den Benutzern dieser Tabellen das Leben zu erleichtern. Aber bei wirklich großen Datensätzen kann es wahrscheinlich sinnvoll sein, eine vorhandene Bibliothek zu verwenden, um Ihre großen Tabellen zu verwalten.

Das Spaltenumschaltmuster ist eines, bei dem nicht wesentliche Spalten auf kleineren Bildschirmen ausgeblendet werden. Normalerweise bin ich kein Fan davon, Inhalte zu verstecken, nur weil das Ansichtsfenster schmal ist, aber dieser Ansatz von Maggie Costello Wachs von der Filament Group löst diese Bedenken, indem er ein Dropdown-Menü bereitstellt, mit dem Benutzer die ausgeblendeten Spalten wieder einblenden können Ansicht.

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

Die Spaltenumschaltfunktion in TableSaw hängt auch nicht mehr von jQuery ab, im Gegensatz zu den Beispielen aus dem ursprünglichen Artikel. Tablesaw ist eine der wenigen Bibliotheken, die ich finden konnte, die im Moment keine Abhängigkeit von jQuery hat.

Einpacken

Es gibt unzählige Tabellendesignmuster, und für welchen Ansatz Sie sich entscheiden, hängt stark von der Art Ihrer Daten und der Zielgruppe dieser Daten ab. Letztendlich 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 entspricht.

Weiterführende Lektüre

• „CSS-Responsive Tables“, David Bushell
• „Zugängliche, einfache, ansprechende Tabellen“, Davide Rizzo, CSS-Tricks
• „Reaktionsfähiges Tabellenlayout“, Matt Smith
• „Reaktionsmuster: Tabellen“, Brad Frost
• „Hey, es ist immer noch in Ordnung, Tabellen zu verwenden“, Adrian Roselli
• „Tabellen, CSS-Anzeigeeigenschaften und ARIA“, Adrian Roselli
• „Datentabellen“, Heydon Pickering