Alignement de tables en HTML

Bonjour,

Je veux mettre dans ma page HTML 6 tables (3 dans la première ligne et 3 dans la deuxième) , j'utilise des <div> et <table>. Par défaut quand je les crée ils s'alignent verticalement je voudrais savoir comment pouvoir les aligner comme suit:                 


                                   table1              table2                table3
                                   table 4            table5                 table6


Mes tables sont organisé comme ceci :(exemple de deux tables)

<div id="titre2">
<table class=cadre width="180"   border="0" cellspacing="0" cellpadding="0">
......    
</table>
</div>

<div id="titre3<table class=cadre width="180"   border="0" cellspacing="0" cellpadding="0">
.....
 </table>
</div>



Merci 

Info

met les dans une table

Bonjour,
les gurus vont pas aimer.. mais kazma++ !

---

                Cordialement            Bul         [mon Site]     [M'écrire]

Salut,

kazma et bultez++

Par contre bultez, j'ai pas compris l'jistoure des gurus qui vont pa aimer ça !

a++

Si la réponse vous convient, pensez : Réponse acceptée !

Bonjour,

si tu veux t'assurer que tes 6 tables s'affichent toujours sous cette forme, met le tout dans une table de 6 cellules.
Sinon si tu veux qu'elles s'aligne à droite tant qu'il y a de la place et si pas qu'elles passent en dessous, alors utilise un float:left en css sur tes DIV.

Nickadele

Ok,, tu peux me montrer comment ca va se modifier sur le code que j'ai envoyé?

 

Merci

Info

Solution 1 :

<table>
<tr>
<td><table class="cadre"><tr><td>table 1</td></tr></table></td>
<td><table class="cadre"><tr><td>table 2</td></tr></table></td>
<td><table class="cadre"><tr><td>table 3</td></tr></table></td>
</tr>
<tr>
<td><table class="cadre"><tr><td>table 4</td></tr></table></td>
<td><table class="cadre"><tr><td>table 5</td></tr></table></td>
<td><table class="cadre"><tr><td>table 6</td></tr></table></td>
</tr>
</table>

Solution 2 :
au niveau css
#titre{FLOAT: left; MARGIN: 0px 0px 0px 0px; WIDTH: 180px}

<div id="titre"><table class="cadre"><tr><td>table 1</td></tr></table></div>
<div id="titre"><table class="cadre"><tr><td>table 2</td></tr></table></div>
<div id="titre"><table class="cadre"><tr><td>table 3</td></tr></table></div>
<div id="titre"><table class="cadre"><tr><td>table 4</td></tr></table></div>
<div id="titre"><table class="cadre"><tr><td>table 5</td></tr></table></div>
<div id="titre"><table class="cadre"><tr><td>table 6</td></tr></table></div>

Autre chose :
<table class=cadre width="180" border="0" cellspacing="0" cellpadding="0">...</table>
si tu utilises une class pour définir le css, autant y mettre également l'ensemble des autres paramètres : width="180" border="0" cellspacing="0" cellpadding="0"
Pour obtenir : <table class="cadre">...</table>

Nickadele

Merci bcp pour ta réponse , en fait je ne suis pas très doué pour manier les tr et les td. En fait mon problemes c'est que mes 6 tables sont chacune une fusion de 2 tables(une pour le titre et l'autre pour le contenu). Donc je n'arrive pas à appliquer ce que tu m'as proposé.Je te redonne le code complet, si tuveux bien m'aider:

<table>
<table class=cadre width="180" onclick="javascript:vouc('titre1')" border="0" cellspacing="0" cellpadding="0">
   
   <tr >
    
    <td  bgcolor="#555555" align=center ><b><font face="Arial" size="2" color="#66FF00">titre1</font></b></td>
    
   </tr>
</table>
<div id="titre1"> <!-- debut de la partie en on off -->
<table class=cadre width="180"   border="0" cellspacing="0" cellpadding="0">
    <tr>
              <td ><a href="page1.htm" target="centre"> Solutions</a></td>
    </tr>
    <tr>
              <td ><a href="page2.htm" target="centre">Proposals</a></td>
    </tr>
    <tr>
              <td ><a href="page3.htm" target="centre">Competion</a></td>
    </tr>
    
    
      
  </table>
</div><!-- fin de la partie en on off -->
<br><br>
<table class=cadre width="180" onclick="javascript:vouc('titre2')" border="0" cellspacing="0" cellpadding="0">
   
   <tr >
    
    <td  bgcolor="#555555" align=center ><b><font face="Arial" size="2" color="#66FF00">GCOS</font></b></td>
    
   </tr>
</table>
<div id="titre2"><!-- debut de la partie en on off -->
<table class=cadre width="180"   border="0" cellspacing="0" cellpadding="0">
    <tr>
              <td ><a href="page4.htm" target="centre">element 1</a></td>
      </tr>
    <tr>
              <td ><a href="page5.htm" target="centre">element 2</a></td>
    </tr>
    <tr>
              <td ><a href="page6.htm" target="centre">element 3</a></td>
    </tr>
    
    
      
  </table>
</div><!-- fin de la partie en on off -->
<br><br>
<table class=cadre width="180" onclick="javascript:vouc('titre3')" border="0" cellspacing="0" cellpadding="0">
   
   <tr >
    
    <td  bgcolor="#555555" align=center ><b><font face="Arial" size="2" color="#66FF00">GCOS</font></b></td>
    
   </tr>
</table>
<div id="titre3"><!-- debut de la partie en on off -->
<table class=cadre width="180"   border="0" cellspacing="0" cellpadding="0">
    <tr>
              <td ><a href="page4.htm" target="centre">element 1</a></td>
      </tr>
    <tr>
              <td ><a href="page5.htm" target="centre">element 2</a></td>
    </tr>
    <tr>
              <td ><a href="page6.htm" target="centre">element 3</a></td>
    </tr>
    
    
      
  </table>
</div><!-- fin de la partie en on off -->
<script language=javascript>
vouc('titre1');
vouc('titre2');
vouc('titre3');
</script>

Info

Si je comprend bien table 1, 2 et 3 sont tes titre et table 4, 5 et 6 sont le contenu ?

Nickadele

Non , en fait les tables de 1 jusqu'à 6 contiennent chacune deux tables(titre et contenu) Ca fait douze tables.

 

 

Merci

Info