L'essentiel du HTML5

Aller plus loin avec les tableaux

Testez gratuitement nos 1304 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Il existe encore d'autres possibilités pour personnaliser encore plus les données. Découvrez-les dans cette vidéo.
03:57

Transcription

Il est possible d'aller plus loin dans la structuration de nos tableaux. On peut avoir besoin, dans certain cas par exemple, de réunir deux cellules. Par exemple, on pourrait avoir besoin de réunir cette cellule avec cette cellule. Alors, pour cela, c'est très simple, il suffit de sélectionner la cellule en question, donc celle-ci, ici. Et puis de dire que le colspan, c'est à dire l'étendu de la cellule, vaut par exemple, deux. Donc, dès l'instant où on va vouloir deux, vous voyez qu'ici, la cellule s'étend de deux. Sauf que bien entendu, il y a une cellule en plus qui est poussée à l'extérieur puisqu'elle était définie. Donc, il faut penser dès lors où on va rajouter un étendu de cellule comme ça, de retirer la cellule suivante, c'est à dire la cellule qui était supposée être la partie incluse maintenant. On va pouvoir faire exactement pareil sur du rawspan. C'est à dire que je pourrais dire qu'ici, cette cellule, celle là et celle là sont étendues. Eh bien là, je vais faire pareil, je vais faire un rawspan. Et je vais dire que c'est égal, par exemple, à 3 cette fois-ci. Donc là, j'ai trois cellules qui vont être posées là. On ne voit plus les poussées. Vous voyez, c'est simplement ces edeux qui ont été poussées sur le côté. C'est un peu comme si l'élément, en tombant, faisait un peu comme tetris et poussait ces parties là. Donc il va me falloir venir non seulement supprimer cette cellule là, plus celle ci. Alors, je vais venir en supprimer une ici. Et une ici. Voilà, et tout rentre dans l'ordre parfaitement. Et bien entendu, ce qu'il est possible de faire, dans un sens ou dans l'autre, peut être fait dans les deux sens. Donc on pourrait demander ici, d'avoir un colspan égal à deux. et un rawspan égal à deux également pour faire une cellule carrée. Alors là, dans ce cas là, on a besoin de supprimer une cellule ici, qui est la cellule qui a été adjacente. Et on a besoin de supprimer deux des celllules suivantes, ici. Donc, je vais prendre par exemple, ces deux là. Et là, voilà, on retrouve notre cellule d'origine. Alors, on peut grouper de manière horizontale, verticale ou dans les deux sens. On peut également maintenant venir définir des colonnes et des groupements de colonnes. Alors, ici, pour définir une colonne, il suffit de venir l'identifier juste après. Alors, volontairement, je la ferme, la balise on n'est pas obligé mais je la ferme pour dire voilà, elle ne contient rien, elle est isolée. Ça, ça me parle plus facilement mais encore une fois, vous n'êtes pas obligé de fermer cette balise, de faire ce qu'on appelait une cinglette à l'époque du xhtml 1.0. Donc ici, on peut dire, voilà, cette première colonne, elle va pouvoir être identifiée. Et maintenant, je vais pouvoir créer ce qu'on appelle des colgroup. Alors, j'aurais pu le créer d'entrée de jeu. Et là, pour créer un colgroup, ici, il suffit de faire une balise de type colgroup. Et dans ce colgroup, on va placer tout ce qu'on veut. C'est à dire toutes les colonnes qui vont en faire partie. Je pourrais me dire que tout ce groupe de colonnes ici, les 3, sont 3 colonnes que je veux grouper entre elles. Voilà donc ici, on a trois colonnes groupées entre elles. Pour pouvoir identifier ces deux groupes de colonnes, je pourrais placer une classe par exemple, ici, premier. Et vous voyez qu'automatiquement, toutes ces colonnes font partie ensemble, sont associées et deviennent par la couleur qui sera affectée ici, si je viens dans la partie premier. Ici, j'ai un background color, qui correspond à cette couleur un peu moutarde, ici qui va pouvoir venir affecter l'ensemble des 3 colonnes. Donc, j'ai pas besoin de venir une par une définir toutes les cellules qui doivent être affectées. Et ce qu'on a fait sur ce groupement de colonnes, on va pouvoir le refaire. Alors là, je vais faire un copier/coller, ça ira plus vite. Bien entendu, il faut que le nombre de colonnes soit respecté. Donc, j'en ai 1, 2, 3, 4, 5, 6 Donc, 1, 2, 3, 4, 5, 6, donc là, y en a une en trop. 4 et de 6, voilà, parfait. Et là, on va prendre la classe second, par exemple, pour donner un autre nom de classe. Bien entendu, ces deux colonnes seraient affectées de manières différentes. Voilà, vous avez la possibilité de jouer avec les colonnes et les ranger. Et ensuite, dans l'en-tête du tableau, juste après la balise caption et avant la balise thead, de pouvoir venir gérer directement les colonnes et de les grouper grâce à des balises col/raw.

L'essentiel du HTML5

Préparez la structure de vos sites web de manière évolutive, sémantique, et accessible à tous avec le HTML5. Abordez la gestion du texte, les balises et les attributs, etc.

5h13 (63 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Date de parution :29 juin 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !