Zentrieren einer Tabelle in einem TD

Question

Ich habe ein sehr einfaches Problem: Ich muss eine Tabelle in einem TD-Element zentrieren. Wenn ich HTML 4 verwendet haben ich es so tun würde:

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

Aber ich versuche nicht, veraltete Attribute zu verwenden, und tun es die CSS Art und Weise. Ich habe bereits versucht dies:

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

Und:

<td style="margin: 0 auto"> 

Und die Tische hält in der linken Seite der Zelle. Irgendwelche Vorschläge?

Answer 1

Sie hatte die richtige Idee mit margin:auto 0; ausziehen nur die 0.

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

Aber noch wichtiger ist, brauchen Sie wirklich Tabellen verwenden und in-line Styling?

Answer 2

Ihr zweiter Vorschlag ist richtig. 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

Mitte der Tabelle der veralteten align="" Attribut.

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