HTML - En-têtes et légendes

Bienvenue, futurs développeurs web ! Aujourd'hui, nous plongeons dans le monde passionnant des en-têtes et légendes HTML. En tant que quelqu'un qui enseigne cela depuis des années, je peux vous dire que maîtriser ces éléments rendra vos tableaux professionnels et bien organisés. Alors, c'est parti !

Syntaxe

Avant de rentrer dans les détails, parlons de la syntaxe que nous allons utiliser. En HTML, nous utilisons des balises spécifiques pour définir les en-têtes et les légendes de nos tableaux. Voici un aperçu rapide :

Balise	Description
<thead>	Définit un groupe d'en-têtes dans un tableau
<th>	Définit une cellule d'en-tête dans un tableau
<caption>	Spécifie une légende pour un tableau

Ne vous inquiétez pas si cela ressemble à un melting-pot alphabétique pour le moment. Nous allons les démonter pièce par pièce, et bientôt vous utiliserez ces balises comme un pro !

Exemples d'en-têtes et de légendes HTML

Commençons par un exemple simple pour voir comment ces balises fonctionnent en pratique.

<table>
<caption> Mes Livres Préférés </caption>
<thead>
<tr>
<th>Titre</th>
<th>Auteur</th>
<th>Année</th>
</tr>
</thead>
<tbody>
<tr>
<td>To Kill a Mockingbird</td>
<td>Harper Lee</td>
<td>1960</td>
</tr>
<tr>
<td>1984</td>
<td>George Orwell</td>
<td>1949</td>
</tr>
</tbody>
</table>

Reprenons cela :

1. Nous commençons par la balise <table> pour créer notre tableau.
2. La balise <caption> donne un titre à notre tableau : "Mes Livres Préférés".
3. La section <thead> contient notre ligne d'en-tête.
4. À l'intérieur de <thead>, nous avons une <tr> (ligne de tableau) avec trois <th> (cellules d'en-tête).
5. La section <tbody> contient nos lignes de données, chacune avec des <td> (cellules de données).

Quand ce tableau est rendu, il aura une ligne d'en-tête avec du texte en gras, ce qui rendra facile de comprendre ce que représente chaque colonne.

Combiner avec '' et ' '

Maintenant, améliorons notre tableau en ajoutant un pied de page avec la balise <tfoot>.

<table>
<caption>Ventes de Livres</caption>
<thead>
<tr>
<th>Titre</th>
<th>Auteur</th>
<th>Ventes</th>
</tr>
</thead>
<tbody>
<tr>
<td>The Great Gatsby</td>
<td>F. Scott Fitzgerald</td>
<td>25,000,000</td>
</tr>
<tr>
<td>The Catcher in the Rye</td>
<td>J.D. Salinger</td>
<td>65,000,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="2">Ventes Totales :</th>
<td>90,000,000</td>
</tr>
</tfoot>
</table>

Dans cet exemple :

1. Nous avons ajouté une section <tfoot> après <tbody>.
2. La ligne de pied de page utilise <th colspan="2"> pour créer une cellule d'en-tête qui s'étend sur deux colonnes.
3. La dernière cellule du pied de page affiche les ventes totales.

Cette structure aide à séparer le contenu principal (<tbody>) des informations de résumé (<tfoot>), rendant le tableau plus organisé et plus facile à lire.

Différence entre et

Je vois souvent des étudiants se confondre entre <thead> et <th>, alors permettons de clarifier cela :

• <thead> : C'est un conteneur pour le contenu des en-têtes dans votre tableau. Il regroupe les informations des en-têtes ensemble.
• <th> : Cela définit une cellule d'en-tête individuelle dans votre tableau.

Pensez à <thead> comme la boîte qui contient toutes vos informations d'en-tête, tandis que <th> est chaque étiquette individuelle dans cette boîte.

Voyons cela en action :

<table>
<thead>
<tr>
<th>Nom</th>
<th>Âge</th>
<th>Pays</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice</td>
<td>25</td>
<td>USA</td>
</tr>
<tr>
<td>Bob</td>
<td>30</td>
<td>Canada</td>
</tr>
</tbody>
</table>

Dans cet exemple :

1. La <thead> entoure toute la section des en-têtes.
2. À l'intérieur de <thead>, nous avons une seule <tr> (ligne de tableau).
3. À l'intérieur de cette ligne, nous avons trois cellules <th> pour nos en-têtes de colonne.

Souvenez-vous, vous pouvez avoir plusieurs lignes dans votre <thead> si nécessaire, chacune contenant des cellules <th>.

Pour conclure, regardons un tableau récapitulatif de toutes les balises que nous avons apprises :

Balise	But	Exemple
<table>	Crée un tableau	<table>...</table>
<caption>	Ajoute un titre au tableau	<caption>Mon Tableau</caption>
<thead>	Regroupe le contenu des en-têtes	<thead>...</thead>
<th>	Définit une cellule d'en-tête	<th>Nom de la Colonne</th>
<tbody>	Regroupe le contenu du corps	<tbody>...</tbody>
<tfoot>	Regroupe le contenu du pied de page	<tfoot>...</tfoot>
<tr>	Crée une ligne de tableau	<tr>...</tr>
<td>	Crée une cellule de données standard	<td>Données</td>

Et voilà ! Vous êtes maintenant équipé des connaissances pour créer des tableaux bien structurés et lisibles en HTML. Souvenez-vous, la pratique rend parfait, donc n'ayez pas peur d'expérimenter avec ces balises. Avant de savoir dire ouf, vous créerez des tableaux qui feront la fierté de n'importe quel analyste de données !

Credits: Image by storyset