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

  • 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?

    It's really too bad that no browser supports aligning to a character (eg. `.currency { text-align: '.' }`), even though it is part of the CSS spec (see: http://www.w3.org/TR/css3-text/#character-alignment).

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

    enter image description here

    And my apologies, you asked specifically about the column labels- there is a lot of room for design interpretation here, but safe bet is center align, not beholden to alignment of columnar data.

    Doesn't that hurt scanabillity? Column labels should be aligned exactly the same as the rest of the column, so the eye can scan down from label to data without having to realign.

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

License under CC-BY-SA with attribution


Content dated before 7/24/2021 11:53 AM