Les tableaux HTML permettent de structurer les informations de manière à ce qu’elles soient facilement lisibles. Tout comme les images, les tableaux sont très visuels et permettent à l’internaute de comprendre et de retenir rapidement l’information. Cela améliore l’expérience utilisateur et renforce l’impact du contenu. Utiliser un tableau sur une page web est particulièrement utile pour organiser des données par catégories, pour comparer des produits ou des services, ou encore pour résumer ou aérer un texte long.
Comment ça marche ?
La structure d’un tableau HTML est assez simple en suivant une logique d’empilement de lignes (row <tr>) divisées en cellules (data <td>), regroupées à l’intérieur d’un container spécifique (le tableau <table>) :
Le schéma précédent pourra donc être codé en HTML de la façon suivante :
<table>
<tr>
<td>Contenu de la cellule 1 de la ligne 1</td>
<td>Contenu de la cellule 2 de la ligne 1</td>
<td>Contenu de la cellule 3 de la ligne 1</td>
</tr>
<tr>
<td>Contenu de la cellule 1 de la ligne 2</td>
<td>Contenu de la cellule 2 de la ligne 2</td>
<td>Contenu de la cellule 3 de la ligne 2</td>
</tr>
<tr>
<td>Contenu de la cellule 1 de la ligne 3</td>
<td>Contenu de la cellule 2 de la ligne 3</td>
<td>Contenu de la cellule 3 de la ligne 3</td>
</tr>
<table>Dans cet exemple, nous utilisons les balises <table> pour définir les contours du tableau, <tr> et <td> pour composer 3 lignes chacune divisée en 3 cellules.
- La balise
<table>: indique au navigateur qu’il doit afficher un tableau. Tout ce qui se trouve entre les balises<table>et</table>est organisé en lignes et colonnes. - La balise
<tr>, pour « table row » : définit une ligne du tableau. Les éléments renseignés à l’intérieur des balises<tr>et</tr>s’affichent sur une ligne. - La balise
<td>, pour « table data » : remplit le contenu d’une cellule du tableau.
Les légendes
Dans l’exemple précédent, nous avons pu comprendre le principe de base d’un tableau, mais il sera rapidement nécessaire de l’enrichir pour le rendre plus accessible. Nous pourrons donc être amené à lui donner un titre et définir des cellules comment entête ou légende d’une ligne ou d’une colonne.
La balise <caption> : elle est utilisée pour ajouter une légende à un tableau HTML. Elle doit être placée immédiatement après la balise <table> et peut être utilisée pour fournir une description générale du contenu du tableau.
La balise <th> : La balise <th> (sigle de « table header ») est utilisée pour définir un en-tête de colonne ou de ligne dans un tableau HTML. Elle est généralement utilisée à l’intérieur d’un élément <tr> pour définir l’en-tête d’une colonne
Nous pourrons donc structurer un tableau de la façon suivante :
<table>
<caption>Résultats de l'enquête de satisfaction</caption>
<tr>
<th>Question</th>
<th>Réponse</th>
</tr>
<tr>
<td>Avez-vous apprécié votre séjour dans notre hôtel ?</td>
<td>Oui</td>
</tr>
<tr>
<td>Recommanderiez-vous notre hôtel à un ami ?</td>
<td>Oui</td>
</tr>
</table>La balise <caption> spécifie le thème du tableau (ici : Résultats de l’enquête de satisfaction) et les balises <th> sont utilisées pour définir la légende de chaque colonnes.
Il sera également possible de structurer un tableau dont la première cellule de chaque ligne définira la légende de la ligne :
<table>
<caption>Participants à l'enquête de satisfaction</caption>
<tr>
<th>Nom</th>
<tr>Dupont</tr>
<tr>Durand</tr>
</tr>
<tr>
<th>Prénom</th>
<td>Jean</td>
<td>Marie</td>
</tr>
<tr>
<th>Âge</th>
<td>32</td>
<td>28</td>
</tr>
</table>Nous pourrons aller encore plus loin en composant un tableau bi-directionnel dont la première ligne sera composé des légendes de chaque colonnes et la première cellule de chaque ligne en sera sa propre légende :
<table>
<caption>comparatif des ipad</caption>
<tr>
<th>Modèle</th>
<th>Taille de l'écran</th>
<th>Processeur</th>
</tr>
<tr>
<th>iPad pro</th>
<tr>12,9″</tr>
<tr>Puce M2</tr>
</tr>
<tr>
<th>iPad air</th>
<tr>10,9″</tr>
<tr>Puce M1</tr>
</tr>
<tr>
<th>iPad</th>
<tr>10,9″</tr>
<tr>Puce A14 Bionic</tr>
</tr>
</table>
Les tableaux enrichis
Il est possible d’aller encore plus loin dans la structuration de nos tableaux et ainsi gagner en accessibilité en définissant un ensemble de ligne comme aillant une valeur d’entête (<thead>), un ensemble de ligne formant le corps d’un tableau (<tbody>) ou un ensemble de lignes qui résument les colonnes d’un tableau.(<tfoot>).
<table>
<caption>Statistiques de vente</caption>
<thead>
<tr>
<th>Mois</th>
<th>Ventes (en euros)</th>
<th>Bénéfices (en euros)</th>
</tr>
</thead>
<tbody>
<tr>
<th>Janvier</th>
<td>10000</td>
<td>2000</td>
</tr>
<tr>
<th>Février</th>
<td>12000</td>
<td>2500</td>
</tr>
<tr>
<th>Mars</th>
<td>15000</td>
<td>3000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Total</th>
<td>37000</td>
<td>7500</td>
</tr>
</tfoot>
</table>Dans cet exemple, le tableau comprend une légende (<caption>), un en-tête de tableau (<thead>), un corps de tableau (<tbody>) et un pied de tableau (<tfoot>). Chaque ligne du tableau est définie à l’aide de la balise <tr>, et les cellules d’en-tête sont définies à l’aide de la balise <th>, tandis que les cellules de données sont définies à l’aide de la balise <td>.
Fusionner les cellules
Dans certains cas, il peut être nécessaire de fusionner des cellules horizontalement ou verticalement de façon a rendre notre tableau plus juste et garder son accessibilité.
Fusion horizontale
Pour fusionner des cellules, nous utiliserons l’attribut colspan.
<table>
<tr>
<td colspan="2">Cellule fusionnée sur 2 colonnes</td>
<td>Cellule normale</td>
</tr>
<tr>
<td>Cellule normale</td>
<td>Cellule normale</td>
<td>Cellule normale</td>
</tr>
<tr>
<td>Cellule normale</td>
<td>Cellule normale</td>
<td>Cellule normale</td>
</tr>
</table>
Dans l’exemple ci-dessus, la première cellule de la première ligne utilise l’attribut colspan pour fusionner sur 2 colonnes. Les autres cellules restent indépendantes.
Fusion verticale
Pour fusionner des cellules, nous utiliserons l’attribut rowspan.
<table>
<tr>
<td rowspan="2">Cellule fusionnée sur 2 lignes</td>
<td>Cellule normale</td>
<td>Cellule normale</td>
</tr>
<tr>
<td>Cellule normale</td>
<td>Cellule normale</td>
</tr>
<tr>
<td>Cellule normale</td>
<td>Cellule normale</td>
<td>Cellule normale</td>
</tr>
</table>
Dans l’exemple ci-dessus, la première cellule de la première ligne et la première cellule de la deuxième ligne utilisent l’attribut rowspan pour fusionner sur 2 lignes. Les autres cellules restent indépendantes.
Tableau complexe
Passons maintenant à un tableau plus complexe regroupant l’ensemble des balises décritent dans cet article :
<table>
<caption>Calendrier des matchs de football</caption>
<thead>
<tr>
<th rowspan="2">Date</th>
<th colspan="2">Equipe</th>
<th rowspan="2">Stade</th>
<th rowspan="2">Ville</th>
</tr>
<tr>
<th>Domicile</th>
<th>Visiteur</th>
</tr>
</thead>
<tbody>
<tr>
<td>Samedi 10 janvier</td>
<td>Paris Saint-Germain</td>
<td>Marseille</td>
<td>Parc des Princes</td>
<td>Paris</td>
</tr>
<tr>
<td>Dimanche 11 janvier</td>
<td>Lyon</td>
<td>Monaco</td>
<td>Parc OL</td>
<td>Lyon</td>
</tr>
<tr>
<td>Lundi 12 janvier</td>
<td>Bordeaux</td>
<td>Lille</td>
<td>Matmut Atlantique</td>
<td>Bordeaux</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5">La Ligue 1 reprend ses droits ce week-end !</td>
</tr>
</tfoot>
</table>
Dans cet exemple, le tableau comprend une légende (<caption>), un en-tête de tableau (<thead>), un corps de tableau (<tbody>) et un pied de tableau (<tfoot>). Les cellules de l’en-tête de tableau utilisent les attributs colspan et rowspan pour fusionner sur plusieurs colonnes et lignes. Le pied de tableau utilise également l’attribut colspan pour fusionner sur les cinq colonnes du tableau.