web-dev-qa-db-fra.com

Centrer une table dans un TD

J'ai un problème très simple: je dois centrer une table à l'intérieur d'un élément TD. Si j'utilisais HTML 4, je le ferais comme ceci:

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

Mais j'essaie de ne pas utiliser d'attributs obsolètes et de le faire à la manière CSS. J'ai déjà essayé ceci:

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

Et ça:

<td style="margin: 0 auto">

Et les tables restent dans le côté gauche de la cellule. Aucune suggestion?

htmlcsshtml-tablealignment
20
Carlos Gavidia-Calderon

Vous avez eu la bonne idée avec margin:auto 0; il suffit de décoller le 0.

Exemple de travail: 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>​

Mais, plus important encore, avez-vous vraiment besoin d'utiliser des tableaux et un style en ligne?

28
Elliot B.

Votre suggestion de deuxième connexion est correcte. Voir cet exemple de travail .

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;
}
​
1
Paul Fleming

Centrez la table à l'aide de l'attribut align="" Obsolète.

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