web-dev-qa-db-fra.com

Manière CSS d'aligner horizontalement le tableau

Je veux montrer une table 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 devrais-je appliquer à la table pour obtenir la même présentation?

htmlcssalignmentcss-tables
92
Alexander Prokofyev

Steven a raison, dans théorie :

la manière “correcte” de centrer une table en utilisant CSS. Les navigateurs conformes doivent centrer les tables si les marges gauche et droite sont égales. Le moyen le plus simple d'y parvenir est de définir les marges gauche et droite sur "auto". 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 donne tout le contraire pour centrer un tableau.

Une élégante solution css multi-navigateurs: elle 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>
180
VonC

Essaye ça:

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

Facile. IE6 et les versions supérieures centreront votre table avec joie avec "margin: 0 auto;" si seule la page s'affiche en mode "normes". Pour ce faire, vous devez disposer d’une déclaration doctype 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 tout de même vous assurer que ces problèmes visuels ne rendent pas votre site inutilisable.

Bonne codage!

EDIT: Désolé, je devrais peut-être préciser qu'il n'est pas nécessaire d'avoir un doctype "strict" pour que IE6 et les versions supérieures passent en mode de rendu "standard". J'ai réalisé que cela pouvait sembler être le cas d'après les exemples de doctype que j'ai affichés ci-dessus. Par exemple, cette déclaration de doctype fonctionnera bien sûr également:

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

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 qu'il vous faut, c'est un moyen de dire que vous voulez centrer une table et que la personne utilise un navigateur plus ancien. Ensuite, insérez les commandes "<centre>" 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é.

2
Mark Manning
style="text-align:center;"

(je pense)

ou vous pouvez simplement l'ignorer, cela fonctionne toujours

0
Steven A. Lowe

Cela devrait fonctionner:

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

<table class="abc">
    <tr>
        <td>Item1</td>
        <td>Item2</td>
    </tr>
</table>
0
Chandra Shekhar Sharma

J'apprends cela et ce qui a finalement fonctionné pour moi a été de créer un tableau à trois rangées. Définissez la marge des rangées gauche et droite sur 50%. Ensuite, placez une table de largeur fixe à rangée unique dans les "données de table" de la "ligne de tableau" centrale.

0
sean

En gros, ça marche comme,

<table align="center">
...

Cependant, vous pouvez le faire mieux en utilisant CSS, et ce sera une meilleure approche pour utiliser CSS, car il fournit un comportement dynamique à une page Web et est réactif.

  <table style="text-align:center;">

De même, si vous ne devez afficher que des tableaux sur une page, vous pouvez utiliser l’alignement des balises body uniquement comme indiqué ci-dessous.

 <body style="text-align:center;">
<table>
  ...
</table>

Si vous voulez d'autres suggestions s'il vous plaît faites le moi savoir. Va sûrement vous aider sur ce point. Également en utilisant bootstrap seraient plus faciles et plus interactives.

0
Gourav Goutam

Ajouter au style div:

width: fit-content;
0
Khaled Mohab