it-swarm.com.de

Wie kann eine Datentabelle mit Unterelementen am besten angezeigt werden?

Wir haben eine Webanwendung, in der wir viele Daten in "Datenblättern" anzeigen. Als Teil davon können einigen Datenwerten andere Werte zugeordnet werden. Um es komplizierter zu machen, kann jedes Element mehrere Werte haben.

z.B. (Dies ist wahrscheinlich ein komplizierteres Beispiel, aber wir haben viele Daten, die ähnlich sind, wenn auch etwas einfacher.)

 Punkt 1 Wert 
 Unterpunkt1 Wert 
 Unterpunkt2 Wert 1 
 Wert 2 
 Wert 3 
 Unterpunkt3 Wert 
 Unterpunkt4 Wert 
 Unterpunkt5 Wert 
 
 Punkt 2 Wert 1 
 Wert 2 
 Wert 3 
 Unterpunkt1 Wert 
 Unterpunkt2 Wert 1 
 Wert 2 
 Wert 3 
 Unterpunkt3 Wert 
 
 Punkt 3 Wert 

Wenn diese Werte im Datenblatt angezeigt werden, müssen wir klarstellen, dass die Werte der Unterelemente und ihre Werte dem Hauptwert zugeordnet sind, anstatt selbst Teil des Hauptdatenblatts zu sein.

Welche visuellen Techniken können wir anwenden, um diese Daten auf einer Webseite deutlich zu machen?


EDIT :

Nachfolgend finden Sie zwei Modelle, die intern erstellt wurden. Der erste wird von mehreren Leuten bevorzugt, obwohl ich persönlich denke, dass er schrecklich ist. Die zweite ist meine bevorzugte Version.

Stripes within stripes

Lines within stripes

Gibt es eine bessere Möglichkeit, diese Informationen zu unterscheiden?

8
adrianbanks

Würde das funktionieren? Ich war nicht der Grund, warum die Werte in Ihrem Design eingerückt und vertikal gestapelt werden mussten.

Das folgende Design hat also die folgenden Änderungen:

  1. spaltenüberschriften
  2. datenwerte linksbündig und viel näher an den Feldnamen.
  3. durch Kommas getrennte Werte. (was wickeln kann.)

enter image description here

3
Jung Lee

Sie können eine Methode wie "gerade" und "ungerade" verwenden, um Unterelemente von anderen Unterelementen zu trennen. Jeder gerade Gegenstand kann einen etwas anderen Farbton oder eine andere Farbe haben als der nächste ungerade Gegenstand.

Zum Beispiel könnten Sie etwas Ähnliches annehmen: enter image description here

Das Design mit Registerkarten reduziert zwar die Unordnung, funktioniert jedoch möglicherweise nicht gut mit Ihren Daten, wenn Elemente miteinander verglichen werden müssen. Es kann bei Bedarf angepasst werden.

Ich hoffe, Sie haben einen CSS-Experten zur Hand!

5
sleepyscene