Align decimal data in a table column to a decimal point, HTML5, CSS3

Question

I am creating a wordpress plugin that generates an HTML table and sends gravityforms to the html block via short code.

My problem is that the contents of the cells may contain:

• 23.24
• 1,234.665
• 123,4

etc...

Note the different number of decimal places.

Is there a way to non-hack and best practice aligning column data to a decimal point? In this case, the alignment right will not work.

Box 0s is not acceptable as it indicates a degree of accuracy that is not.

As you can see, I tried using align="char" char="." inside td elements with no luck.

Any help that could help with this would be greatly appreciated.

Many thanks.

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

Answer 1

There is no direct way to do this. HTML 4.01 has align=char , but without browser support. CSS 2.0 had an analogue using the text-align property with the same lack of support, so it was excluded from CSS 2.1. CSS3 templates have a good system for such alignment, but indicate that they can be cut from the specification if there are no (correct) implementations.

As a workaround, you can edit values ​​with something invisible (empty) so that when the values ​​are aligned to the right, the decimal markers are aligned. There are several ways to achieve this:

1) Use the number 0, but set the style on it, making it invisible, for example

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

from

 .s { visibility: hidden; } 

2) Use FIGURE SPACE U + 2007, which have the same width as the numbers (when the numbers have the same width), e.g.

 123.4   

To do this, 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 that it might not relate to older versions of Arial that are still in use.

3) Use the free space and set its width to the desired number of digits using the ch block (specify the width of the digit 0), although this device is relatively new and is not supported by older browsers. Example:

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

from

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

I would probably use the first method. Basically, the disadvantage is that when CSS is disabled, the data contains zeros, which implies incorrect accuracy information, while in other methods switching CSS only “spoils” the layout.

(It is probably obvious that the numbers should have the same width so that you can align the numerical data at all. This means that the font used for the values ​​must have this property. Most fonts will do in this regard, but for example, Georgia, Constance and Corbel will not.)

Answer 2

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

Using your raw HTML table, it aligns the column with a decimal point:

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

He does this by adding another column, but does everything possible so as not to damage another interval. There's also a link to another solution on the Github page.

Answer 3

Would it be acceptable to put a value in two columns?

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

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

Answer 4

The fact is that you must ensure that they all have the same number of digits after the decimal.

Once you do this, use text-align . All that is needed is: style='text-align: right'

Even better, you can use the css class instead of inline styles. Your markup will 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 the number as a string with number_format . You do not need to echo or print it, just wrap your variable in this function. For instance:

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

becomes:

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

Answer 5

It may be too much, but I need the same thing and just solve with the output length and add spaces based on that length.

Ie:

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

This alignment of my decimal places is correct with a few extra steps, and I'm sure the array could clear the code above even better.

In addition, I matched my settings:

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

Just wanted to provide my solution when I looked at this page before coming up with my own permission.

Answer 6

this is my solution, hope it helps!

 <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 cannot see zeros and cannot select them!

Answer 7

I used javascript for this, hope this helps .......

 </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>"; }