Ce tableau en HTML, possible ?

Résolu/Fermé
Shanthon - 16 mars 2012 à 09:51
 Shanthon - 16 mars 2012 à 12:27
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 5709 Date d'inscription lundi 16 janvier 2012 Statut Contributeur Dernière intervention 29 février 2024 1 310
Modifié par AssassinTourist le 16/03/2012 à 10:02
0
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 5709 Date d'inscription lundi 16 janvier 2012 Statut Contributeur Dernière intervention 29 février 2024 1 310
16 mars 2012 à 10:26
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
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