Structurer un tableau HTML

Dans la leçon précédente, nous avons créé un premier tableau très simple. Ici, je vous rappelle que les tableaux sont des objets HTML qui servent à structurer et à donner du sens à des contenus en les organisant.

Souvent, lorsque nous choisirons d’organiser de l’information dans un tableau, cette information sera hiérarchisée et on voudra que notre tableau possède une ligne d’en-tête dans laquelle on va préciser le type de données attendues dans chaque colonne voire une légende, etc.

Dans cette nouvelle leçon, nous allons découvrir de nouveaux éléments et attributs qui vont nous servir à structurer nos tableaux HTML pour donner un maximum de sens à chaque donnée.

 

Ajouter une ligne d’en-tête à un tableau HTML

Très souvent, les tableaux vont posséder une ligne d’en-tête dans laquelle on va donner des informations au lecteur sur le type des données qui seront renseignées dans chaque colonne.

Cette ligne d’en-tête est différente des autres lignes puisqu’elle ne contient pas le même type d’informations que les autres lignes de notre tableau : elle sert simplement à indiquer quelles informations vont figurer dans le tableau. Nous allons ainsi pouvoir différencier cette ligne des autres en HTML à l’aide d’un élément particulier.

Pour créer une ligne d’en-tête en HTML, nous allons cette fois-ci devoir utiliser l’élément th, pour « table head » ou « en-tête du tableau » en français à la place de nos éléments td dans notre première ligne.

On peut appliquer un style particulier en CSS à cette ligne afin de bien la démarquer des autres. Par défaut, le texte au sein des éléments th s’affichera en gras dans la plupart des navigateurs.

See the Pen Cours HTML CSS 7.2.1 by Pierre (@pierregiraud) on CodePen.

Si vous avez ajouté des bordures autour de chaque cellule de votre tableau en CSS, pensez bien ici à appliquer ces mêmes bordures aux éléments th en plus des éléments td pour avoir des bordures autour des cellules de la ligne d’en-tête également.

 

Création d’un tableau structuré en HTML

Si vous devez créer des tableaux assez longs, il peut être judicieux de commencer à les structurer en les subdivisant en plusieurs parties.

On peut distinguer trois parties dans un tableau : le haut du tableau contenant généralement la ligne d’en tête, le corps du tableau contenant les informations de notre tableau en soi et le pied du tableau servant à calculer des totaux ou à rappeler les informations d’en tête si votre tableau est vraiment long.

Pour définir chaque partie d’un tableau, nous disposons d’un élément HTML spécifique :

• thead pour la tête du tableau ;
• tbody pour le corps du tableau ;
• tfoot pour le pied du tableau.

Voyons immédiatement comment utiliser ces nouveaux éléments judicieusement.

See the Pen Cours HTML CSS 7.2.2 by Pierre (@pierregiraud) on CodePen.

Vous pouvez par ailleurs noter ici une chose intéressante : il est strictement équivalent de mentionner un élément tfoot avant ou après un élément tbody. En effet, même si le tfoot est déclaré avant le tbody, son contenu s’affichera tout de même après dans le rendu final.

Cette curiosité nous vient du HTML4 dans lequel il était interdit de déclarer un élément tfoot après un élément tbody ; il fallait absolument le mentionner avant. Cette règle totalement contre intuitive a été supprimée avec le HTML5.

 

Fusionner des cellules entre elles avec colspan et rowspan

Le CSS, bien que puissant aujourd’hui, ne nous permet pas encore de tout faire et certains attributs HTML ne sont pas encore dépréciés. C’est notamment le cas des attributs colspan et rowspan qui vont nous permettre de fusionner plusieurs cellules adjacentes d’une même ligne ou d’une même colonne.

Ces attributs vont prendre en valeur le nombre de colonnes ou de lignes qu’une cellule doit couvrir, c’est-à-dire le nombre de colonnes ou de lignes qu’une cellule doit occuper ou encore sur lesquelles elle doit s’étendre. Essayons donc de fusionner plusieurs cellules entre elles dans un tableau HTML grâce à ces attributs :

See the Pen Cours HTML CSS 7.2.3 by Pierre (@pierregiraud) on CodePen.

Notez bien ici qu’il faudra bien réfléchir à la construction de votre tableau lorsque vous utilisez ces attributs. Par exemple, si on définit qu’une cellule doit couvrir 3 lignes, il faudra omettre un élément td pour les deux lignes supplémentaires sur lesquelles la cellule s’étend et idem. pour une cellule couvrant l’espace relatif à plusieurs colonnes.

 

Ajouter une légende à un tableau HTML avec caption

On va également pouvoir ajouter un titre ou une légende à notre tableau afin d’indiquer ce que contient notre tableau.

Pour ajouter une légende, nous allons utiliser l’élément HTML caption. Cet élément est très simple d’utilisation, mais il faut respecter une règle : il doit être inséré immédiatement après la balise ouvrante de l’élément table.

See the Pen Cours HTML CSS 7.2.4 by Pierre (@pierregiraud) on CodePen.

 

Utiliser les éléments col et colgroup pour préparer la mise en forme des colonnes d’un tableau

Nous avons vu précédemment qu’en HTML nous créons les tableaux ligne par ligne avec des éléments tr. Cela fait qu’il est très simple de mettre en forme en CSS les différentes lignes d’un tableau HTML, en utilisant pas exemple une pseudo-classe :nth-child() que nous étudierons plus tard dans ce cours.

Cependant, cela est beaucoup plus compliqué lorsque l’on souhaite mettre en forme une colonne d’un tableau HTML puisque les cellules représentées par nos éléments td qui créent automatiquement ces colonnes sont dispersées au sein des différentes lignes.

Pour régler ce problème de mise en forme, le HTML nous offre deux éléments qu’on va pouvoir intégrer dans nos tableaux : les éléments col et colgroup.

L’élément colgroup va représenter un groupe d’une ou plusieurs colonnes dans un tableau qu’on va pouvoir ensuite mettre en forme en CSS. Cet élément est représenté par une paire de balises et doit être un enfant direct de l’élément table, précédé éventuellement uniquement par un élément caption. Cela signifie qu’il doit être inséré avant tout élément thead, tbody, tfoot, et tr au sein de l’élément table.

Au sein d’un élément colgroup, nous allons pouvoir insérer autant d’éléments col qu’il y a de colonnes dans notre tableau. Chaque élément col représente une colonne de notre tableau. Cet élément ne sert également qu’à la mise en forme et est représenté par une unique balise orpheline <col>.

Pour représenter plusieurs colonnes de notre tableau avec un seul élément col, on peut utiliser un attribut span qui va prendre en valeur le nombre de colonnes de notre tableau que l’élément col doit représenter.

See the Pen Cours HTML CSS 7.2.5 by Pierre (@pierregiraud) on CodePen.

Ici, notre tableau possède quatre colonnes. On veut appliquer une couleur de fond pour toutes les cellules des trois premières colonnes d’un coup.

On utilise donc un élément colgroup dans lequel on place deux éléments col. On passe un attribut span ="3" à notre premier élément col afin que cet élément représente les trois premières colonnes de notre tableau.

Nous n’avons alors plus qu’à appliquer une couleur de fond à cet élément col pour ajouter un fond à chacune des cellules des trois premières colonnes de notre tableau. Pour le cibler facilement, on lui attribue donc une class.