Html Table alignment right

Question

--------------------------------
| item a                 item b |
| item c         item d  item e |

---------------------------------
| item a         item b          |
| item c         item d  item e  |

I have two rows in a table, and I'd like them to each have a left aligned item, and some right aligned items, like in the first example above.

However, when I set item b, item d, and item e to align="right", I get the behavior of the second example above. Why is item b lining up with item d and not right?

Edit: Jsfiddle

Solution

You had some incorrect syntax. You were using style="align-right" when I believe you meant style="text-align:right;". You also need to add a colspan="2" to the <td> which needs to span 2 columns - aka the "item b" cell:

<table width="500px">
    <tr>
        <td>
            item a
        </td>
        <td style="text-align:right;" colspan="2">
            item b
        </td>
    </tr>
    <tr>
        <td>
            item c
        </td>
        <td style="text-align:right;">
            item d
        </td>
        <td style="text-align:right;">
            item e
        </td>
    </tr>
</table>

http://jsfiddle.net/A5LDZ/2/

Comments

[emboss]

+1 Yes, the colspan solution is even better, saving some text there.

[xdumaine]

Ha! Thanks, I did have that syntax error in my jsfiddle. I just put that together quickly for the question, and didn't have that error in my original code. I was trying to use the td property align and not style. so, instead of style="text-align:right", I originally had align="right" but it was the colspan that did the trick, in either case.