Télécharger le PDF du cours
table qui signifie « tableau » en anglais.
Les tableaux sont une notion importante du HTML et il est important que vous sachiez comment les créer. Dans cette leçon, nous allons voir comment créer un tableau simple.
Définition et utilité des tableaux HTML
Les tableaux en HTML vont nous permettre de présenter des données de manière organisée et sous une certaine forme pour les structurer et les rendre compréhensibles pour les navigateurs, moteurs de recherche et utilisateurs.
Historiquement, de nombreux développeurs et web designer se sont servi à tort des tableaux pour mettre en forme de pages web. En effet, à l’époque, utiliser des tableaux semblait être un bon moyen de contrôler l’affichage et le placement des différents éléments d’une page en les plaçant dans des cellules.
Dans cette lignée, de nombreux attributs HTML permettant de modifier / mettre en forme un tableau avaient été créés.
Cependant, cette utilisation est à bannir aujourd’hui. En effet, je vous rappelle que le rôle du HTML est et a toujours été de structurer du contenu et de lui donner du sens, pas de mettre en forme ledit contenu (ce qui est le rôle du CSS).
Ainsi, vous comprendrez également que pour mettre en forme visuellement un tableau, nous n’utiliserons pas les attributs HTML (qui sont en grande majorité dépréciés) mais plutôt des propriétés CSS.
Les éléments constitutifs essentiels d’un tableau HTML
Un tableau est un ensemble de lignes et de colonnes. L’intersection entre une ligne et une colonne est une cellule de tableau.
Pour créer un tableau fonctionnel en HTML, nous allons devoir utiliser à minima 3 éléments :
- Un élément
table(« tableau » en français) qui va définir le tableau en soi ; - Des éléments
tr, pour « table row » ou « ligne de tableau » en français qui vont nous permettre d’ajouter des lignes dans notre tableau ; - Des éléments
td, pour « table data » ou « donnée de tableau » en français qui vont nous permettre d’ajouter des cellules dans nos lignes et ainsi de créer automatiquement de nouvelles colonnes.
L’élément HTML table va représenter le tableau en soi. Cet élément est composé d’une paire de balises ouvrante <table> et fermante </table> au sein desquelles nous allons placer les différents autres éléments de notre tableau. Les éléments tr et td sont également représentés sous la forme d’une paire de balises avec leur contenu entre les balises.
Créer un tableau simple en HTML
Pour créer un tableau en HTML, il y a une chose que vous devez bien comprendre qui est que les tableaux HTML vont être créés ligne par ligne.
A chaque fois que nous voudrons ajouter une ligne dans notre tableau, nous utiliserons un nouvel élément tr.
Nous allons ensuite pouvoir ajouter autant d’éléments td au sein de chacune de nos lignes. Chaque élément td va représenter une cellule dans le tableau.
Par exemple, pour créer un tableau en HTML contenant 3 lignes contenant chacune 4 cellules (c’est-à-dire un tableau de 3 lignes, 4 colonnes), nous utiliserons notre élément table qui va contenir 3 éléments tr et chaque élément tr contiendra 4 éléments td comme ceci (ne tenez pas compte de la mise en forme pour le moment, nous en reparlerons plus tard) :
See the Pen Cours HTML CSS 7.1.1 by Pierre (@pierregiraud) on CodePen.
Nous venons ci-dessus de créer notre premier tableau entièrement en HTML. Retenez bien la syntaxe et particulièrement l’ordre d’imbrication des éléments avec nos éléments td à l’intérieur de nos éléments tr : on va utiliser un nouvel élément td dès que l’on va vouloir ajouter une cellule (et donc une colonne) au sein d’une même ligne.
Si vous essayez de ne recopier que le code HTML présenté ci-dessus et de l’afficher, vous risquez d’avoir un objet qui ne ressemble pas à l’idée que l’on se fait d’un tableau. C’est tout à fait normal puisque j’ai déjà ici mis sommairement notre premier tableau HTML en forme en utilisant des propriétés CSS.
Retenez cependant qu’au sens du HTML, et même sans mise en forme CSS, l’objet créé est bien un tableau. J’attire votre attention ici sur le fait que le rôle du HTML n’est que de structurer du contenu, c’est-à-dire le rendre intelligible pour les navigateurs et moteurs de recherche.
Notez par ailleurs que différentes lignes peuvent contenir un nombre différent de cellules même si cela est considéré comme une mauvaise pratique pour des raisons évidentes de sémantique et de lisibilité. Dans le cas où cela arriverait, la largeur de notre tableau HTML (i.e son nombre de colonnes) serait égale au nombre de cellules de la ligne contenant le plus de cellules.
Regardez plutôt l’exemple suivant où on a créé un tableau HTML de 3 lignes avec une première ligne contenant 4 cellules, une deuxième ligne contenant seulement 2 cellules, et la dernière ligne contenant 3 cellules :
See the Pen Cours HTML CSS 7.1.2 by Pierre (@pierregiraud) on CodePen.
Encore une fois, retenez qu’il est considéré comme une mauvaise mauvaise pratique de créer des lignes de tableau avec un nombre de cellules différent dans chacune. En pratique, nous attribuerons toujours un même nombre de td à nos différentes lignes. Si on souhaite laisser une cellule vide, nous nous contenterons d’écrire <td> </td> sans rien écrire entre les balises.
Imaginons par exemple que nous voulions laisser la cellule « age » vide pour la ligne relative à « Pierre » Pour cela, il suffit de créer un élément td pour son âge et de ne mettre aucun contenu dedans.
See the Pen Cours HTML CSS 7.1.3 by Pierre (@pierregiraud) on CodePen.
