Search code examples
htmlcssalignmenthtml-table

Html Table alignment right


--------------------------------
| 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/