CODEWITHSUNDEEP
htmlcsshtml-tablealignment
user1821159
user1821159

Reputation:

How to align a table within a TD?

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?

Upvotes: 18

Views: 25159

Answers (3)

LostPhysx
LostPhysx

Reputation: 3641

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.

Upvotes: 29

Damien Overeem
Damien Overeem

Reputation: 4529

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>

Upvotes: 3

000
000

Reputation: 3950

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>

Upvotes: 0

Related Questions