1

I have a table and I need to format the currency in order for the . to be displayed always under each other.

This is the table:

<table class="data" cellspacing="0" cellpadding="5" border="0">
    <thead>
    <tr>
        <th>Date</th>
        <th>Description</th>
        <th>Field1</th>
        <th>Field2</th>
        <th>Balance</th>
    </tr>
    </thead>
    <tbody>
    <tr class="verticalDivider"></tr>
    <tr>
        <td>08 April 2010</td>
        <td>value 1</td>
        <td>GBP 20.00</td>
        <td>&nbsp;</td>
        <td>GBP 20.00</td>
    </tr>
    <tr>
        <td>08 May 2010</td>
        <td>value 2</td>
        <td>GBP 100.00</td>
        <td>&nbsp;</td>
        <td>GBP 1020.00</td>
    </tr>
    <tr>
        <td>19 May 2010</td>
        <td>value 3</td>
        <td>&nbsp;</td>
        <td>GBP 50.00</td>
        <td>GBP 970.00</td>
    </tr>
    </tbody>
</table>

How can I achieve this?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
seedg
  • 21,692
  • 10
  • 42
  • 59

4 Answers4

2

assuming you'll always print 2 decimal digits, I would define all my table <col /> then I'd assign text-align : right to that cols that contain prices (and padding-right to create space from border)

otherwise as specified in http://www.w3.org/TR/html401/struct/tables.html#h-11.3.2 you could assign align="char" char="." to table cols (if you browser support it)

2

How does this look?

<style type="text/css">
    .price {
        text-align: right;
    }
</style>

<table class="data" cellspacing="0" cellpadding="5" border="0">
    <thead>
    <tr>
        <th>Date</th>
        <th>Description</th>
        <th>Field1</th>
        <th>Field2</th>
        <th>Balance</th>
    </tr>
    </thead>
    <tbody>
    <tr class="verticalDivider"></tr>
    <tr>
        <td>08 April 2010</td>
        <td>value 1</td>
        <td class="price">GBP 20.00</td>
        <td>&nbsp;</td>
        <td class="price">GBP 20.00</td>
    </tr>
    <tr>
        <td>08 May 2010</td>
        <td>value 2</td>
        <td class="price">GBP 100.00</td>
        <td>&nbsp;</td>
        <td class="price">GBP 1020.00</td>
    </tr>
    <tr>
        <td>19 May 2010</td>
        <td>value 3</td>
        <td>&nbsp;</td>
        <td class="price">GBP 50.00</td>
        <td class="price">GBP 970.00</td>
    </tr>
    </tbody>
</table>
gevorg
  • 4,835
  • 4
  • 35
  • 52
Roger
  • 70
  • 8
  • obviously i would place the css at the top in a seperate stylesheet. – Roger Nov 16 '10 at 16:14
  • what I needed was to align the word GBP under each other and the decimals under each other as well. I managed to this using nested tables but it was not worth it so I used the align right instead. – seedg Nov 16 '10 at 16:44
1

To have the currency symbol (GBP) AND the dots aligned you can do the following (tested on Chrome and Firefox, breaks on IE):

CSS file:

...
td.money {
    text-align: right;
}

.currencySymbol {
    float: left;
}
...

And your table cell would look like:

<td class="money">
    <div class="currencySymbol">GBP</div>
    970.00
</td>

Although it's dangerous (probably the reason why it breaks on IE), see: Is a DIV inside a TD a bad idea?

Community
  • 1
  • 1
Sergio
  • 671
  • 5
  • 10
0
 <td align="right">GBP 20.00</td>
 <td align="right">GBP 100.00</td>
 <td align="right">&nbsp;</td>

I Guess thats what you are looking for as long as thee is ".00". If I were you, I would start using css even for this bit of code where you need to edit 3 places instead of one.

loxxy
  • 12,990
  • 2
  • 25
  • 56