web-dev-qa-db-fra.com

Centrer un tableau HTML

Sur une page sur laquelle je travaille en ce moment, je n'arrive pas à centrer un tableau avec une image dans la première ligne et deux colonnes de texte en dessous (les deux colonnes ne doivent pas être plus grandes que celles de l'image). width) Voici la page: http://www.puzzles-et-jeux.com/fr/page/minipuzzles.html J'ai passé beaucoup de temps à essayer de résoudre ce problème. Je voudrais le conserver en HTML parce que je dois me précipiter et aussi parce que je dois créer 20 pages du type avec différentes largeurs/+ mises en page pour chaque image.

htmlhtml-tablealignment
48
FabricePMW

Pour votre conception, il est courant d'utiliser des divs plutôt qu'un tableau. De cette façon, votre mise en page sera plus facile à gérer et à modifier grâce à un style approprié. Cela prend un peu de temps pour s'y habituer, mais cela vous aidera beaucoup à long terme et vous en apprendrez beaucoup sur le fonctionnement du style. Cependant, je vais vous fournir une solution au problème actuel.

Dans vos feuilles de style, les marges et le remplissage sont définis sur 0 pixel. Cela remplace votre attribut align="center". Je recommanderais de supprimer ces paramètres de votre CSS car vous ne voulez normalement pas que tous vos éléments soient affectés de cette manière. Si vous savez déjà ce qui se passe dans le CSS et que vous souhaitez le conserver, vous devez alors appliquer un style à votre tableau pour remplacer les ensembles précédents. Vous pouvez soit donner à la table un class, soit insérer le style en ligne avec le code HTML. Voici les deux options:

  1. Avec une classe:

    <table class="centerTable"></table>

Dans votre fichier style.css vous auriez quelque chose comme ceci:

.centerTable { margin: 0px auto; }

  1. En ligne avec votre HTML:

    <table style="margin: 0px auto;"></table>

Si vous décidez d'effacer les marges et les bourrages réglés sur 0px, vous pouvez conserver align="center" sur vos balises <td> pour la colonne que vous souhaitez aligner.

98
Wesley Porter
table
{ 
margin-left: auto;
margin-right: auto;
}

Cela fonctionnera certainement. À votre santé

35
Talha Daniyal

Essaye ça -

<table align="center" style="margin: 0px auto;"></table>
13
Avinash T.