[HTML] [CSS ?] Tableau : problème avec cellules

Bonjour,

Je me permets une nouvelle fois de vous demander votre aide.

Parvenue enfin à faire le mon table en html tel que je le souhaitais (bordure d'un couleur, sans chevauchement avec les autres celulles, couleur de fond...)

Je suis confrontée à un autre problème.

La page que je suis en train de faire se trouve à cette adresse : > ICI <

Mon tableau ainsi fait que ma colonne de droite n'est pas indépendante de celle de gauche et je ne peux pas leur donner une "height" hauteur différente à chacune. Si je les mets dans un tableau en plus pour les séparer, ma mise en page change et les bordures ne sont plus dans l'axe de celle du tableau du haut.

Voici mon code : (c'est du bidouillage, désolée pour les puristes !! : /)

Citation:

---

<div align="center">&nbsp;</div>

<div align="center">
<table width="95%" cellpadding="0" cellspacing="0">
<tr><td>

<div align="center">
<table width="100%" cellpadding="0" cellspacing="0">

<tr><td style="border:1px solid rgb(186,212,255);" bgcolor="#FFFFFF">

<div align="center">&nbsp;</div>
<div align="center"><img src="titre.png"></div>

<table width="100%" border="0" cellspacing="0" cellpadding="0">

<tr><td width="10%"><div align="center"><img src="images/blank1.gif"></div></td>

<td width="80%"><div align="center"><font color="#9CB2D9" size="2"><b>LE GUIDE PRATIQUE POUR BIEN ACHETER ET BIEN VENDRE SUR EBAY</b></font></div></td>

<td width="10%"><div align="center"><img src="images/blank1.gif"></div></td>
</tr></table>

<div align="center"><img src="http://hstfr.tradedoubler.com/file/1695/generic/468x60/SM_Femme_468x60_C.gif"></div>

<div align="center">&nbsp;</div>

</td></tr>

<tr><td style="border-left: 1px solid rgb(186,212,255); border-right: 1px solid rgb(186,212,255); border-bottom: 1px solid rgb(186,212,255);"

bgcolor="#E7F3FF">

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td width="2%"><div align="center"><img src="images/blank2.gif"></div></td>

<td width="96%"><div align="center"><font color="#9CB2D9" size="2"><b>Débuter | Naviguer | Gérer | Acheter | Vendre | Services | Boutiques | Paypal | Sécurité | Plus | Contact</b></font></div></td>

<td width="10%"><div align="center"><img src="images/blank2.gif"></div></td>
</tr></table>
</tr></table></div><br>

<div align="center">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td width="75%" style="border-left: 1px solid rgb(186,212,255); border-right: 1px solid rgb(186,212,255); border-top: 1px solid rgb(186,212,255); border-bottom: 1px solid rgb(186,212,255);" bgcolor="#E7F3FF">&nbsp;</td>

<td width="3%">&nbsp;</td>

<td width="22%" style="border-left: 1px solid rgb(186,212,255); border-right: 1px solid rgb(186,212,255); border-top: 1px solid rgb(186,212,255); border-bottom: 1px solid rgb(186,212,255);" bgcolor="#E7F3FF">&nbsp;</td>
</tr>

<tr>
<td width="75%" style="border-left: 1px solid rgb(186,212,255); border-right: 1px solid rgb(186,212,255); border-bottom: 1px solid rgb(186,212,255);" bgcolor="#FFFFFF">&nbsp;</td>

<td rowspan="3">&nbsp;</td>

<td width="22%" style="border-left: 1px solid rgb(186,212,255); border-right: 1px solid rgb(186,212,255); border-bottom: 1px solid rgb(186,212,255);" bgcolor="#FFFFFF">&nbsp;</td>

</tr>
</table></div>


</td></tr>
</table></div>

---

Merci par avance de votre aide.

Euh la je dois dire que c'est du bidouillage ou tu compliques bien la vie.
Pourquoi ne pas créé deux styles css, un avec la propriété float:left, et l'autre la propriete float:right.
Et ensuite donner a chacune de tes 2 tables l'ID correspondante.


Si tu fait une presentation de table imbriquer dans ta table, tu ne pourra jamais definir une taille differente pour chacune d'entre elle.

Essaie un truc du genre :
Ta feuille CSS:

Code:

---

1 2 3 4 5 6 7 8 9 10 11

#gauche{ float:left; height:200px; }   #droite{ float:right; height:300px; }

---

ton code :

Code:

---

1 2 3 4 5 6 7 8 9 10 11

<table id="gauche"> <tr> <td>blabla</td> </tr> </table> <table id="droite"> <tr> <td>blopblopblop</td> </tr> </table>

---

Merci de ton message mais je ne connais pas bien le CSS T__T

Alors je bidouille avec le peu que je connais, du vieux HTML avec deux trois trucs compris sur les sources ça et là !

Je vais essayer ce code.

Edit :

J'ai essayé le code donné mais les tableaux gauche et droite sont l'un sous l'autre et non plus à côté... Quelqu'un a une solution ?

Ba euh oui, encore heureux;)
Le CSS est un outil pour realiser des presentations webs, amenant une plus grand clarté dans ton code. Tu pourra forcement retrouver ce que t'as fait, et pour realiser des modifications ca va etre un gain de temps. Je te conseille de t'y mettre, c'est devenu incontournable pour realiser des sites maintenant. Tu peux trouver de la documentation (tres) facilement sur google

Erf j'éditais mon post pendant que tu me répondais.

Ca marche pas ou alors j'ai pas compris le truc T__T

Je sais que le CSS facilite les choses, je commence doucement à faire des styles pour les "font" et les trucs faciles. Mais les tableaux, j'ai déjà assez de mal en html pour que ça fasse un truc présentable et qui tombe juste alors en CSS >__>


Edit : Hannn !! Ca marche en l'adaptant !!! C'est dreamweaver qui les affichent les uns sous les autres !! Va savoir pourquoi !! O_o

J'ai fait un essai > ICI <

Merci de ton aide Fabster !

De rien Epistoliere, tu vas voir que essayer le CSS, c'est l'adopter.

Au passage, je mefierais de la partie creation de dreamweaver. Je me sers de dreamweaver seulement pour avoir de joli couleur sur mes balises. Et pour tes tests, visualisent au moins sur FF et sur IE.

Coucou ^__^

Je n'utilise Dreamweaver que pour visualiser le rendu des tableaux.

Je préfére Notepad pour mes codes et IE pour visualiser ensuite.

J'ai donc eu le tort de regarder le rendu du code que tu m'as donné sur dreamweaver pour mieux situer les tableaux, d'où la méprise >__>

Visualise sous Mozilla FireFox aussi, sinon tu risques d'etre decu quand tu croiras avoir fini ton site

Vi, vi, j'ai aussi... Je disais IE pour faire simple.

Disons donc visionnage sous plusieurs navigateurs...