Méthode CSS pour aligner le tableau horizontalement

96

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 au tableau pour obtenir la même mise en page?

— Alexandre Prokofyev
source

2

Alors, quelle solution avez-vous choisie au final?

— Ola Tuvesson

183

Steven a raison, en théorie :

la manière «correcte» de centrer un tableau en utilisant CSS. Les navigateurs conformes doivent centrer les tableaux si les marges gauche et droite sont égales. Le moyen le plus simple d'y parvenir consiste à 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 une table.

Une élégante solution multi-navigateurs css: Cela fonctionne à la fois dans MSIE 6 (Quirks and Standards), Mozilla, Opera et même 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>

— VonC
source

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

— Ola Tuvesson

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

— VonC

1

tu as parfaitement raison. TABLE n'a pas besoin de spécifier une largeur pour être centré horizontalement. Je l'ai testé. Whilest DIV a besoin d'une largeur à spécifier pour obtenir un centrage horizontal.

— Marco Demaio

17

Essaye ça:

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

— Jalbert
source

2

Facile. IE6 et les versions ultérieures centreront volontiers votre table avec "margin: 0 auto;" si seule la page est rendue en mode "standards". Pour ce faire, vous avez besoin 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 les versions antérieures refuseront 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 que maintenant, les utilisateurs d'IE5.5 et des versions antérieures sont assez habitués à certains sites Web étranges - mais vous devez toujours vous assurer que ces problèmes visuels ne rendent pas votre site inutilisable.

Bon codage!

EDIT: Désolé, je devrais peut-être souligner que vous n'avez pas besoin d'avoir un doctype "strict" pour obtenir IE6 et plus en mode de rendu "standard". J'ai réalisé que cela pouvait ressembler à cela d'après les exemples de doctype que j'ai postés ci-dessus. Par exemple, cette déclaration doctype fonctionnera bien sûr 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">

— Ola Tuvesson
source

2

Bien que cela puisse être une hérésie dans le monde d'aujourd'hui - dans le passé, vous utilisiez le code non css suivant. Cela fonctionne dans tout, jusqu'aux navigateurs d'aujourd'hui, 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, c'est d'un moyen de dire que vous souhaitez centrer une table et que la personne utilise un navigateur plus ancien. Insérez ensuite les commandes "<center>" autour de la table. Sinon, utilisez css.

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

text-align: center;

css et dans IE8 (au moins), il centrera tout sur la page, y compris les tableaux.

— Mark Manning
source

0

style="text-align:center;"

(je pense)

ou vous pouvez simplement l'ignorer, cela fonctionne toujours

— Steven A. Lowe
source

0

Cela devrait fonctionner:

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

— Matt Howell
source

0

J'apprends juste cela et ce qui a finalement fonctionné pour moi a été de créer d'abord un tableau avec trois rangées. Définissez la marge des lignes gauche et droite sur 50%. Ensuite, placez une seule ligne, tableau de largeur fixe à l'intérieur des «données de table» de la «ligne de table» centrale.

0

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

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

— Chandra Shekhar Sharma
source

0

Fondamentalement, cela fonctionne comme,

<table align="center">
...

Mais 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 plus, si vous avez besoin d'afficher uniquement un tableau sur une page, vous pouvez utiliser l'alignement des balises de corps uniquement comme indiqué ci-dessous,

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

Si vous souhaitez d'autres suggestions, veuillez me le faire savoir. Vous aidera sûrement à ce sujet. En utilisant également les fonctionnalités de bootstrap, ce serait plus facile et interactif.

— Gourav Goutam
source

0

Ajoutez au style div:

width: fit-content;

— Khaled Mohab
source