Center a Table inside a TD

Question

I have a very simple problem: I need to center a table inside a TD element. If I were using HTML 4 I'd do it like this:

​<table style="border:solid;width: 100%">
    <tr>
        <td align="center">
            <table style="border:solid; width:50%">
                <tr>
                    <td >I must be in the center</td>                    
                </tr>
            </table> 
        </td>                    
    </tr>
</table>​

But I'm trying not to use deprecated attributes and do it the CSS way. I already tried this:

<td style="text-align:center">

And this:

<td style="margin: 0 auto">

And the tables keeps in the left-side of the cell. Any suggestions?

Solution 1

You had the right idea with margin:auto 0; just take off the 0.

Working example: http://jsfiddle.net/cxnR8/

<table style="border:solid;width: 100%">
    <tr>
        <td>
            <table style="margin:auto;border:solid; width:50%">
                <tr>
                    <td >I must be in the center</td>                    
                </tr>
            </table> 
        </td>                    
    </tr>
</table>​

But, more importantly, do you really need to use tables and in-line styling?

Solution 2

Your seccond suggestion is correct. See this working example.

HTML:

<table class="outer">
    <tr>
        <td>
            <table class="inner">
                <tr>
                    <td>in the middle</td>                    
                </tr>
            </table> 
        </td>                    
    </tr>
</table>​

CSS:

.outer
{
    width: 100%;
    border: solid 1px red;
}
.inner
{
    width: 25%;
    margin: auto;
    border: solid 1px blue;
}
​

Solution 3

Center the table using the deprecated align="" attribute.

<table>
    <tr>
        <td>
            <table align="center">
                <tr>
                    <td>in the middle</td>                    
                </tr>
            </table> 
        </td>                    
    </tr>
</table>​