Ce tableau en HTML, possible ?
Résolu/Fermé
A voir également:
- Ce tableau en HTML, possible ?
- Tableau croisé dynamique - Guide
- Tableau ascii - Guide
- Tableau word - Guide
- Editeur html - Télécharger - HTML
- Tableau de combinaison loto 5/90 - Forum Excel
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
Modifié par AssassinTourist le 16/03/2012 à 10:02
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 :)
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
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 :
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 :)