Decimal Alignment

HTML & CSS
1

Is there a way to align values in a table column by the decimal place?

2

Could you give an image example? Can’t picture it in my head.

3

So long as you have the same number of decimal places after the point, and you right-align, everything should line up nicely, shouldn’t it?

2 Likes
4

If the number of places after the decimal point vary then the only way to do it would be to split the value into two and put it in two columns. The integer part right aligned in the first column and the decimal part left aligned in the second column.

5

Column 1 has labels and is right aligned.
Column 2 contains names.
Column 3 and 4 have $$$ values in them.

Right now I have Columns 3 and 4 right-aligned, but that only works if each value has the same number of decimal places

6

You’ll need either felgalls recommendation or Javascript. I recommend the separate cell.

7

The other option, assuming you’re pulling the numbers out of a database, is to use a function like PHP’s round() function to ensure a consistent number of decimal places - http://php.net/manual/en/function.round.php

You might also look at number_format()

8

So with exactly two decimal places there is no alignment problem with these columns. So which column has the example data you posted that doesn’t match your description of the content of any of the columns.

9

Yes, I know how to do that.

I was oping there was something built in for cases where you want different precision between numbers.

(You would think this would have been added/fixed for 2015 where data is king!)

10

In this example, I can get away with right alignment, but since I have been getting so much help learning how to make tables look nice, I figured I’d ask about the decimal alignment for cases where you have varying number precision, and need them aligned by decimal.

11 
<td class="right">100</td><td class="left">.23</td>
<td class="right">495</td><td class="left">.75</td>
<td class="right">1,000</td><td class="left">.1</td>
<td class="right">999</td><td class="left">.999</td>
<td class="right">5,288</td><td class="left">.0</td>
<td class="right">61</td><td class="left">.90</td>

with

.left {text-align:left;}
.right {text-align:right}

and border-collapse:collapse; on the table so that the two columns don’t have any gap in the middle of the numbers

1 Like
13

Shame HTML and CSS don’t have a built-in way to do this.

Thanks for the code.

:thumbsup:

14

A PHP Solution:

function splitNumber($x, &$integer, &$mantissa)
{
  $integer  = $x; // default
  $mantissa = '';	// default
  if( strpos($x, '.') ) {
     $integer	= strstr($x, '.', true);
     $mantissa = strstr($x, '.', false);
  }
}//

$xs = array
(
  '100.23', '495.75', '1000.1', '999.999', '5,280.0', '61.90', 
  'more tests', 
  '42', '-42', '#22', 'no:42',
);

echo '<table style="border:solid 1px #ccc;">';
   echo '<tr><th> Number </th> <th>Mantissa</th> </tr>';

   foreach($xs as $x) {
      splitNumber($x, $integerByRef, $mantissaByRef);
      echo '<tr>' 
              .' <td style="text-align:right;">'
              .     $integerByRef
	     .  '</td><td>'
	     .      $mantissaByRef 
	.      '</td>'
	.'</tr>';	
   }#foreach
   echo '</table>';

I am intrigued as to why all the numbers are formatted as strings?

15

What do you mean?

16

The values supplied are strings, “5,280.0” is a string and not a number because of the comma.

If the values are hard-coded as strings then @felgall’s solution is fine? Problems arise if the values are numerical.

17

For this particular case, I hard-coded values into the HTML table.

My question applies to any scenario, however.

Normally I would have values in MySQL and use PHP to format and display them.

1 Like
18

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.