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

Answer 1

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:

 Item 115£123.25

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 .= "£" . $price . "";

becomes:

$table .= "£" . number_format($price,3) . "";