Aligning decimal points in HTML

Question

I have a table containing decimal numbers in one column. I'm looking to align them in a manner similar to a word processor's "decimal tab" feature, so that all the points sit on a vertical line.

I have two possible solutions at the moment but I'm hoping for something better...

Solution 1: Split the numbers within the HTML, e.g.

<td><div>1234</div><div class='dp'>.5</div></td>

with

.dp { width: 3em; }

(Yes, this solution doesn't quite work as-is. The concept is, however, valid.)

Solution 2: I found mention of

<COL ALIGN="CHAR" CHAR=".">

This is part of HTML4 according to the reference page, but it doesn't work in FF3.5, Safari 4 or IE7, which are the browsers I have to hand. It also has the problem that you can't pull out the numeric formatting to CSS (although, since it's affecting a whole column, I suppose that's not too surprising).

Thus, anyone have a better idea?

Answer 1

can you just print the numbers so that they always have the same number of decimal places, and right align them?

Answer 2

If the numbers are monospaced, javascript could be used to adjust the padding on the cell (in ems), depending on the number of digits before the decimal point. Otherwise, it could be tricky.

Answer 3

See this article by Krijn Hoetmer for your options and how to achieve this.

Answer 4

Heya,

I played around with jquery & came up with this...

html

table width="600" border="1">  
  <tr><th></th><th>Aligned Column</th></tr>
  <tr><th>1st Row</th><td class='aBDP'>1.1</td></tr>
  <tr><th>2nd Row</th><td class='aBDP'>10.01</td></tr>  
  <tr><th>3rd Row</th><td class='aBDP'>100.001</td></tr>  
  <tr><th>4th Row</th><td class='aBDP'>1000.0001</td></tr>
</table>

javascript

$(document).ready(function() {
  $('.aBDP').each(function() {
    var wholePart, fractionPart;
    wholePart = Math.floor($(this).text()-0);
    fractionPart = Math.floor(($(this).text() % 1)*10000 + 0.5) / 10000 + "";
    html  = '<span class="left">' + wholePart + '.' + '</span>';
    html += '<span class="right">' + fractionPart.substring(2) + '</span>';
    $(this).html(html); 
  })
})

css

.right {
    text-align: left;
}
.left {
    float:left;
    text-align: right;
    width:10em;
}

it seemed to work

Answer 5

Another way to format a number would be like this: 35<span style="color:transparent">.000</span>. That is, write it out with the full decimal expansion, but write the trailing decimals in invisible ink. That way you don't have to worry about the width of the decimal point.