right-align numbers in table cells to the decimal point

Is there a way?

[coopster]

Has anybody ever had the need to right-align numbers in a table cell to the decimal point?

I realize that rounding numbers to format them as two decimal points and a right-align text option could be applied, but what do you do when the number is signed and the sign is going to be applied to the right of the number? Take the following numbers for example:

Array 
( 
  [0] => 54232 
  [1] => -324345 
  [2] => 2343.21 
  [3] => -324122.22 
  [4] => 0 
  [5] => 7 
  [6] => 0.2 
  [7] =>  
  [8] => 1234.1 
  [9] => 1234567890.99 
)

The value in index number 7 is null. I run the array through a PHP function to get commas and decimal points where I want them, as well as moving the sign to the right of the number. If the number is not negative, I apply an empty space to the right instead of the negative sign:

foreach ($numbers as $number) { 
 $number = number_format(abs($number), 2) . ($number < 0? '-' : ' '); 
 // I have tried &nbsp; as well ... 
 // $number = number_format(abs($number), 2) . ($number < 0? '-' : '&nbsp;'); 
} 
// Gives me something like this: 
54,232.00  
324,345.00- 
2,343.21  
324,122.22- 
0.00  
7.00  
0.20  
0.00  
1,234.10  
1,234,567,890.99

... where each positive value actually has a single blank space character following the numeric value. All is well ... until I print it out in tabular form. HTML wants to ignore any blank characters and the number is then pushed over to the right margin of the table cell causing decimal point alignment to get out of whack because of the values that do have a sign to the right.

I've tried   instead of blank to no avail unless I use a fixed font on this table column with the   solution as opposed to a single space character.

I realize another option is to put the absolute value of the number in one table cell and a possible minus sign in the next adjacent cell, and for formatting purposes, I'm thinking this is ultimately the way to go ...

How would you handle this?

[StupidScript]

Yep. Toughie. I'd end up with:

<td>

<table border=0 cellpadding=0 cellspacing=0><tr>

<td align="right">12,345.00</td><td>-</td>

</tr></table>

</td>

... at least until CSS can handle decimal alignment ... which could be a good long while. :)

(I put a table-without-extra-space into the cell that would normally hold the numbers so the outer table can have borders, shading, etc. without affecting the tidyness of the number display.)

[Warboss Alex]

You could always split the number itself over three table columns? Just make sure spacing and padding is all zero'd.

[ergophobe]

I suggest cheating:

Generate markup like this

CSS
.noshow {visibility: hidden;}

HTML
<td>7,234.12-</td>
<td>7,234.12<span class="noshow">-</span>

elements with the visibility set to hidden take up their usual space (unlike display:none). If that doesn't work, though, or you want it to be safe in older browsers,

.noshow {color: #fff; background-color: #fff;}

Either of these methods allow any amount of padding you need in any position with a fixed-width font. In your case, because you *know* which char would go there, it should work in any font (though the decimal still won't line up in a kerned font)

[coopster]

Neat cheat, where were you a week ago ;-)

Initial testing has it lining up quite nicely. I already implemented the <td> approach though. Oh well, one to keep in the back pocket for next time. Unless the <td> approach bombs on me for some reason ... thanks for the tip here, ergo.

[ergophobe]

where were you a week ago!

Busy busy busy. But I'm trying to read three days worth of threads per day to get at least bump some of those backlogged orphans. Not an orphan, but I couldn't resist that one.

In thinking about it, though, I'm against cheating, so I would suggest this minor revision which is NOT cheating, but just good design

<td>1,234.56<span class="no_show">+</span></td>

[coopster]

OK.