Chemin CSS pour aligner horizontalement la table

Je souhaite afficher une table de largeur fixe au centre de la fenêtre du navigateur. Maintenant, j'utiliseChemin CSS pour aligner horizontalement la table

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

Mais Visual Studio 2008 Avertit sur cette ligne:

Attribut 'align' est considérée comme dépassée. Une construction plus récente est recommandée.

Quel style CSS dois-je appliquer à la table pour obtenir la même mise en page?

Source

2008-11-19 Alexander Prokofyev

Alors, quelle solution avez-vous choisi à la fin? –

169

Steven est juste, dans theory:

la façon "correcte" de centrer une table en utilisant CSS. Les navigateurs conformes doivent centrer les tables si les marges gauche et droite sont égales. La façon d'y parvenir est plus simple pour définir les marges gauche et droite Ainsi, on peut écrire dans une feuille de style « auto. »:

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

Mais l'article mentionné au début de cette réponse vous donne tous les autres moyens de centrer une table.

Une élégante solution multi-navigateur css: Cela fonctionne dans les deux MSIE 6 (Quirks et normes), Mozilla, Opera et même Netscape 4.x sans poser de largeurs explicites:

div.centered 
{ 
    text-align: center; 
} 

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


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

Source

2008-11-19 06:28:04 VonC

Et merci pour le lien de l'article! –

Vous pouvez placer la table au centre avec marge: 0 auto; dans IE6 et plus si vous vous assurez que votre page a une déclaration doctype valide. –

@Marco: Je n'ai pas maintenant cette information, mais cela peut être une bonne base pour une question sur StackOverflow. – VonC

style="text-align:center;"

(je pense)

ou vous pouvez simplement l'ignorer, il fonctionne encore

Source

2008-11-19 06:22:08

Essayez ceci:

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

Source

2008-11-19 06:27:05 jalbert

Cela devrait fonctionner:

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

Source

2008-11-19 06:30:21

Simple. IE6 et ci-dessus seront heureux de centrer votre table avec "marge: 0 auto;" si seulement la page rend en mode "standards". Pour cela, vous devez arriver une déclaration DOCTYPE valide, tel que

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

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

vrai, IE5.5 et ci-dessous va encore refuser de centrer la table, mais peut-être vous pouvez vivre avec ça, surtout si la page est toujours fonctionnelle avec la table alignée à gauche. Je pense que maintenant les utilisateurs de IE5.5 et ci-dessous sont assez habitués à certains sites Web bizarres - mais vous devez toujours vous assurer que ces problèmes graphiques ne rendent pas votre site inutilisable.

Bonne codification!

EDIT: Désolé, je devrais peut-être souligner que vous n'avez pas besoin d'un doctype "strict" pour obtenir IE6 et passer en mode de rendu "standards". Je me suis rendu compte que ça pouvait sembler comme ça à partir des exemples de doctype que j'ai posté ci-dessus.Par exemple, cette déclaration DOCTYPE bien sûr travailler aussi:

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

Source

2008-11-19 21:05:22

Je suis en train d'apprendre cela et ce qui a finalement fonctionné pour moi était d'abord une table avec trois lignes. Définissez la marge pour les lignes gauche et droite à 50%. Ensuite, placez une rangée de largeur fixe à l'intérieur des «données de la table» de la «rangée de table» centrale.

Source

2009-10-02 02:36:49

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

<table class="abc"> 
    <tr> 
     <td>Item1</td> 
     <td>Item2</td> 
    </tr> 
</table>

Source

2013-12-19 09:50:24

Bien que cela puisse être une hérésie dans le monde d'aujourd'hui - dans le passé, vous utiliseriez le code non-CSS suivant. Cela fonctionne dans tout jusques et y compris les navigateurs d'aujourd'hui, mais - comme je l'ai dit - il est une hérésie dans le monde d'aujourd'hui:

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

Qu'est-ce que vous avez besoin est une façon de dire que vous voulez centrer une table et la personne est en utilisant un navigateur plus ancien. Ensuite, insérez les commandes "< center>" autour de la table. Sinon, utilisez css.

Étonnamment - si vous voulez tout centrer dans la zone du corps - vous ne pouvez utiliser la norme

text-align: center;

commande css et IE8 (au moins), il centre tout sur la page, y compris les tables.

Source

2015-11-22 19:57:47

Chemin CSS pour aligner horizontalement la table

Répondre

Questions connexes