How to format tables with monetary data?

Question

I am working on a web app that needs to display revenue data in a table, and I am not quite sure how to make it easy to read.

Are there are any style guides or manuals that can help me?

• For instance, what are the rules about zero values? Should I put n-dash, zero, or just leave the cell empty?

• Should I get rid of dollar sign, or just leave it for "total" column/row?

• For numbers less than $1, can I omit zero so that 0.31 becomes .31? Would the same rule apply to totals?

http://jsfiddle.net/fTBtH/

Date    Foo     Bar     Total
Jan 23  $0.31   $0.00   $0.31
Jan 24  $0.01   $9.06   $9.07
Jan 25  $0.10   $0.00   $0.10
Jan 26  $0.00   $0.04   $0.04
Total   $0.42   $9.10   $9.52

Answer 1

I've written a comprehensive guide to designing effective data tables which should help you here.

It's a long article with lots of visual examples. The sections are listed below.

1) Meet the audience’s expectations

2) Order data to match the purpose of the table

3) Remove clutter

4) Create a visual hierarchy

5) Round numbers and avoid questioning

6) Perform calculations for the user

7) Provide consistent appearance

8) Align

9) Separate figure and ground

10) Reduce number of columns

11) Make comparison easy

12) Group similar data

13) Make effective use of the grid

14) Highlight the important values

15) Provide a brief verbal commentary

16) Use the white space

17) Use meaningful labels, and manage headings

This excellent example below is based on the Bank of England annual report 2010.

You can see they take out the currency (and the millions); use dashes for zero and right align (including the dash).

I would generally include a leading zero if some values are greater than 1.0, but if you're going to remove leading zeros, do it everywhere - don't mix and match.

.

Answer 2

First of all you should choose a way to display the data, and always show it the same way, for consistency. Then:

• Align monetary data to the right. This allows you to easily compare if a value is bigger than another
• Be consistent with the decimal point. If you choose to show two decimal values, always display them.
• If the column only displays monetary values, then you can remove the '$' and add that information to the column header(e.g. 'Bar in Dollars', 'Bar ($)', ...)
• I don't think you should ommit the '0' when you have '0.31'

You can also seek for inspiration in apps that already though about the problem you are trying to solve. I think you will come to the conclusion that there are a few patterns, but every app does things differently. Below are screenshots of screens similar to yours

• Mint.com
• Personal Capital

Answer 3

Make it DRY. If user know that this is $ price, no need to repeat that (you can put dollar in header). For numbers less that 0 hard to say. Check readability on real life example. However, more natural is to use 0.

Answer 4

Do Not Repeat Currency Symbol

Currency symbols are boulders along the road our eye takes in reading a table of numbers. Omit them from any series of data values.

Embed the currency symbol in the column header, such as Total ($).

Even better, embed the three-letter standard ISO 4217 code for the currency if there is any possible ambiguity in the context. For example, USD is the United States Dollar while CAD is the Canadian Dollar and both use the same symbol $.

For single values, or a bunch of unrelated numbers, include the currency symbol to avoid confusion or ambiguity.

Take a look at any professionally-produced accounting statement or corporate quarterly/annual report. You will not see a dollar sign used repeatedly on every number.

Suppress Zero

No clear rule on how to suppress display of zero. Publications’ style guides vary on this point.

Usually one of the following:

• Empty text (nothing shown)
• HYPHEN-MINUS (-) (Unicode & ASCII: U+002D)
• EN DASH (–) (Unicode: U+2013)
• EM DASH (—) (Unicode: U+2014)
• Zero in a faint color such as light grey on white background.

In most fonts, the em dash is widest, the en dash is medium width, and the hyphen is most narrow.

Personally, to my taste the en dash works best. In a field of numbers my eye glides over the en dash characters easily. The em dash is too noticeable, a visual speedbump, while the empty text makes me nervous as my eye is drawn to missing data.

Omitting Low Values

This is entirely up to your organization’s policies. If important data such as money or scientific readings, then obtain written documentation of the policy or granted permission. You do not want to be blamed if there are ramifications, legal or otherwise.

You might choose to disclose to the reader the rounding/omitting of data in a legend or notation.

Generally speaking, I would not omit certain values that fall in a resolution displayed on other values. To take your example, I would not omit 0.31 while showing a similar instance of 9.07. That would be misleading as the .07 portion implies all the numbers in that column represent a value taken to the second decimal place. So I would go with either 0 & 9 or 0.31 & 9.07.

Rounding

If rounding rather than truncating digits, beware that the "schoolhouse rounding" method you were probably taught as a child (5 rounds up) is not mathematically correct. The 5 is smack in the middle between high and low. There is no perfect way to break this tie. Be aware that bookkeepers often use "Banker’s rounding", more accurately described as round half to even, rounding up or down towards the even number.