Manière CSS d'aligner horizontalement le tableau

StackOverflow https://stackoverflow.com/questions/301147

Question

Je souhaite afficher un tableau de largeur fixe au centre de la fenêtre du navigateur. Maintenant j'utilise 

<table width="200" align="center">

Mais Visual Studio 2008 donne un avertissement sur cette ligne:

L'attribut 'align' est considéré comme obsolète. Une nouvelle construction est recommandée.

Quel style CSS dois-je appliquer à la table pour obtenir la même présentation?

Était-ce utile?

La solution

Steven a raison, en théorie :

  

le & # 8220; corriger & # 8221; moyen de centrer une table en utilisant CSS. Les navigateurs conformes doivent centrer les tables si les marges gauche et droite sont égales. La méthode la plus simple consiste à définir les marges gauche et droite sur & # 8220; auto. & # 8221; Ainsi, on pourrait écrire dans une feuille de style: 

table
{ 
    margin-left: auto;
    margin-right: auto;
}

Mais l'article mentionné au début de cette réponse vous indique tout le contraire pour centrer un tableau.

  

Une élégante solution multi-navigateurs css:   Cela fonctionne à la fois dans MSIE 6 (Quirks and Standards), Mozilla, Opera et même dans Netscape 4.x sans définir de largeur explicite: 

div.centered 
{
    text-align: center;
}

div.centered table 
{
    margin: 0 auto; 
    text-align: left;
}


<div class="centered">
    <table>
    …
    </table>
</div>

Autres conseils

Essayez ceci: 

<table width="200" style="margin-left:auto;margin-right:auto">

Simple. IE6 et les versions supérieures centreront votre table avec & Quot; marge: 0 auto; & Quot; si seule la page est rendue en " standards " mode. Pour ce faire, vous avez besoin d’une déclaration de type de type valide, telle que

. 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

ou 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Certes, IE5.5 et inférieur refusera toujours de centrer le tableau, mais vous pourrez peut-être vivre avec cela, surtout si la page est toujours fonctionnelle avec le tableau aligné à gauche. Je pense qu'actuellement, les utilisateurs d'IE5.5 et des versions antérieures sont assez habitués à certains sites Web bizarres, mais vous devez néanmoins vous assurer que ces défauts visuels ne rendent pas votre site inutilisable.

Joyeux codage!

EDIT: Désolé, je devrais peut-être préciser qu'il n'est pas nécessaire d'avoir un " strict " doctype pour obtenir IE6 et supérieur dans " standards " mode de rendu. J'ai réalisé que cela pouvait sembler être le cas d'après les exemples de doctype que j'ai postés ci-dessus. Par exemple, cette déclaration de type de document fonctionnera évidemment de la même manière: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Bien que cela puisse être une hérésie dans le monde d’aujourd’hui, par le passé, vous utilisiez le code non CSS suivant. Cela fonctionne dans tous les domaines, y compris les navigateurs actuels, mais, comme je l'ai dit, c'est une hérésie dans le monde d'aujourd'hui: 

<center>
<table>
   ...
</table>
</center>

Ce dont vous avez besoin est un moyen de dire que vous voulez centrer une table et que la personne utilise un navigateur plus ancien. Puis insérez le & Quot; & Lt; center & Gt; & Quot; commandes autour de la table. Sinon, utilisez css.

Étonnamment - si vous voulez tout centrer dans la zone BODY - vous pouvez simplement utiliser la norme 

text-align: center;

Commande css et dans IE8 (au moins), tout ce qui est centré sur la page, y compris les tableaux, sera centré. 

style="text-align:center;"

(je pense)

ou vous pouvez simplement l'ignorer, cela fonctionne toujours

Cela devrait fonctionner: 

<div style="text-align:center;">
  <table style="margin: 0 auto;">
    <!-- table markup here. -->
  </table>
</div>

J'apprends cela et ce qui a finalement fonctionné pour moi a été de créer un tableau avec trois rangées. Définissez la marge des rangées gauche et droite sur 50%. Ensuite, placez une table de largeur fixe et à rangée unique à l'intérieur de la & Quot; donnée de la table & Quot; du centre & "; rangée de la table &"; 

<style>
    .abc {
        text-align: center;
    }
</style>

<table class="abc">
    <tr>
        <td>Item1</td>
        <td>Item2</td>
    </tr>
</table>
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top