HTML tables; align text on the decimal point: a crude manual kludge

You want your numbers in your table to align on the decimal point. HTML + CSS does not seem to do this simple thing very well. If you don’t mind a crude manual kludge, what you can do is right-align the numbers, pad them with zeroes on the right, and then turn the spurious zeroes transparent. Now, I note that I cannot get a working example within freaking WordPress, but I can show the code, and a screenshot of how it looks in the preview.

Code:


<table align="left">
<tbody>
<tr>
<td align="right">0.23<span style="color: rgba(0,0,0,0.0);">0</span></td>
</tr>
<tr>
<td align="right">2.3<span style="color: rgba(0,0,0,0.0);">00</span></td>
</tr>
<tr>
<td align="right">23<span style="color: rgba(0,0,0,0.0);">.000</span></td>
</tr><tr>
<td align="right">23&ensp;&ensp;&ensp;&ensp;</td>
</tr><tr>
<td align="right">23&puncsp;&ensp;&ensp;&ensp;</span></td>
</tr>

<tr>
<td align="right">0.023</td>
</tr>
<tr>
<td align="right">230<span style="color: rgba(0,0,0,0.0);">.000</span></td>
</tr>
</tbody>
</table>

I am sure you can do this is a cleverer way; this example is only to show that it works. It’s a bit manual, though. And I’m nor sure it would work nicely with accessibility requirements, because a screen reader would probably read out the excess zeroes. What if we just put in &ensp;? Actually, the en space is not quite the right width, but it is pretty close. See the row above with the asterisk, *. I guess you need a thin space for the full stop — &puncsp; — see row **. I find one looks better in preview, another going live, it’s all a mess, so good luck.

So we can turn the text transparent or use the correct combination of spaces to get something that might not be awful.

 

Bleh.