How to format tables with monetary data?

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

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.

.

• I would also note, optimize scanning for the direction you want users to read. If they should read horizontally, shading should alternate row-by-row and column dividers absent or only included for specific reasons, such as (sub)totals. In Roger's excellent example above, it's obvious that we're to read vertically for the same reasons.
– Matt
Jan 28, 2014 at 9:19
• Thanks a lot for your answers! If there were more columns, would it be redundant to have currency sign in each heading cell? For example, 15-year range: 2000 £m, 2011 £m, ..., 2014 £m. Jan 30, 2014 at 1:09
• If you have many columns like that, you can state clearly somewhere next to or under the title of the table All figures are in £m Jan 30, 2014 at 8:57

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

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.

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.

• "1. Do Not Repeat Currency Symbol" I disagree with this. As a user looks to the last row, they will have to track their eyes back to the top of the table to see what kind of value it is. Furthermore, if they're reading left to right along the row, they'll still have to track their eyes back to the top of the table to see what kind of value it is. May 8, 2019 at 18:28
• @themack Why would the user be studying a column of numbers without having first read its title in the column header? May 8, 2019 at 18:44
• Why would you assume what the user will be doing? We can't predict what they will do first, but we can help them fail gracefully. May 8, 2019 at 18:51
• @themack Take a look any any professionally-produced accounting statement or corporate annual report. You will see the currency indicated only in the header and perhaps the footer. Your suggestion to help a user gaze randomly at numbers without any context of meaning is rather silly. Following that logic, we should repeat the entire column header within every cell of the table. May 8, 2019 at 18:53
• Was your professionally-produced accounting statement or corporate annual report user-tested? My data tables were, and users preferred the repeating currency symbol. I can't find any other user research out there (nothing on Nielsen-Norman) that supports my claim or yours, but in the many data tables I have designed, the repeating currency symbol tested well. ¯_(ツ)_/¯ May 8, 2019 at 19:03