Should content be left aligned or right aligned in a table that contains a mix of text and numbers?

Question

I have many tables within a site that have a mixture of both numeric values of all types (currency, integers, etc) and columns that contain text.

What is the guidelines or standards for alignment? Should the column labels and the column content be right aligned, left aligned, or both?

Answer 1

Regardless of the mix of types of data in one table, the data type in the individual column should drive the alignment.

Typical alignments (and of course, there are always reasons and ways to do differently)

• Text and items treated like text: Left Align (caveat: I find numbers always easiest to read rt aligned)
• Numbers and items treated like numbers: Right Align (and if you have decimals, best to always show, even if the one number is 23.00 and another is 1.23)

A quick look at a grid with mixed data on the Bloomberg site shows a good example. This grid shows a mixture of values, notice text is left aligned, numbers are right aligned. This makes it easier on the eyes and the brain for digesting the information.

Answer 2

1. Labels should be aligned with columns

Labels should be aligned exactly the same as the column below them. If you use different alignments for different labels you risk making it hard to identify which data the label is supposed to be aligned with.

2. Columns should be aligned according to role, not type

Columns can either be a dimension something you look up against, or metrics something you're looking up

This is an important distinction in design of useable tables, so it's worth digging into it a little.

In a normal table, you have one to two columns on the left hand side of your table that are categorising the data into rows. These are your dimensions, the user is usually scanning down them to find specific rows.

Because their primary use case is scanning to find a single item they should be left aligned and ideally sorted into a sensible order. Here's a table with the dimensions highlighted

Dimension   number     cost
-item1-        567    $8954
-item2-         12      $56
-item3-       4444   $38372

The other type of column are metrics. These are the figures or categories that belong to each row. These are on the right hand side of the table, and their major use case is that the user is trying to compare them against the same metric in other rows. Here's a table with the metrics highlighted:

Dimension   number       cost
item1         -567-    -$8954-
item2          -12-      -$56-
item3        -4444-   -$38372-

Metrics should be right aligned, because that aids comparison. If you don't do that, you end up with this sort of problem:

Dimension number cost
item1     567    $8954
item2     12     $56
item3     4444   $38372

In this case, in the number column, the first digit in row 1 represents 500, the first digit in item2 represents 10 and the first digit in row 3 represents 4000. But they're all lined up against each other as if they're directly comparible.

Instead when they're right aligned line this:

Dimension number     cost
item1        567    $8954
item2         12      $56
item3       4444   $38372

The 7 in 567, 2 in 12 and 4 in 4444 all represent a single digit. Right aligning them here decreases the cognitive load needed to compare the figures within a column.

3. But what if some of my metrics aren't numbers?

The important points here is that metrics aren't normally scanned down, they're normally compared and the human eye tends to pick out visual inconstancies.

So if you have some columns left aligned and some columns right aligned, the eye tries to mentally group all the left aligned ones and all the right aligned ones.

The end result is something like this:

company    status  value   code   units
google     red        59   googl   2394
apple      green     504   aapl     359
microsoft  orange    300   msft      45

It's hard to tell if the status is something you're supposed to be comparing or something you're supposed to be scanning down. It implicitly looks like a dimension, because it's aligned the same as company.

This table is much more usable as follows:

company    status   value     code  units
google        red      59    googl   2394
apple       green     504     aapl    359
microsoft  orange     300     msft     45

The best resource I know on this is Stephen Few's Show Me The Numbers and all the discussion this answer is paraphrasing that book.