Table Alignment

Question

I am currently working with a developer who is arguing that all the number in a table should be aligned to the right-hand side(Please see below), this is only on one page on the website. I am arguing that this is inconsistent and don't think this would be attractive.

Is there any argument for having the numbers aligned to the right on just one page of the website?

Readability is your main focus here. Ask also yourself, what is the easiest way to read the values? Also, I am in favor of keeping the units (such as % or SGD) on the table's header, so that you reduce information repetition. — Dimitra Miha, Apr 10 '17 at 10:29
@DimitraMiha - regarding SGD - if there is a lot of data, and multiple columns use various units (e.g. SGD, USD etc.) then having them within data may be beneficial. As this is something for accountants to use, probably, there may be dozens of rows. Thus, to avoid the need for the eye to jump to the header and back, units can be aligned to the left, and the data can be right (or: decimal point) aligned. — Dominik Oslizlo, Apr 10 '17 at 10:52
@DominikOslizlo Definitely agree. This suggestion is only in the case that the unit is the same in the whole column. — Dimitra Miha, Apr 10 '17 at 10:54
@DimitraMiha - you are right, in this case this could work. In case it was a heavy-data dashboard, though, I would suggest having them in each column. I mean a situation where e.g. columns with SGD's GBP's, USD's and CHF's would be side by side. In that case, I would maybe suggest changing them to a little bit less prominent colour to avoid interface overload, still giving Users a clear information which currency they are looking at. There are other solutions to be considered, though (e.g. headers repeated at the bottom). — Dominik Oslizlo, Apr 10 '17 at 10:59

score 3 · Answer 1 · answered Apr 10 '17 at 10:46

If you have the numbers aligned to the right, comparing data becomes much easier. This is not just because the numbers are aligned to the right, though, but because they are aligned between each other.

  ▓▓▓,▓▓▓.▓▓
   ▓▓,▓▓▓.▓▓
▓,▓▓▓,▓▓▓.▓▓
       ▓▓.▓▓
  ▓▓▓,▓▓▓.▓▓
   ▓▓,▓▓▓.▓▓

In the above example, you can easily tell which numbers are higher and which are lower.

This task becomes much harder when data is displayed as below:

▓▓▓,▓▓▓.▓▓
▓▓,▓▓▓.▓▓
▓,▓▓▓,▓▓▓.▓▓
▓▓.▓▓
▓▓▓,▓▓▓.▓▓
▓▓,▓▓▓.▓▓

You can still see which strings are shorter and which are longer, but as you add more data (especially more columns) this task becomes more and more complex, because your brain needs to make correction for each individual row to compare them.

Some data, however, will have a longer fraction part, so you should either align it around the decimal point:

  ▓▓.▓▓▓▓▓▓▓
▓▓▓▓.▓
 ▓▓▓.▓▓▓
▓▓▓▓.▓▓▓▓▓

or keep them right aligned just adding zeroes at the end:

  ▓▓.▓▓▓▓▓▓▓
▓▓▓▓.▓000000
 ▓▓▓.▓▓▓0000
▓▓▓▓.▓▓▓▓▓00

Conclusion: use whatever gives more control to the User. And it is definitely worth asking them in the first place.

Note that this applies to numerical data. In the image you have provided I would use the following:

Debtor       Rating   1-M Return           Available           Time left
------------ -------- ---------- -------------------- ------------------
John Doe     A           1.5   %     SGD 1,000,000.00     1Y  2M 12D  5h
Jane Doe     B           4.0   %     SGD    45,321.23            17D 11h
Michael Doe  C           2.264 %     SGD   123,456.78        10M 24D  3h

I think this way you will achieve quite good comparability of the data, even on bare text printouts.

Table Alignment

1 Answers1