Centrer un tableau avec css

Bonjour,

Je n'arrive pas à centrer un tableau.

Voici la partie php (page html dynamique):

$contenu.='<table class="tab">';
$contenu.='<tr>';
$contenu.='<td><img id="photo_1" src="images/PE_2008/sautoir_pervenches1.png" alt="Photos du sautoir pervenche"></td>';
$contenu.='<td><img id="photo_2" src="images/Homme_2006/chapelet_cristal.png" alt="Photos du sautoir pervenche"></td>';
$contenu.='</tr>';
$contenu.='<tr>';
$contenu.='<th><a class="survol1_lien" href="">'.$tr_femme. '</a></th>';
$contenu.='<th><a class="survol1_lien" href="">'.$tr_homme. '</a></th>';
$contenu.='</tr>';
$contenu.='</table>';


Voici la partie css:


.tab{
width: 376px;
margin: 0 auto;
padding: 5px 0 0;
text-align: center;
}

th,td{
border:5px solid red;
}

.survol1_lien{
font: 1.0em "Century Gothic", Verdana, Arial, sans-serif;
display: inline-block;
margin: 0px 85px 0px;
padding: 5px 0;
color: white;
text-decoration: none;
text-transform: uppercase;
vertical-align: bottom;
}

.photos_2 td a:hover{
font-weight: bold;
color: #19616E;
}


Merci de votre aide
Configuration: Windows XP
Firefox 3.5.6

8 réponses

  • Votes
  • Date
  • Date décroissante
  1. Bonjour,

    Je pense que j'ai trouvé. Enfin, j'ai juste essayé sur Firefox. J'ai rajouté:

    #principal table.tab{
    width: 376px;
    margin: 0 auto;
    padding: 5px 5px 50px 265px;
    text-align: center;
    }

    Merci de votre aide.
    1. Salut,

      Met le dans un Div avec un ID et en CSS tu ajoute la taille de ton tableau + 2px puis margin:0 auto 0 auto
      1. Bon, FF respecte les standards, donc ça vient du code.
        On peut avoir l'url ?
        Merci
        1. Curieux... il doit y avoir quelque chose d'autre dans le code qui empêche le centrage. C'est avec quel navigateur ? tous ? C'est en ligne ?

          Sinon, le !important doit être placé ainsi :

          margin:auto !important;
          1. Non, ca ne marche pas.
            Le "!" est placé à quel niveau?

            Merci pour votre aide
            1. float:center n'existe pas...

              Il se peut que ce soit un problème de priorité.
              Essaye :

              table.tab {
              width: 376px;
              margin: 0 auto;
              padding: 5px 0 0;
              text-align: center;
              }


              Ou si ce tableau est dans un élément qui comporte un id :

              #lenomdelid table.tab {
              ..
              }


              Sinon, rajoute un !important à ta propriété margin