it-swarm.com.de

Beispiele für gut aussehende HTML-Tabellen

Alle Tabellen in meiner App sehen aus wie Scheiße, ich verliere Haare. Ich habe versucht, sie besser aussehen zu lassen, aber am Ende sehe ich sie schlechter aus. Haben Sie Beispiele für gut aussehende Tabellen? vorzugsweise mit vielen Zeilen und einer angemessenen Anzahl von Spalten.

6
ryudice
7
Jitendra Vyas

Ich habe oben einige Sammlungen als Kommentare hinzugefügt.

Connie Malamed, die Grafiken verstehen schrieb, schrieb einen beliebten Artikel über das Entwerfen effektiver Datentabellen, den ich anhand von Visualisierungen und Beispielen in meiner eigenen, etwas langwierigen Ressource zu erklärte. Effektives Design von Datentabellen . Connies Originalartikel ist hier .

Die Punkte in unseren beiden Artikeln können Ihnen helfen, zu verstehen, wie Sie Ihre eigenen Tabellen besser als schlechter aussehen lassen, indem Sie überlegen, was wichtig ist, um zu zeigen und nicht zu zeigen. Insbesondere die Gestaltprinzipien von Design und Leerzeichen sind Schlüsselelemente einer gut aussehenden Tabelle.

Hier ist eine Zusammenfassung der Designtipps:

  1. Erfüllen Sie die Erwartungen des Publikums
  2. Bestellen Sie die Daten so, dass sie dem Zweck der Tabelle entsprechen
  3. Unordnung beseitigen
  4. Erstellen Sie eine visuelle Hierarchie
  5. Runden Sie Zahlen und vermeiden Sie Fragen
  6. Führen Sie Berechnungen für den Benutzer durch
  7. Sorgen Sie für ein einheitliches Erscheinungsbild
  8. Ausrichten
  9. Figur und Boden trennen
  10. Anzahl der Spalten reduzieren
  11. Machen Sie den Vergleich einfach
  12. Gruppieren Sie ähnliche Daten
  13. Nutzen Sie das Raster effektiv
  14. Markieren Sie die wichtigen Werte
  15. Geben Sie einen kurzen mündlichen Kommentar ab
  16. Verwenden Sie den Leerraum
  17. Verwenden Sie aussagekräftige Beschriftungen und verwalten Sie Überschriften
5
Roger Attrill

Ich kann diesen Artikel nur empfehlen: Entwerfen mit Leerzeichen: Warum 1 + 1 =

Er abstrahiert das Layout seines eigenen Blogs und hat einen sehr guten Punkt.

0
Ricardo Tomasi