Cette vidéo, de cours HTML CSS gratuit pour débutants, va vous expliquer comment créer des tableaux dans vos pages HTML.
>> Les sites de références HTML/CSS
Bonjour à tous et bienvenue dans cette vidéo dans laquelle nous allons poursuivre notre formation HTML CSS et aujourd’hui on va s’intéresser tout particulièrement au tableau. Alors comme d’habitude on va créer un nouveau fichier en cliquant sur l’icône ici 04-tableau.html et entrer. Je vais créer ma structure de base avec un point d’exclamation, entrer et au niveau du title je vais nommer les tableaux, voici.
Et on va maintenant commencer à travailler dans le body pour mettre du contenu et on va créer un tableau et pour cela on utilisera la balise table tout simplement. Donc à l’intérieur de cette balise table on va avoir des lignes et des colonnes et donc pour faire des lignes on va utiliser la balise tr. Donc la balise tr, on peut utiliser un moyen mnémotechnique on va dire qui veut dire table row, donc ligne de tableau en anglais donc et ça vous permettra peut-être de mieux retenir les balises si j’emploie notamment des termes si on voit ce que ça signifie donc table row pour la ligne et à l’intérieur de ces lignes on va créer nos colonnes avec la balise td pour table data.
Donc là les données ça correspond en fait à une cellule du tableau donc là on est sur la première ligne et à l’intérieur de ce td je vais commencer à mettre le nom je vais rajouter une deuxième colonne donc une deuxième cellule sur cette même ligne donc toujours td, on va mettre cette fois prénom et enfin on va rajouter une troisième colonne, une troisième cellule donc td, on va mettre l’âge.
Donc ça on fait bien attention à bien structurer son tableau à ne pas se perdre dans l’imbrication de balises puisque c’est vrai que quand on va commencer à avoir déjà différents niveaux il ne faut pas se perdre et c’est pour ça que j’insiste bien sur l’indentation de manière à ce qu’on ait la table au premier niveau, à l’intérieur on a une première ligne et dans cette ligne nous avons des cellules donc pensez bien à faire une tabulation, à indenter les données.
Ensuite on va se mettre à ce niveau-là pour créer une deuxième ligne donc à ce moment-là on va mettre encore un tr pour créer notre deuxième ligne et sur cette deuxième ligne on va ajouter des cellules, donc td et ici on va commencer à mettre des données j’avais en fait en tête la première ligne nom, prénom, âge et puis là on va mettre des données du tableau alors je rappelle shift, alt, flèche vers le bas pour dupliquer les balises, la ligne donc là je vais mettre Pierre et puis on va mettre ici 25 ans donc il faut bien s’imaginer un peu le tableau dans la tête on a la première colonne, deuxième colonne, troisième colonne donc là on a le nom, le prénom et l’âge ensuite je peux sélectionner tout ça, faire shift, alt, flèche vers le bas pour recopier le tout et créer une troisième ligne alors cette fois je rajouterai ici Durand, Paul et 29 ans par exemple donc voilà, j’enregistre mon fichier et on va aller voir dans le navigateur ce que ça donne donc je l’ouvre avec Live Server, je lance mon navigateur et on voit le rendu du tableau, alors je vais un petit peu zoomer donc là c’est vrai qu’au niveau du html, ce n’est pas très joli on n’a pas de bordure qui sépare un petit peu les cellules du tableau alors pour cela je vais tricher un petit peu entre guillemets puisqu’on verra au niveau de ces bordures qu’on le fera plutôt en CSS donc là au niveau de la table j’ai rajouté un attribut qui existait avant en html4, mais avec la version 5 c’est devenu obsolète donc on a border égale 1 donc là je n’avais pas de bordure, mais pour qu’on voit un petit peu mieux nous les cellules et le tableau je vais un petit peu tricher puisque là pour l’instant on n’a pas encore vu le CSS donc je vais m’accorder un petit peu l’ajout de cet attribut sachez qu’il est devenu obsolète donc on ne va pas le mettre d’ailleurs Visual Studio Code me le précise, je l’ai en rouge généralement quand c’est en rouge on a souvent une erreur ou quelque chose qui n’est pas correct donc là Visual Studio Code nous le précise bien donc là je vais juste faire ça exceptionnellement pour qu’on puisse voir un petit peu ici au niveau du tableau on représente déjà mieux les cellules on voit les bordures, mais là je le dis c’est vraiment à titre exceptionnel puisque cet attribut est obsolète donc ça on le fera en CSS on y reviendra, mais pour l’instant comme on ne le connait pas on va s’accorder ceci.
Alors voilà les bordures, les tableaux donc voilà comment fonctionne un tableau donc la balise stable de premier niveau la balise principale, ensuite on a les lignes avec les tr, table row et puis les cellules avec les balises td, table data alors on pourrait aussi rajouter, plutôt que de mettre une balise td ici, on pourrait mettre une balise th pour table head, je vais remplacer les td par des th table head qui va être en fait la t3 du tableau donc j’enregistre et on voit ce que ça donne, donc là cette fois le html m’a mis melibelly en gras et centré dans mon tableau donc là je vous recommande aussi d’utiliser ce type de balise de bien distinguer les lignes, les données, la t3 par exemple donc voilà pour les tableaux, ça n’a rien de compliqué je vais aller un petit peu plus loin pour aussi vous montrer alors là je vais supprimer cette cellule par exemple, donc en fait ici je vais avoir une colonne et une deuxième colonne donc évidemment ça devrait un petit peu cafouiller dans mon affichage, parce que là j’ai la première, la deuxième et là j’ai rien donc ce qu’on va faire, on pourra faire une fusion, on peut fusionner des cellules et donc pour ça on aura l’attribut colspan donc là je voudrais fusionner par exemple, j’ai mis le nom, je vais fusionner sur nom, prénom, donc je vais faire un colspan égale 2, parce que là je vais prendre la place de deux cellules et sur ma troisième cellule j’aurai bien l’âge donc maintenant j’enregistre et je vérifie ce que ça donne et on a bien ici une fusion de cellules sur nom, prénom et puis l’âge sur la troisième colonne.
Donc voilà un petit peu comment fonctionnent les tableaux, alors l’équivalent de colspan, là j’ai fusionné sur la ligne, si on veut fusionner sur des colonnes on aura l’attribut colspan. Écoutez, je ne vais pas aller plus loin pour les tableaux, je vais vous laisser vous entrainer et puis on se retrouve très bientôt pour une prochaine vidéo.
