HTML - En-têtes et légende

Définir les en-têtes de tableau

Dans les tableaux HTML, les en-têtes étiquettent les colonnes ou les lignes de données. Pour définir un en-tête de tableau, utilisez la balise <th>. La balise <th> est placée à l'intérieur de la balise <tr> (ligne de tableau), comme les cellules de tableau normales (<td>). La principale différence entre les balises <th> et <td> est que <th> est utilisée pour les cellules d'en-tête, qui ont généralement une police en gras et un alignement de texte centré par défaut.

<table>
  <tr>
    <th>En-tête 1</th>
    <th>En-tête 2</th>
    <th>En-tête 3</th>
  </tr>
  <tr>
    <td>Donnée 1</td>
    <td>Donnée 2</td>
    <td>Donnée 3</td>
  </tr>
</table>

La première ligne contient trois balises <th>, définissant les en-têtes pour chaque colonne. La deuxième ligne contient des balises <td> normales avec les données réelles.

Attributs des en-têtes de tableau

Les en-têtes de tableau ont quelques attributs spéciaux qui peuvent être utilisés pour améliorer la structure et l'accessibilité du tableau :

1. colspan : L'attribut colspan permet à une cellule d'en-tête de s'étendre sur plusieurs colonnes. Par exemple, <th colspan="2">En-tête</th> créerait une cellule d'en-tête qui s'étend sur deux colonnes.

2. rowspan : L'attribut rowspan permet à une cellule d'en-tête de s'étendre sur plusieurs lignes. Par exemple, <th rowspan="3">En-tête</th> créerait une cellule d'en-tête qui s'étend sur trois lignes.

3. scope : L'attribut scope est utilisé pour associer une cellule d'en-tête aux cellules de données qu'elle décrit. C'est important pour l'accessibilité, car cela aide les lecteurs d'écran à comprendre la relation entre les en-têtes et les données. L'attribut scope peut avoir les valeurs suivantes :

   • row : L'en-tête s'applique à la ligne.
   • col : L'en-tête s'applique à la colonne.
   • rowgroup : L'en-tête s'applique à un groupe de lignes.
   • colgroup : L'en-tête s'applique à un groupe de colonnes.

<table>
  <tr>
    <th colspan="2">En-tête 1 & 2</th>
    <th>En-tête 3</th>
  </tr>
  <tr>
    <th rowspan="2" scope="row">En-tête 4</th>
    <td>Donnée 1</td>
    <td>Donnée 2</td>
  </tr>
  <tr>
    <td>Donnée 3</td>
    <td>Donnée 4</td>
  </tr>
</table>

La première cellule d'en-tête s'étend sur deux colonnes en utilisant colspan, la quatrième cellule d'en-tête s'étend sur deux lignes en utilisant rowspan, et l'attribut scope est utilisé pour indiquer que le quatrième en-tête s'applique à la ligne.

L'utilisation d'en-têtes de tableau avec les attributs appropriés aide à créer des tableaux bien structurés et accessibles en HTML.

Ajouter une légende à un tableau

Une légende de tableau est une brève description du contenu ou de l'objectif du tableau. Pour ajouter une légende à un tableau HTML, utilisez la balise <caption>. La balise <caption> doit être placée juste après la balise d'ouverture <table>, avant tout élément <tr>, <th> ou <td>.

<table>
  <caption>Données salariales des employés</caption>
  <tr>
    <th>Nom</th>
    <th>Poste</th>
    <th>Salaire</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>Manager</td>
    <td>80 000 €</td>
  </tr>
  <tr>
    <td>Jane Smith</td>
    <td>Développeuse</td>
    <td>75 000 €</td>
  </tr>
</table>

Styliser les légendes de tableau

Par défaut, les légendes de tableau sont affichées au-dessus du tableau et centrées. Cependant, vous pouvez utiliser CSS pour styliser et positionner la légende selon vos besoins.

Pour styliser une légende de tableau, ciblez l'élément <caption> dans votre CSS :

table caption {
  font-size: 1.2em;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}

Pour positionner la légende en dessous du tableau au lieu d'au-dessus, utilisez la propriété CSS caption-side :

table caption {
  caption-side: bottom;
}

La propriété caption-side accepte deux valeurs : top (par défaut) et bottom.

En utilisant la balise <caption> et en la stylisant avec CSS, vous pouvez fournir une description claire et attrayante pour vos tableaux HTML.