4

I want to know if there's an standard or at least a nice way to stylize table headers?

Uppercase or lowercase? Left or centered? Top or bottom?

Thanks

6

Alignment can depend on the data you're displaying, and what you want the user to quickly grasp.

uppercase or lowercase?

Miles Tinker's research work (32 years of research!) looked at legibility of upper and lowercase words.

From a research study at NCBI, an abstract that cites Tinker's observations:

Letter case and text legibility in normal and low vision

Miles Tinker, an authority on legibility and typography said “Lower-case letters have more ‘character’ in terms of variation in shape and the contrasting of ascenders and descenders with short letters. This leads to characteristic word forms that are much easier to read than words in all capitals”

Table design:

There's several fairly advanced frameworks out there.

Material Design table specs: It appears they use Sentence case headers, and right align headers for columns with numerical data. Right aligning the data (regardless of column header) makes sorted comparison easier.

enter image description here

Bootstrap: Sentence case again, looks like left align standard.

enter image description here

Salesforce Lightning: Their headers are in all caps, and it doesn't seem they right align for columns with numeric data.

enter image description here

Zurb Foundation: Left aligned, plus background shading in the headers.

enter image description here

One common observation regardless of framework is that table headers are almost always distinguishable from the content in some graphical manner. This can be accomplished by:

  • font weight
  • color
  • background row color

Alignment: Don't center align a header with left aligned text. Don't make my eye do more work than it needs to.

enter image description here

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.