web-dev-qa-db-fra.com

En-têtes de tableau: majuscules ou minuscules, alignés à gauche ou au centre, haut ou bas?

Je veux savoir s'il existe une norme ou au moins une belle façon de styliser les en-têtes de tableau?

Majuscule ou minuscule? Gauche ou centré? Haut ou bas?

Merci

3
NathanWay

L'alignement peut dépendre des données que vous affichez et de ce que vous souhaitez que l'utilisateur saisisse rapidement.

majuscule ou minuscule?

Miles Tinker's des travaux de recherche (32 ans de recherche!) Ont examiné la lisibilité des mots en majuscules et en minuscules.

À partir d'une étude de recherche au NCBI, un résumé qui cite les observations de Tinker:

Casse des lettres et lisibilité du texte en vision normale et basse

Miles Tinker, une autorité en matière de lisibilité et de typographie, a déclaré: "Les lettres minuscules ont plus de" caractère "en termes de variation de forme et de contraste des ascendants et des descendants avec des lettres courtes. Cela conduit à des formes de mots caractéristiques qui sont beaucoup plus faciles à lire que les mots dans toutes les capitales. "

Conception de la table:

Il existe plusieurs cadres assez avancés.

Spécifications de la table Material Design : Il semble qu'ils utilisent des en-têtes de cas de phrase et alignent à droite les en-têtes des colonnes avec des données numériques. L'alignement à droite des données (quel que soit l'en-tête de colonne) facilite la comparaison triée.

enter image description here

Bootstrap : Encore une fois, la phrase ressemble à la norme d'alignement à gauche.

enter image description here

Salesforce Lightning : Leurs en-têtes sont en majuscules, et il ne semble pas qu'ils s'alignent à droite pour les colonnes avec des données numériques.

enter image description here

Fondation Zurb : aligné à gauche, plus un ombrage d'arrière-plan dans les en-têtes.

enter image description here

Une observation courante, quel que soit le cadre, est que les en-têtes de tableau se distinguent presque toujours du contenu d'une manière graphique. Cela peut être accompli par:

  • poids de la police
  • couleur
  • couleur de la ligne d'arrière-plan

Alignement: N'alignez pas au centre un en-tête avec du texte aligné à gauche. Ne faites pas travailler mes yeux plus que nécessaire.

enter image description here

5
Mike M