Tabellendesign-Muster im Web

Chen Hui Jing hat sich mit einer Fülle von Designmustern für Tabellen beschäftigt, die nützlich sein könnten, wenn man Tabellen erstellt, die leicht zu lesen und für das Web responsive sind

Es gibt eine Fülle von Tabellendesign-Mustern, und welcher Ansatz Sie wählen, hängt stark von der Art der Daten ab, die Sie haben, und von der Zielgruppe für diese Daten. 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 einen Ansatz zu wählen, der ihre Bedürfnisse am besten erfüllt.

Das erinnert mich daran, wie Chris einst über responsive Datentabellen schrieb und wie schwierig es ist, diese richtig hinzubekommen. Außerdem gibt es einen großartigen Beitrag von Richard Rutter in einer ähnlichen Richtung, in dem er über die Lesbarkeit von Tabellen und feine Typografie schreibt.

Viele Tabellen, wie z. B. Finanzberichte oder Fahrpläne, bestehen hauptsächlich aus Zahlen. Im Allgemeinen besteht ihr Zweck darin, dem Leser numerische Daten zu liefern, die entweder in Spalten oder Zeilen und manchmal in einer Matrix aus beidem dargestellt werden. Ihr Leser kann die Tabelle verwenden, indem er die Spalten nach unten scannt, entweder nach einem Datenpunkt sucht oder Vergleiche zwischen Zahlen anstellt. Ihr Leser kann die Daten auch einfach durch einen Blick auf die Spalte oder Zeile erfassen. Es ist wesentlich einfacher, Zahlen zu vergleichen, wenn die Einer-, Zehner- und Hunderter alle vertikal ausgerichtet sind; das heißt, alle Ziffern sollten genau die gleiche Breite einnehmen.

Eines meiner bevorzugten Tabellenmuster, das ich jetzt konsequent verwende, ist eines mit einer fixierten Kopfzeile. Wie diese Demo hier

Siehe den Pen
Table Sticky Header von Robin Rendle (@robinrendle)
auf CodePen.

Als Benutzer neige ich dazu, wenn ich durch große Datentabellen mit komplexen Informationen scrolle, zu vergessen, worum es in einer Spalte geht, und dann muss ich wieder ganz nach oben scrollen, um die Spaltenüberschrift zu lesen.

Nun, all das lässt mich denken, dass ich ein ganzes verdammtes Buch zum Thema des <table>-Elements lesen würde und wie man Daten genau und responsiv gestaltet.

Direkter Link →