Probleme pour centrer un tableau

flexi2202 -  
bonjour a tous
j essaye de me construire une page web qui serais compatible avec tous les appareils
mais j ai deja un soucis avec mon logo et le centrage du tableau
si quelqu un peux m aider merci 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Titre</title>
    </head>

    <body>

<div style="width:80%; text-align:center;">
<TABLE CELLPADDING="2" CELLSPACING="2" WIDTH="80%"border="1">
	
   <caption>Passagers du vol 377</caption>

   <thead> <!-- En-tête du tableau -->
       <tr>
           <th colspan="6"><img src="https://www.000webhost.com/migrate?static=true"  alt="" /></th>
          
       </tr>
   </thead>

   <tfoot> <!-- Pied de tableau -->
       <tr>
           <th >Nom</th>
           <th>Âge</th>
          <td>mes debuts</td>
		   <td>astuces</td>
		   <td>Mon blog</td>
		   <td>contact</td>
       </tr>
   </tfoot>

   <tbody> <!-- Corps du tableau -->
       <tr>
           <td WIDTH="25%">Carmen</td>
           <td WIDTH="15%">acceuil</td>
           <td WIDTH="15%">mes debuts</td>
		   <td WIDTH="15%">astuces</td>
		   <td WIDTH="15%">Mon blog</td>
		   <td WIDTH="15%">contact</td>
       </tr>
       <tr>
           <td>Carmen</td>
              <td colspan="5"  rowspan="4">acceuil</td>
         
       </tr>
       <tr>
           <td>Carmen</td>

</tr>
     <tr>
           <td>Carmen</td>

</tr>
      <tr>
           <td>Carmen</td>

</tr>
     
   </tbody>
</table>
	
    </body>
</html>

7 réponses

  1.  dugenou Contributeur
    Bonjour,

    Il faut utiliser du CSS : 

    .tableau
{
margin-left:auto;
margin-right:auto;
width:80%;
}


    Et placer la class dans le code HTML : 

    <table cellspacing="2" cellpadding="2" border="1"  class="tableau">
    1. flexi2202 Auteur
      merci super cela fonctionne
      un tout grand merci
      a présent je souhaiterais que mon logo s adapte a la taille de sa cellule
      merci de l aide
      1. dugenou Contributeur
        Il faudrait déjà commencer par la réduire, car 992px × 185px et 186,06 Ko c'est beaucoup pour un logo.

        Ensuite, il faut mettre des attributs width=" " et height=" ", soit aux dimensions de l'image, soit aux dimensions de la cellule.

        Ce que je ferais, ce serait de mettre en pourcentage width="100% " height=" ". A tester, si ça convient.
        1. flexi2202
          merci pour l aide
          comment je pourrais faire pour réduire le poids de l image
          1. dugenou Contributeur
            Réduis les dimensions de l'image, tu ne vas probablement pas l'afficher en 992px × 185px.

            Je n'avais pas regardé tout ton code, je crois comprendre que tu veux faire ton site en utilisant des tableaux pour sa mise en forme, si c'est bien ça, revois ton projet, on ne crée plus les sites de cette manière depuis longtemps.
        3. flexi2202
          merci pour l aide
          oui c est ca je veux faire avec des tableaux en html , comment je dois faire alors
          un petit exemple svp merci
          1. flexi2202
            je pourrais faire comme ceci alors 
            CSS
            .Tableau span {
               display:inline;
               float:left;
               border:1px solid #FF6600;
               margin:0px;
               padding:3px;
              }
            .Tableau p {
               clear:left;
               margin:0px;
               padding:0px;
               height:100% !important; height:1em;
              }
            .Tableau p.legende {font-weight:bold}
            .Tableau span.col1 {width:70px}
            .Tableau span.col2 {width:120px}
            .Tableau span.col3 {width:90px}

            HTML
            <div class="Tableau">
               <p class="legende">
                  <span class="col1">Légende 1</span>
                  <span class="col2">Légende 2</span>
                  <span class="col3">Légende 3</span>
               </p>
               <p>
                  <span class="col1">Case 1.1</span>
                  <span class="col2">Case 1.2</span>
                  <span class="col3">Case 1.3</span>
               </p>
               <p>
                  <span class="col1">Case 2.1</span>
                  <span class="col2">Case 2.2</span>
                  <span class="col3">Case 2.3</span>
               </p>
            </div>
            1.  dugenou Contributeur
              Le mieux est d'apprendre à utiliser le CSS avec le HTML.

              Sur www.alsacreations.com il y a de nombreux tutoriels, par exemple : "Réalisation d'un design complet (HTML / CSS) en 4 étapes"

          Discussions similaires

          Tableau (croisé dynamique?) à 3 entrées
          ClementH3o

          10 réponses
          CALCULS
          smart19

          4 réponses