Darüber hinaus gibt es eine Reihe von Tipps zur Benutzerfreundlichkeit, wenn es um das Entwerfen von Datentabellen von Andrew Coyle geht, einschließlich Funktionen wie Paginierung, Sortieren, Filtern usw. (Features, die einige JavaScript-Funktionen erfordern, um sie zu aktivieren). Tabellen sind ein Entwurfsmuster zum Anzeigen großer Datenmengen in Zeilen und Spalten, wodurch sie für die vergleichende Analyse kategorialer Objekte effizient sind. Bereits im 2. Jahrhundert wurden tische für diesen Zweck verwendet, und als die Welt anfing, digital zu werden, kamen Tische mit uns. Wenn die Breitenüberschreibungsklassen nicht Ihren Anforderungen entsprechen, können Sie eigene Breitenklassen erstellen und sie auf die Zellen im Tabellenkopf anwenden. Diese können mit der Klassenoption im Nunjucks-Makro oder dem Hinzufügen der Klasse direkt zu den einzelnen Zellen innerhalb von govuk-table__head wie unten hinzugefügt werden. Das Problem, das Sie haben würden, ist wahrscheinlich zu viel Platz auf breiteren Bildschirmen, so könnte es ratsam sein, “Cap” die maximale Breite des Tisches mit einer maximalen Breite, während es nach Bedarf auf einem schmalen Bildschirm schrumpfen lassen. Das Web hat sich in den letzten zehn Jahren stark weiterentwickelt, und es ist bequemer als je zuvor, Ihre Website oder Anwendung an das Ansichtsfenster anzupassen, in dem sie angezeigt wird. Davon abgesehen müssen wir weiterhin überlegte Gestaltungsentscheidungen treffen, die bei der Zugänglichkeit keine Kompromisse eingehen.

Da Tabellen in absehbarer Zeit nicht in Ungnade zu fallen scheinen, sehen wir uns an, wie Tabellen im Web im Jahr 2019 erstellt werden können. David Bushell schrieb seine Technik für responsive Tische bereits 2012 auf, bei der überüberlaufen und Benutzer scrollen konnten, um mehr Daten anzuzeigen. Man könnte argumentieren, dass dies nicht gerade eine reaktionsschnelle Lösung ist, aber technisch reagiert der Container auf die Breite des Ansichtsfensters. Verwenden Sie die Tabellenkomponente, um das Vergleichen und Scannen von Informationen für Benutzer zu vereinfachen. Das Schöne an dieser Technik ist, dass Sie für Browser, die keine Bildlaufschatten unterstützen, die Tabelle weiterhin wie gewohnt scrollen können. Es bricht das Layout überhaupt nicht. Diese Art von Muster funktioniert am besten, wenn es sich bei den Daten selbst nicht um Zeilen und Textzeilen handelt. Wenn sie numerisch oder kurze Phrasen sind, können Sie wahrscheinlich davonkommen, nicht viel zu tun. Der Nachteil dieses Ansatzes ist, dass Sie diese zusätzliche oder

um den Inhalt in der Tabellenzelle, wenn es nicht bereits eine, sonst, es gäbe keine Möglichkeit, Stile auf sie anzuwenden.

Dieses Beispiel zeigt eine grundlegende Paginierungsimplementierung, die von Gjore Milevski von diesem CodePen geändert wurde, um Tabellenzeilen anstelle von divs zu paginieren. Es ist eine Erweiterung des Beispiels “style the scroll”, das im vorherigen Abschnitt behandelt wurde. Die oben genannten JavaScript-Snippets veranschaulichen, wie Tabellen mit größeren Datenmengen verbessert werden können, um Benutzern dieser Tabellen das Leben zu erleichtern. Bei wirklich großen Datasets ist es jedoch wahrscheinlich sinnvoll, eine vorhandene Bibliothek zum Verwalten Ihrer großen Tabellen zu verwenden. Wenn Sie Zahlenspalten vergleichen, richten Sie die Zahlen in Tabellenzellen nach rechts aus. Der Grund dieser Technik besteht darin, eine Medienabfrage zu verwenden, um die Anzeigeeigenschaft des Tabellenelements und seiner untergeordneten Elemente zu wechseln, um es in einem schmalen Ansichtsfenster zu blockieren.