La mise en forme en table
Il existe un conteneur particulier lui aussi, qui permet de faire de la mise en forme sous format de table ou tableau. On le définit avec la balise <table>
Ok donc <table> permet d'afficher du texte sous la forme de tableau.Lignes et colonnes
Non, table va simplement contenir des éléments de tableau, et dans un tableau on a des lignes et des colonnes. Pour faire une ligne on utilise la balise <tr> qui signifie "table row", et pour une case la balise <td> qui signifie "table datacell".
Mais tu m'as parlé de lignes et de colonnes et là tu me parles de lignes et de cases. Comment on fait les colonnes ?Il n'y a pas de moyen de créer une colonne en html, en fait on va définir des lignes et pour chaque ligne on va créer des cases, chaque case étant dans une colonne théorique.
Je ne comprends pas tout...Je te montre un exemple de tableau avec trois lignes et trois colonnes :
J'ai ajouté des bordures en css pour que l'on puisse voir le rendu, mais tu vois, j'ai bien trois balises <tr> donc trois lignes, et dans chaque ligne j'ai trois balises <td> donc trois cases, ce qui forme au final trois lignes et trois colonnes.
Ok mais si on ne met pas le même nombre de <td> dans chaque ligne ?Et bien il y aura des cases "vides" mais le tableau s'affichera quand même.
Et on peut aller un peu plus loin aussi en agrandissant certaines cases avec l'attribut colspan, il permet de définir le nombre de case que cette case doit prendre. Par défaut chaque case a un colspan de 1.
On a donc théoriquement un tableau de trois lignes et trois colonnes, mais certaines lignes ont une case qui prend tout l'espace ou une plus grande partie de l'espace.
D'accord, on peut donc tout faire avec ce concept de lignes et cases.En-tête et pied de page
On peut aussi séparer les différents contenus d'un tableau dans plusieurs parties.
C'est à dire?Hé bien un tableau est normalement composé d'une en-tête, d'un corps et d'un pied de page, et ces trois parties peuvent être identifiées par les balises <thead>, <tbody>, et <tfoot>.
Généralement on se sert de l'entête pour afficher les titres de colonne et on peut se servir du pied de page dans le cas où l'on souhaite faire un récapitulatif par exemple.
Ok je crois comprendre. Mais comment ça fonctionne à l'intérieur ?Comme un tableau, chaque partie est en quelque sorte un sous tableau, et il y a une balise en plus à connaitre, c'est <th> qui signifie "table header" et qui permet de faire un titre, c'est à utiliser au même endroit qu'un <td>.
Voilà un exemple qui regroupe tout ce que l'on a vu :
C'est bon je suis un expert des tableaux ! J'ai terminé cette partie