title: Aligning decimal points in HTML
body: <p>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.</p>
  
  <p>I have two possible solutions at the moment but I'm hoping for something better...</p>
  
  <p>Solution 1: Split the numbers within the HTML, e.g.</p>
  
  <pre><code>&lt;td&gt;&lt;div&gt;1234&lt;/div&gt;&lt;div class='dp'&gt;.5&lt;/div&gt;&lt;/td&gt;
  </code></pre>
  
  <p>with</p>
  
  <pre><code>.dp { width: 3em; }
  </code></pre>
  
  <p>(Yes, this solution doesn't quite work as-is.  The concept is, however, valid.)</p>
  
  <p>Solution 2: I found mention of</p>
  
  <pre><code>&lt;col align="char" char="."&gt;
  </code></pre>
  
  <p>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).</p>
  
  <p>Thus, anyone have a better idea?</p>