Best UI approach to align the column titles of reports

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.

Answers


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 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.


  • Numerical data is right-aligned.
  • Textual data is left-aligned because is read from left-to-right.
  • Headers are aligned with their data and center alignment is not recommended.

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.


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.


Need Your Help

Is there a way to access TeamCity system properties in a Powershell script?

powershell teamcity

I'm trying to set up a new build configuration in TeamCity using the Powershell runner. However, I can't seem to find a way to access the TeamCity System Properties in the build script. I've seen h...

file_get_contents() give me 403 Forbidden

php html http-headers screen-scraping

I have a partner that has created some content for me to scrape.