18

I have a table with 2 <tr> and 2 <td>:

<table>
    <tr>
        <td>
            <table>
                <!-- other content -->
            </table>
        </td>
        <td/>
    </tr>
    <tr>
        <td/><td/>
    </tr>
</table>

Where the ***** is I need to insert pretty much the same table (which does not contain another table). but when I debug it the table is left aligned.

Live Example

I want that the table in the upper left box is right aligned (for knowledge: and center aligned).

For example: The table within is 32px width but the containing td is 64px width.

How can I align the table to the right?

Improve this question
1
  • He wanted to know about aligning the table, not something within a table
    – LostPhysx
    Commented Nov 14, 2012 at 11:54

3 Answers 3

Reset to default
28

A table is a block-element; text-align and align only works on inline-elements. So for a block-element you have to use margin:

CSS:

.centered{
    margin: 0 auto;
}

.rightaligned{
    margin-right: 0;
    margin-left: auto;
}

.leftaligned{
    margin-left: 0;
    margin-right: auto;
}

HTML:

<td>
    <table class="leftaligned">
        <!-- Other Content -->
    </table>
    <table class="centered">
        <!-- Other Content -->
    </table>
    <table class="rightaligned">
        <!-- Other Content -->
    </table>
</td>

This will work in almost every browser, even Internet Explorer 7.

Improve this answer
2
  • 1
    Yes, text-align only works on inline elements, but td align attribute works on block elements too.
    – CITBL
    Commented May 16, 2015 at 9:31
  • Visual Studio says: "Element 'align' is obsolte or nonstandard.
    – Kim Homann
    Commented Mar 21, 2018 at 16:11
3

Only the following comes to mind:

<table>
    <tr>
        <td style="text-align: right"></td>
        <td/>
    </tr>
    <tr>
        <td/><td/>
    </tr>
</table>

Or another css approach:

table table {
    float: right;
}

or inline with float: 

<table>
    <tr>
        <td>
            <table style="float: right;">.....</table>
        </td>
        <td/>
    </tr>
    <tr>
        <td/><td/>
    </tr>
</table>
Improve this answer
2
  • What's wrong with float? Should work everywhere - is this what you are after: jsbin.com/evemoy/1/edit?
    – CherryFlavourPez
    Commented Nov 13, 2012 at 15:43
  • @damien : a table is a blcok-element imstead of an inline-element like a text or picture. in fact blockelements only can be placed and aligned with the margin property.
    – LostPhysx
    Commented Nov 15, 2012 at 21:21
0

In case the td only contains table and no other text or element then below code should also work, only thing it will right align everything in the td and won't work in html5:

<table>
    <tr>
        <td align="right">*</td>
        <td/>
    </tr>
    <tr>
        <td/><td/>
    </tr>
</table>
Improve this answer