Ce tableau en HTML, possible ?

Résolu
Shanthon -  
 Shanthon -
Bonjour,

Je dois créer un tableau en htlm semblable à celui-ci :

http://img11.hostingpics.net/pics/685608tableaucomplexe.png

Est-ce possible ?


Merci d'avance,

Anthony
A voir également:

2 réponses

AssassinTourist Messages postés 6028 Date d'inscription   Statut Contributeur Dernière intervention   1 312
 
0
Shanthon
 
Salut,

J'ai déjà ce tuto, mais il ne fait des tableau aussi complexe. si je fait un rowspan dans une cellule de gauche, elle s'alignera avec l'autre rowspan de la céllule de droite. Tandis quand dans mon image, il y a un décalage.

Désolé de ne pas être très clair :/

Mais merci d'avance :)
0
AssassinTourist Messages postés 6028 Date d'inscription   Statut Contributeur Dernière intervention   1 312
 
D'accord.
Alors il faut simplement faire par étape

1) En oubliant les cellules qui ont fusionnées, au final, combien as-tu de ligne et de colonne ? Tu construis alors un tableau à 5 colonnes et 6 lignes. (mets du texte au milieu pour bien visualiser l'effet de tes cellules)

2) Tu prends la première cellule en haut à gauche et tu vois avec qui elle a fusionné. Dans ton exemple, c'est avec une case à droite et une case en bas. Tu vas donc rajouter à cette cellule ceci : "rowspan=2 colspan=2". Tu n'oublies pas d'enlever les tr et td qui disparaissent =)

3) Je continue la fin de la ligne en ne rajoutant que des colspan=3 Tes deux premiers tr ressemblent maintenant à ça :
<tr>
  <td rowspan=2 colspan=2>bla</td>
  <td colspan=3>bla</td>
</tr>
<tr>
  <td colspan=3>blo</td>
</tr>

Toujours vérifier après un ajout de colspan et de rowspan le résultat (on n'est pas à l'abri d'une petite erreur ou d'un oubli)

4) J'ai continué pour le reste et j'arrive à ce résultat :
<table>
	<tr>
		<td rowspan=2 colspan=2>bla</td>
		<td colspan=3>bla</td>
	</tr>
	<tr>
		<td colspan=3>blo</td>
	</tr>
	<tr>
		<td rowspan=3>bli</td>
		<td rowspan=3>bli</td>
		<td rowspan=2>bli</td>
		<td>bli</td>
		<td rowspan=2>bli</td>
	</tr>
	<tr>
		<td>blu</td>
	</tr>
	<tr>
		<td colspan=3 rowspan=2>bly<br />bly2</td>
	</tr>
	<tr>
		<td colspan=2>ble</td>
	</tr>
</table>

(j'ai mis un <br /> à un moment pour que bien visualiser que c'est deux lignes dans une cellule)
0
Shanthon
 
Whoua, Merci beaucoup :)

Pour la cellule gauche du milleu qui se divise en deux colonne (là ou tu as mis bli). Je voulais qu'elle touche la cellule en bas a droite (là ou tu as mi bly) sans qu'une border apparaissent au dessus.
Grace à ton exemple, j'ai crompris que je vais faire une bordure que je cacherai en css pour donner l'illusion qu'elle ne n'apparrait pas.

Thx :)
0