Wyśrodkuj tabelę wewnątrz TD

Question

Mam bardzo prosty problem: muszę wyśrodkować tabelę wewnątrz elementu TD. Gdybym użyciu HTML 4 zrobiłbym to tak:

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

Ale staram się nie używać nieaktualnych atrybutów i zrobić to tak, CSS. Ja już próbowałem:

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

I tak:

<td style="margin: 0 auto"> 

i stoły trzyma w lewej strony komórki. Jakieś sugestie?

Answer 1

Miałeś dobry pomysł z margin:auto 0; tylko zdjąć przykład 0.

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

Ale, co ważniejsze, czy naprawdę trzeba używać tabel i in-line stylizacja?

Answer 2

Twoja druga sugestia jest poprawna. 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

Centrum tabela użyciu przestarzałej align="" atrybut.

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