Idées de conception pour l’affichage de grandes quantités de données dans un tableau HTML

Question

J'ai une table HTML qui a littéralement 30 colonnes de données, et j'ai du mal à l'encadrer de manière à ce qu'elle soit visible sans défilement massif à gauche / à droite.

Je me demandais si quelqu'un avait déjà vu quelque chose d'intelligent avec les en-têtes de colonne? Certains d'entre eux ne peuvent tout simplement pas être abrégés, mais l'en-tête de colonne ressemble à "Interview". et la valeur est numérique (beaucoup d'espace perdu pour l'en-tête uniquement). Certes, je pourrais essayer de nommer ces colonnes comme INT ou autre chose, mais il y a beaucoup de colonnes de même nom qui pourraient prêter à confusion.

Peut-être une sorte de colonnes qui se réduisent automatiquement en fonction du mouvement de la souris? Pas sûr .. J'ai juste besoin de suggestions créatives sur la façon d'afficher ces données!

Answer 1

L'utilisateur aura probablement du mal à comprendre 30 colonnes de données, indépendamment du défilement.

Je recommanderais d'afficher les colonnes les plus fondamentales (nom, description, numéros d'identification - éléments essentiels, espérons-le, il n'y en a que 10 ou moins), puis de laisser l'utilisateur activer ou désactiver les colonnes dont il a besoin. Un peu comme google au carré .

Utilisez Jquery et CSS pour accomplir cela de manière propre. Il peut également y avoir des bibliothèques d’interface utilisateur Javascript qui le font pour vous (interface utilisateur Jquery, YUI, autres, etc.)

Answer 2

créez des images pour les noms de colonne et faites pivoter le texte dans l'image de 90 degrés. vous pouvez alors avoir un nom long avec des largeurs égales.

Josh

Answer 3

Je suis d’accord avec la réponse de colonnes féroces, la bascule est une bonne idée. De plus, en fonction des données, il est recommandé d'afficher uniquement quelques colonnes. Lorsque l'utilisateur clique sur la ligne qui l'intéresse, il affiche une nouvelle page consacrée aux données de cet enregistrement. Cela fonctionnera pour certains types de données et pas pour d’autres