Ce tableau en HTML, possible ?

Résolu/Fermé
Signaler
-
 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

2 réponses

Messages postés
5698
Date d'inscription
lundi 16 janvier 2012
Statut
Contributeur
Dernière intervention
19 août 2021
1 268
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 :)
Messages postés
5698
Date d'inscription
lundi 16 janvier 2012
Statut
Contributeur
Dernière intervention
19 août 2021
1 268
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)
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 :)