Gestaltung großer breiter Tabellen?

[Jenni74]

Hallo zusammen,

ich bin neu hier und habe auch im Moment kein aktuelles Projekt aber trotzdem schon eine Frage. Ich möchte (muss) eine sehr große, breite Tabelle mit vielen Informationen drin gestalten.

So etwas in der Art wie die Bestenlisten bei chip. Beispiel hier:
Bestenliste: Notebooks 14 bis 15,6 Zoll im Test - CHIP Online
Die Lösung gefällt mir aber vom Design her noch nicht so besonders. Ist irgendwie "unhandlich".

Das ganz soll möglichst klar und übersichtlich aussehen und auch benutzerfreundlich sein.

Was würdet Ihr vorschlagen?
So wie im Beispiel horizontal scrollen?
Oder den Inhalt jeweils auf zwei Zeilen verteilen (macht's aber wieder unübersichtlich)?
Wie kann man sowas "schön" darstellen?

Was mir am meisten weiterhelfen würde:
Kennt Ihr ein gutes, bereits umgesetztes Beispiel, dass Ihr mir als Anregung verraten könntet?
Gibt es in irgendeiner Form ein Tutorial oder was ähnliches zu dem Thema?

Freue mich auf jeden Tipp und Rat!

 

[Loon3y]

Hallo.

ersteinmal sollte man dich vllt darauf hinweisen, dass du im falschen forum gelandet bist. Hier werden Webseiten getestet und bewertet. (Könnte ein Mod das ganze in das HTML oder CSS-Forum verschieben?)

Für dein Problem denke ich ist am optimalsten, wenn du Abkürzungen für die Spaltennamen nimmst und dann via title-funktion den Begriff erklärst. Auch denkbar wäre, wenn du eine Legende bereitstellst was die Abkürzungen bedeuten. So kann man viel Platz sparen und es geht nicht so sehr in die Breite.

Die andere Möglichkeit wäre die Tabelle aufzuteilen in 2 Tabellen. Das man die Kritieren kategorisiert.


Bedenke, dass alles was breiter wie 800px ist, unangenehm sich lesen lässt. (wer wackelt schon gerne mit dem kopf links und rechts und zurück zum lesen?)

Gruß
Loon3y

 

[Jenni74]

Hallo Loon3y,

zuerst mal vielen Dank für Deine ersten Tipps.

Gerne kann die Frage auch ins html-Forum.
Wie ich eine Tabelle technisch sauber aufbaue ist mir klar. Mir ging es hauptsächlich um die Gestaltung, so dass das ganze "schön" aussieht und zugleich benutzerfreundlich ist. Und da wollte ich halt fragen bevor ich loslege und "bevor das Kind in den Brunnen gefallen ist".

Hat sonst noch jemand einen Tipp. Ich suche immer noch ein besonders geglücktes Beispiel! :sad:

Was halten andere von einer Lösung wie bei CHIP, wo die Tabelle hin und her scrollt?

Viele Grüße

Jenni

 

[elektrowolf]

Hallo!

Vielleicht hilft dir das hier:
CSS-Based Tables: Modern Solutions - Smashing Magazine
Top 10 CSS Table Designs - Smashing Magazine

Die Geschichte auf Chip finde ich nicht so gelungen. Die sollten die Bewertungen lieber als Balkendiagramm zeigen, das würde Platz sparen, so dass man das auch auf einen Blick alles sehen könnte.

Grüße, eWolf