L'essentiel du HTML5

Définir des tableaux, une base et une mise en forme

Testez gratuitement nos 1300 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Explorez les diverses balises permettant de construire un tableau. Rangée, colonne, en-tête, corps et pied de page, tout est réuni pour renseigner au mieux l'ensemble des données tabulées.
06:03

Transcription

Pendant longtemps, la balise a été boudée du fait qu'elle était utilisée à une certaine époque pour la mise en page des contenus css et non pas pour des données tabulées. Mais dèslors que vous allez utiliser des données tabulées, la balise table est une balise incontournable du html. Et il est bon de bien comprendre toutes les mécanique qu'on nous propose. D'entrée de jeu, une balise table peut contenir un élément tr. Cet élément tr va correspondre à table raw, table rangée, en gros. Et donc, on va pouvoir venir ranger un certain nombre de colonnes à l'intérieur. On pourra avoir autant de ranger que l'on veut. En gros, c'est une matrice qui va permettre de mettre d'une part, des cellules horizontales qui vont s'empiler verticalement. Donc, dans cette rangée, on va pouvoir mettre deux types de balises. Des balises de type th, ou des balises de type td. Si on utilise une balise de type th, ça veut dire table head. Une en-tête de cellule. Donc, il est vrai que généralement, dans la partie haute du tableau, on se retrouve avec des balises d'en-tête et donc, on va utiliser du th. Qu'est-ce qu'on met à l'intérieur de ce th ? Tout simplement un espace blanc et vous avez vu qu'avec la feuille de style, du fait qu'il y a un contenu d'espaces blancs de manière explicite, cette fois-ci. Esperluette en psp. On se retrouve avec ce contenu de rangé, avec une seule cellule. Alors la feuille de style css qui est utilisée derrière va mettre en forme le tableau, je vous invite à venir la consulter si vous en avez besoin. Mais on va dire que pour l'instant, ce n'est pas du tout le propos de cette séquence. Alors par contre, comme on voit cette en-tête de tableau, est-ce que c'est une en-tête qui doit se suivre ici, pour dire par exemple John, Bob, Rita, Zita et les données seront écrites horizontalement ou est-ce que c'est ici les valeurs et les données seront écrites dans ce sens ? Donc, il est très important d'indiquer dans quel sens va se trouver le scope, c'est à dire l'étendue de cette en-tête. Là, on va dire que c'est une en-tête de colonne. Ici, on va se retrouver avec une en-tête de colonne qui va définir ici le titre de ce qui va se passer dessous. Et donc, on va pouvoir comme ça, rentrer autant de th que l'on souhaite pour pouvoir indiquer le nombre de cellules que l'on placerait horizontalement. Voilà, donc, on a créer notre première rangée de cellules. Maintenant, on va créer une seconde rangée. En réalité, cette seconde rangée n'est plus une rangée d'en-tête Doncla seule chose qui va venir distinguer l'en-tête de pas l'en-tête, c'est le fait, comme on le disait, d'utiliser une balise th ou une balise td. Sauf que ça veut dire que mon en-tête forcément, se déroulerait que sur une seule ligne. Donc, il existe pour cela la possibilité de dire non, mon en-tête se déroule sur 3, 4, 5 lignes. Et on va pouvoir délimiter l'en-tête de la table par une balise souvent sous exploitée qui est la balise thead, ici, qui va venir dire que je suis dans le tableau head et à ce niveau-là, je ne suis plus au niveau de la rangée. Et tout ce qui va se situer à l'intérieur de ces balises ouvrantes et fermantes de thead serait considéré comme l'en-tête du tableau. Alors mainenant, on va pouvoir tabuler nos tr plus à l'intérieur puisque ce sera plus joli et plus facile à lire. Puisqu'il y a une balise thead, on va se retrouver avec un ablise tbody. Et dans la balise tbody, qu'est-ce qu'on va placer ? Tout le corps du tableau. Ici, le corps du tableau ça va être quoi ? Ça va être principalement des balises, déjà une rangée tr et des balises th si on souhaite placer une en-tête de colonne sur cet endroit-là. C'est à dire ici, ça c'est les mois, ça les commerciaux, et ici les valeurs du chiffre d'affaire qu'ils ont rapporté, par exemple. On pourrait très bien avoir une en-tête verticale pour les rangées horizontales, ici. Donc à ce niveau là, on va mettre un espace, histoire de matérialiser la balise. Et puis on va mettre un scope. Mais cette fois-ci, on ne mettra pas un col, on mettra un raw pour dire attention, l'en-tête se situe pour la rangée. Et maintenant, on va pouvoir placer une balise de type td avec du contenu. Et autant de balises que nécessaire, c'est à dire pour pouvoir remplir toute la rangée. Une fois que c'est terminé, on va pouvoir répéter l'opération avec autant de tr que l'on souhaite. Ici, je peux mettre 3, 4 rangées, etc... Une fois que les rangées vont être rentrées, qu'elles seront terminées, qu'est-ce qu'on va placer ? On va placer un tfoot. C'est à dire la possibilité de dire, ici je vais mettre un pied de tableau. Et ce pied de tableau va être, lui aussi, composé de td, de tr ou de th, s'il y a un en-tête au départ, comme c'était le cas tout à l'heure, par exemple, pour le tbody. Et on va remplir le tableau exactement de la même manière. Notre tableau serait terminé. À ceci près que l'on va pouvoir rajouter de manière très importante, ici, deux informations. La première, c'est le caption, à l'intérieur du tableau qui va être le titre du tableau. Souvent, on retrouve des h3 devant un tableau pour dire revenus du mois X. Et puis après, à l'intérieur dans la table, mais il n'y a rien qui va relier une balise extérieure et le tableau sauf si on utilise caption. Ici, on est bien structurellement parlant, à l'intérieur du tableau et on écrit bien le titre de notre tableau. Dernière information à donner pour la balise table, ça va être ici, un summary, ça va être une valeur qui sera lue par les lecteurs d'écran et qui pourra donner de l'information sur le contenu de ce tableau pour les personnes à déficience visuelle. Avant de clore, regardons juste du côté des css, ça n'a pas besoin de classe parce que vous avez vu qu'il y a différentes couleurs utilisées. Mais oui, on peut coder les th d'une certaine manière, les td d'une autre manière. Et dire attention, tous les td qui sont dans un tfoot, c'est à dire ces cellules là, vont pouvoir être codées de manière différente. le caption va être titré. Et ici, le summary n'apparaît pas de manière visuelle puisque c'est quelque chose qui est lu par un lecteur d'écran. Donc ici, vous avez les balises de base. qui peuvent interférer pour la création d'un tableau. Et je vous invite également à vous rapprocher du w3c et à regarder ce qui peut être fait. Si vous regardez dans le w3c ici, vous voyez que le tfoot peut petre placé devant. Donc, c'est quelque chose qui peut être des fois, très stratégique c'est à dire, prendre le tfoot ici, et de le déplacer justement juste après le thead, Ça s'affichera exactement pareil au niveau du rendu visuel mais ça va permettre de charger l'en-tête et lpied de page du tableau pendant que le navigateur continue de chercher les données. Et les données s'afficheront et écarteront les emplacements head et foot au fur et à mesure du chargement ce qui devient un chargement progressif beaucoup plus convivial et qui est tout à fait permis par le w3c.

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 !