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?
If yes, I would like to see some trustworthy references.
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:
Hoefler & Co., from a more print design-focused perspective, provide a reasonable example (source):
Example two (pulled from this Behance profile). Just clear enough to tell what's going on:
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.
I know that this question is from 5 years ago, but I saw it has no answer and I found this article, "Design Better Data Tables" very detailed and complete as an answer.
Numerical data is read right-to-left; that is, we compare numbers by first looking at their ones digit, then their tens, then their hundreds, and so on. This is also how most people learn arithmetic — start on the right and move left, carrying digits as you go1. Therefore, tables should keep numerical data right-aligned.
Textual data is read (in English) from left-to-right. Comparing textual elements is typically done by sorting into alphabetical order: if two entries start with the same letter, the second letter is used, and so on. Trying to quickly scan text can be infuriating if it’s not left-aligned.
Headers, generally, should carry whatever alignment their data has. This keeps the vertical lines of the table clean, and provides consistency and context.
Center alignment causes the lines of the table to become “ragged,” which makes it much harder to scan entries, often necessitating extra dividers and graphical elements.
This is an old question but I recall a professors' advice years ago that I use:
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.
