Aligning decimal points in a column of numbers

This is trivial for monospace fonts, so this document only discusses doing it with proportional fonts. One way is to use text-align:".", see this example. However, no browser that I know of supports that.

Same deal with the align="char" attribute, that's not supported either.

Two columns

Obviously, it can be done with two columns, however, this takes some manual work:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("td:nth-child(1)").addClass("c1");
        $("td:nth-child(2)").addClass("c2");
    });
</script>
<style>
    table {border-collapse:collapse}
    .c1 {text-align:right}
    .c2 {text-align:left}
</style>


<table>
<tr> <th colspan="2">Long distance calls</th> </tr>
<tr> <td>1</td>   <td>.30</td>                </tr>
<tr> <td>2</td>   <td>.50</td>                </tr>
<tr> <td>10</td>  <td>.80</td>                </tr>
<tr> <td>111</td> <td>.01</td>                </tr>
<tr> <td>85</td>  <td>.</td>                  </tr>
<tr> <td>90</td>  <td></td>                   </tr>
<tr> <td></td>    <td>.05</td>                </tr>
<tr> <td></td>    <td>.06</td>                </tr>
</table>

jQuery automatically splits the columns

But we can use jQuery to automatically split one column into two.