User Experience Stack Exchange is a question and answer site for user experience researchers and experts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I would like to know what the best approach is to align header columns according to their data type.

I haven't found any Human Design Interface articles explaining this.

Should the header column follow the same alignment that its data values uses?

Example header columns following the data type alignment

If yes, I would like to see some trustworthy references.

share|improve this question

migrated from Aug 9 '11 at 21:25

This question came from our site for professional and enthusiast programmers.

This [question][1] is similar and has a couple of good answers. [1]: – KornMuffin Dec 19 '14 at 17:09

In general, Excel is considered the grand-daddy of data grid applications, and most apps with data tables generally follow it's basic defaults. So, titles, dates and text usually align to the left and numerical values generally align to the right. Column headers always align to the left regardless of data type.

share|improve this answer
+1 It's an interesting question though. Just because Excel does it that way doesn't mean it is good UX. Although it does give an idea of what people may unconsciously expect. – JohnGB Oct 4 '11 at 8:40
Titles, Dates, and other text align to the left for easier scanning. Scanning numerical values is easier with right alignment. Users are still scanning the left side of the column. Comparing the magnitude of values is easier with left alignment (e.g., 15,000 vs 3,000 with right alignment reads as 150 vs _30 when visually scanning the first 3 characters). If it helps, you can think of numerical values as being left aligned, but with leading 0s replaced by spaces. The most important information is still on the left. – Brian Oct 31 '12 at 17:54

Columns of figures should be tabular and right aligned if they share the same unit, and the headings should match.

Guidelines, via Morten Hjerde (IXDA thread):

  • All text left aligned
  • All numbers right aligned
  • Single characters are centered
  • Numbers that are not values, like product codes for example, are treated like text and left aligned.
  • Use the same number of decimal places for all numbers in a column
  • Left align dates.
  • Use 2 digits and leading zero for day numbers (this may be cultural?), and use the same format for dates throughout

I'm not able to find any Tufte-esque references, but plenty of examples:

I had to take out additional links and images because I don't have the rep yet. Sorry friend :\

Hoefler & Co., from a more design-focused perspective, provide a reasonable example (source):


Example two (pulled from this Behance profile). Just clear enough to tell what's going on:

UHAUL report

share|improve this answer

I think dwils makes an interesting point. His examples look like they reference the print world of accounts. I've used design principles from these visualisations in HTML data tables/grids I've developed. Principles such as columns that contain numerical data are right aligned as is the header, columns that have a sub heading are centred across the span.

Take a look at how banks and building societies present their annual reports. The reports present visual consistency in their tabular formats.

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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