28173 sujets

CSS et mise en forme, CSS3

Besoin d'aide pour un tableau un peu compliqué.

Bonjour.

Je souhaite créer un tableau qui ressemnle à ça:
http://site.voila.fr/strik/tableau1.jpg

Mais j'obtien cela (faites pas attention au fond bleu c'est en attendant pour bien voir l'affichage de mon tableau):
http://site.voila.fr/strik/tableau2.jpg
J'ai ajouté des border="0", ajouté les dimensions de mes images dans mes balises <td>, etc... sans succé. Il est vrai que j'ai pas forcément choisi la solution la plus simple en metant mes bordures en blanc comme des images mais c'est un peu la seule que je connaise. J'arrive pas à comprendre pourquoi j'ai ces espaces dans le sens vertical entre mes images...

Voivi mon code, ce sera pas forcément trés lisible sur le forum...
	<table hspace="0" cellpadding="0" cellspacing="0" align="center" width="537" height="170">
			<tr><td width="537" height="1" colspan="7"><img src="1.jpg"></td></tr>
			<tr><td width="1" height="11"><img src="2.jpg"></td><td width="122" height="11"><img src="3.jpg"></td><td width="1" height="11"><img src="2.jpg"></td><td width="211" height="11"><img src="4.jpg"></td><td width="1" height="11"><img src="2.jpg"></td><td rowspan="7" width="200" height="150"><img src="b17am.jpg"></td><td rowspan="9" width="1" height="168"><img src="5.jpg"></td></tr>
			<tr><td colspan="5" width="336" height="1"><img src="6.jpg"></td></tr>
			<tr><td width="1" height="95"><img src="7.jpg"></td><td width="122" height="95">texte</td><td width="1" height="95"><img src="7.jpg"></td><td width="211" height="95">texte</td><td width="1" height="95"><img src="7.jpg"></td></tr>
			<tr><td colspan="5" width="336" height="1"><img src="6.jpg"></td></tr>
			<tr><td width="1" height="11"><img src="2.jpg"></td><td width="122" height="11"><img src="3.jpg"></td><td width="1" height="11"><img src="2.jpg"></td><td width="211" height="11"><img src="4.jpg"></td><td width="1" height="11"><img src="2.jpg"></td></tr>
			<tr><td colspan="5" width="336" height="1"><img src="6.jpg"></td></tr>
			<tr><td rowspan="3" width="1" height="48"><img src="8.jpg"></td><td rowspan="3" width="122" height="48">texte</td><td rowspan="3" width="1" height="48"><img src="8.jpg"></td><td rowspan="3" width="211" height="48">texte</td><td rowspan="3" width="1" height="48"><img src="8.jpg"></td></tr>
			<tr><td width="200" height="1"><img src="9.jpg"></td></tr>
			<tr><td width="200" height="17">1024*768</td></tr>
			<tr><td colspan="7" width="537" height="1"><img src="1.jpg"></td></tr>
		</table>


Si vous aviez une solution même différente mais qui me permette d'arriver au résultat souhaité.
Modifié par The Edge (02 May 2006 - 18:43)
Administrateur
The Edge a écrit :
Voivi mon code, ce sera pas forcément trés lisible sur le forum...

Bonjour,

Oui, surtout parceque tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

EDIT : je déplace ce sujet dans le salon "mise en forme", puisqu'il n'a rien à voir avec la structure HTML
Modifié par Raphael (02 May 2006 - 18:27)
Une question que je me pose : pourquoi y a-t-il des colspan de 5 ou 7 colonnes, pour un tableau à 3 colonnes seulement ?
Hou attends, j'ai cru comprendre… tu veux dire que tes bordures blanches ne sont pas des bordures, mais des images de 1px de large ?

Houlà…
Je suis pas sûr de maîtriser cette technique de mise en page moi, j'en suis resté aux CSS et je suis pas trop allé voir dans les techniques qui existaient avant.
Désolé, je suis pas très compétent dans le domaine.
mpop a écrit :
Hou attends, j'ai cru comprendre… tu veux dire que tes bordures blanches ne sont pas des bordures, mais des images de 1px de large ?


Oui c'est tout à fait ça, ce qui explique les colspan.
Je maitrise pas trop ça non plus, sinon je demanderai pas d'aide Smiley lol mais je vois pas bien comment faire autrement. Jusque là j'ai toujours utilisé les tableaux pour de la mise en page surtout en faisant des tableaux sans bordure. Mais là ça je suis bien embété je vois pas la soluce. Et les bordure créées en metant border dans la balise table son moche au possible.

Maintenant je le redis si quelqun à une soluce qui me permette d'arriver au même résultat mais d'une autre manière (ce qui doit forcément exister et sera à mon avis plus simple), je suis preneur. Smiley biggrin
Modifié par The Edge (03 May 2006 - 11:23)
Bon ben je suis reparti de zéro en metant simplement border="1" pour avoir un trait de 1 de large (je pense pas à le faire parceque les bordures des tableaux sont pas belles en général, c'est pourquoi je tentait autrement) et ça roule.
Pour les bordures il vaut tout de même mieux utiliser les CSS...

Le border il faut le mettre sur les "td" et penser à enlever les espaces entre les cellules du tableau avec border-collapse.

+
The Edge a écrit :
Maintenant je le redis si quelqun à une soluce qui me permette d'arriver au même résultat mais d'une autre manière (ce qui doit forcément exister et sera à mon avis plus simple), je suis preneur. Smiley biggrin

Moi ma soluce dans ce genre de cas c'est de faire une page propre en XHTML Strict sans tableaux de mise en forme, avec un tableau de contenu sans colspan inutiles, et le tout mis en forme en CSS. Hmm, pas sûr que ça soit la solution la plus rapide dans ton cas Smiley bawling
C'est bon je suis reparti de zéro et ça fonctionne sans soucis.
J'ai laissé tomber les bordures faites avec des images de 1 de large. J'ai fais un tableau normal en metant juste border="0". Je sais pas pourquoi j'ai cherché à faire compliqué, bref...
Il n'y a que la bordure qui se trouve sous la photo qui est une image parceque sans ça j'avais un souci de mise en page.
En tout cas maintenant ça roule...

http://site.voila.fr/strik/tableau3.jpg
Sujet clos
Aller à