Centrare una tabella all'interno di un TD

Question

Ho un problema molto semplice: ho bisogno di centrare una tabella all'interno di un elemento TD. Se dovessi usare HTML 4 lo farei in questo modo:

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

Ma sto cercando di non utilizzare gli attributi deprecato e farlo nel modo CSS. Ho già provato questo:

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

E questo:

<td style="margin: 0 auto"> 

E le tabelle tiene nel lato sinistro della cella. Eventuali suggerimenti?

Answer 1

Hai avuto l'idea giusta con margin:auto 0; appena decollare l'esempio 0.

di lavoro: 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>​ 

Ma, ancora più importante, non si ha realmente bisogno di utilizzare le tabelle e in-line messa in piega?

Answer 2

Il tuo suggerimento per il secondo è corretto. 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; 
} 
​ 

Answer 3

Centro tabella utilizzando l'attributo di align="" deprecato.

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