40

We are currently working on a windows based application where users capture data. Some data is captured in a table where other data is captured in text blocks. Im currently faced with the dilemma of how to align contents specifically decimal values. Editable cells in a grid are indicated with a pencil icon which disappears once in edit mode. You will notice that the table consists of various field types, decimals and text. So what should I do and why?

A> right align all cell content

B> left align all cell content

C> right align only decimal values in cells

D> Whatever else you can suggest

enter image description here

8
  • 5
    Decimals (more importantly, dollar amounts) should always be right aligned; just ask your accounting department :)
    – Ben Brocka
    Jul 27, 2012 at 13:47
  • Why is it you're considering right alignment at all? Surely the western standard of left-to-right means content should be left aligned? (assuming it's a LTR userbase)
    – TJH
    Jul 27, 2012 at 13:48
  • @BenBrocka why do you say that
    – Mervin
    Jul 27, 2012 at 13:49
  • edit - seeing it as a table I realise what you mean now. I still think left alignment is readable enough to the average user though!
    – TJH
    Jul 27, 2012 at 13:49
  • 5
    @mervinj try adding up numbers when 13234 143 and 64 are left aligned. Right alignment keeps the order of magnitude in the same place for each row. There's a reason in math class the numbers are right aligned when working out addition/"carry the one" style problems
    – Ben Brocka
    Jul 27, 2012 at 13:50

3 Answers 3

33

Left align is basically the default for Left to Right languages just because all content will line up; this is a powerful tool for readability. Generally stick with left aligning unless there's good reason not to.

The exception, as you notice, is numbers. Here's a little blurb by Christian Heilmann:

I chatted quickly with Luke Wroblewski about it (one perk of working in the same company) and we both agreed that if there are several fields, for example in a spreadsheet application, then monetary or generally number fields should be right aligned as that allows you to add them up quickly in your head without having to worry about decimals.

Especially in accounting spreadsheets numbers (especially dollar amounts) are almost always right aligned as this lines up the "decimal point" of the numbers and makes sure each column of numbers is the same order of magnitude, making for very easy in-your-head math. You can easily add up all the millions/tens/whatever order of magnitude without having to check the length of each number to see what the magnitude of the rightmost digit is.

As an added appeal to consistency, and accountants/financially inclined people are likely used to right alignment for the numbers, and if you ask them they'll probably tell you why; it's easy to add them up. I've gotten complaints when a report for accounting has left-aligned numbers; it's just not "natural" due to the convention, and as I've explained, the convention makes good sense.

18

Darkhorse Analytics has one of the easiest to understand explanations for improving tables

The points relevant to alignment of table data are:

  • Left align text (where appropriate)
  • Right align numbers (where appropriate)
  • Align titles with data
  • Resize columns to data
12
  • If the column is a text, left-align it
  • If the column is a number or number + unit, right-align it (like excel)
  • If it's a multi-part value separated by a common separator (like 1024 x 768 is multi-part value separated by x) then align by a separator.
    • CSS for this would be something like text-align: 'x' center;

enter image description here

(Reference: Web typography book)

3

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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