Align Decimal Data in table column by decimal point, HTML5, CSS3

Question

I am building a wordpress plugin which is generating an HTML table and sending to gravityforms html block via shortcode.

My problem is that cell contents can contain:

• 23.24
• 1,234.665
• 123.4

etc...

Notice the differing number of decimal places.

Is there a non-hack & best practice way of aligning this column data by decimal point? In this case, Aligning right will not work.

Inserting 0s is not acceptable because this indicates a degree of accuracy which is not there.

As you can see, I have attempted to use align="char" char="." inside the td elements with no luck.

Any help anybody can help with this would be much appreciated.

Many thanks.

Is there a way of using printf("%8.3f",d1) or similar without actually printing to the screen? e.g. structuring the variable d1 for later use but not actually printing it?

Answer 1

There is no direct way to do this. HTML 4.01 has align=char, but without any browser support. CSS 2.0 had a counterpart, using the text-align property, with equal lack of support, so it was dropped from CSS 2.1. CSS3 drafts have a nice system for such alignment, but indicated as being in danger of being cut from the spec if there are no (correct) implementations.

As a workaround, you could right-pad the values with something invisible (blank) so that when the values aligned to the right, the decimal markers get aligned. There are several ways to try to achieve this:

1) Use digit 0 but set a style on it, making it invisible, e.g.

123.4<span class=s>00</span>

with

.s { visibility: hidden; }

2) Use FIGURE SPACE U+2007, defined to have the same width as digits (when digits are of equal width), e.g.

123.4  

For this to work, you need to set the font so that it contains U+2007. According to http://www.fileformat.info/info/unicode/char/2007/fontsupport.htm even Arial contains it, but I’m afraid this might not apply to old versions of Arial still in use.

3) Use a no-break space and set its width to the desired number of digits, using the ch unit (define to have the width of digit 0), though this unit is relatively new and not supported by old browsers. Example:

123.4<span class=d2>&nbsp;</span>

with

.d2 { width: 2ch; display: inline-block; }

I would probably use the first method. As a matter of principle, it has the drawback that when CSS is off, the data contains zeroes, which imply wrong information about accuracy, whereas in other methods, switching CSS off “only” messes up the layout.

(It’s probably obvious that digits must be of equal advance width, so that you can align numeric data at all. This just means that the font used for the values must have that property. Most fonts will do in this respect, but e.g. Georgia, Constantia, and Corbel won’t.)

Answer 2

I wrote a jQuery plugin that solves this. It's found here: https://github.com/ndp/align-column

Using your raw HTML table, it will align a column by decimal points:

$('table').alignColumn(3);

It does this by adding another column, but does its best to not corrupt the other spacing. There's also a reference to a different solution on the Github page.

Answer 3

Would it be acceptable to put the value into two columns?

Use sprintf() to convert the value into a string, and then put the bits up to the decimal point in the left column (but right aligned), and the decimal places in the second column.

See http://jsfiddle.net/alnitak/p4BhB/, but ignore the JS bit...

Answer 4

The thing is, you've gotta ensure that they all have the same number of digits after the decimal.

Once you do that, use text-align. All it will take is a: style='text-align: right'

Better still, you could use a css class instead of inline styles. Your markup would look like this:

 <tr><td>Item 1</td><td>15</td><td class='price'>&pound;123.25</td></tr>

Then in your stylesheet:

td.price{
  text-align: right;
}

With php, you can format a number as a string with number_format. You don't have to echo it or print it, just wrap your variable in that function. For example:

$table .= "<td class='price'>&pound;" . $price . "</td></tr>";

becomes:

$table .= "<td class='price'>&pound;" . number_format($price,3) . "</td></tr>";

Answer 5

It might be overkill but I needed the same thing and just solved with a length of the output and adding whitespace based on that length.

I.e.:

if (strlen($meal_retail) == 5) {
echo "    ";
}
else (strlen($meal_retail) == 6) {
    echo "  ";
}

This lined up my decimals correctly with a bit of extra doing, and i'm sure an array could clean the above code up even nicer.

Additionally, i've been conforming my numbers adjusting with:

echo money_format('%i',$meal_retail)  (makes it a two decimal money number)

Just wanted to provide my solution as I was looking at this page before coming up with my own resolution.

Answer 6

this is my solution, hope it help!!

<style type="text/css">
td{
    font-family: arial;
}
.f{
    width: 10px;
    color: white;
    -moz-user-select: none;
}
</style>

<table>
<tr><td><span class="f">00</span>1.1<span class="f">00</span></td></tr>
<tr><td><span class="f">0</span>12.34<span class="f">0</span></td></tr>
<tr><td>123.456</td></tr>
</table>

with this, you can't see the zeros and can't select them!

Answer 7

I have used javascript for this, I hope this will help.......

</tr>
</table>

</body>
for(var i=0; i<numarray.length; i++){
    var n = numarray[i].toString();
  var res= n.split(".");
  n = res[0];

  if(highetlen < n.length){
    highetlen = n.length;
  }

}

for(var j=0; j<numarray.length; j++){
    var s = numarray[j].toString();
  var res= s.split(".");
  s = res[0];

    if(highetlen > s.length){
  var finallevel = highetlen - s.length;

  var finalhigh = "";
  for(k=0;k<finallevel;k++){
  finalhigh = finalhigh+ '&#160; ';
  }
    numarray[j] = finalhigh + numarray[j];
  }
  var nadiss = document.getElementById("nadis");
  nadiss.innerHTML += "<tr><td>" + numarray[j] + "</td></tr>";
}