Commençons par aborder les tableaux. Plus précisément, nous allons examiner l'organisation du texte suivante :

Tableaux

Les tableaux en HTML sont utilisés pour afficher des données sous forme de lignes et de colonnes, offrant ainsi un moyen structuré d'organiser l'information.

Création de tableaux

La balise <table> est utilisée pour créer un tableau en HTML. Les tableaux sont composés de lignes (<tr>) et de cellules (<td>), qui définissent la structure et le contenu du tableau. La structure de base d'un tableau sera la suivante.
Exemple :

Dans l'exemple ci-dessus :

• La balise <table> est utilisée pour créer un tableau ;
• Chaque balise <tr> représente une ligne du tableau ;
• À l'intérieur de chaque ligne, les balises <td> représentent les cellules, définissant le contenu de chaque cellule.

Bien que l'on puisse s'arrêter ici avec les tableaux, il est possible d'améliorer leur sémantique afin de faciliter la compréhension de leur contenu par les moteurs de recherche.

En-têtes de tableau

La balise <th> définit les en-têtes de tableau représentant les titres de colonnes ou de lignes. Elle doit être utilisée dans la section <thead> d’un tableau.
Exemple :

Dans l’exemple ci-dessus :

• La section <thead> contient des cellules d’en-tête de tableau définies à l’aide de la balise <th> ;
• Chaque balise <th> représente une cellule d’en-tête.

Corps du tableau

La section tbody doit se trouver après la section thead et englober toutes les données du tableau à l'exception des en-têtes. Tous les éléments à l'intérieur de tbody restent inchangés.
Exemple :

Résumé

Les tableaux sont structurés avec une hiérarchie d’éléments :

1. Tableau

La balise <table> est l’élément parent qui définit l’ensemble du tableau. Elle contient toutes les lignes et colonnes du tableau.

<table></table>

2. En-tête de tableau

La balise <thead> est utilisée pour regrouper les lignes d’en-tête du tableau. Elle contient une ou plusieurs lignes (<tr>) de cellules d’en-tête (<th>), définissant les titres des colonnes.

<table>
  <thead></thead>
</table>

3. Corps de tableau

La balise <tbody> est utilisée pour regrouper les lignes principales du contenu du tableau. Elle contient une ou plusieurs lignes (<tr>) de cellules de données (<td>), définissant le contenu principal du tableau.

<table>
  <thead></thead>
  <tbody></tbody>
</table>

4. Lignes de tableau

La balise <tr> représente une ligne à l’intérieur du tableau. Elle contient une ou plusieurs cellules de tableau (<td> ou <th>), définissant le contenu de chaque colonne dans la ligne.

<table>
  <thead>
    <tr></tr>
  </thead>
  <tbody>
    <tr></tr>
    <tr></tr>
  </tbody>
</table>

5. Cellules de tableau

La balise <td> représente une cellule de données standard à l'intérieur du corps du tableau. La balise <th> représente une cellule d'en-tête à l'intérieur de l'en-tête du tableau. Chaque cellule contient le contenu réel du tableau, tel que du texte, des images ou d'autres éléments HTML.

<table>
  <thead>
    <tr>
      <th>Heading 1</th>
      <th>Heading 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Text 1</td>
      <td>Text 2</td>
    </tr>
    <tr>
      <td>Text 3</td>
      <td>Text 4</td>
    </tr>
  </tbody>
</table>

Tutoriel vidéo