Ce tableau en HTML, possible ?
Résolu
Shanthon
-
Shanthon -
Shanthon -
A voir également:
- Ce tableau en HTML, possible ?
- Tableau word - Guide
- Tableau ascii - Guide
- Trier un tableau excel - Guide
- Tableau croisé dynamique - Guide
- Editeur html - Télécharger - HTML
2 réponses
Bonjour,
Yep ! => https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3#ss_part_2
Avec les propriétés rowspan et colspan.
Yep ! => https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3#ss_part_2
Avec les propriétés rowspan et colspan.
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 :)
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 :)
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 :
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 :
(j'ai mis un <br /> à un moment pour que bien visualiser que c'est deux lignes dans une cellule)
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 :)
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 :)