HTML premières étapes - leçon 5 - Tableaux

05/07/2025, by Ivan

Les tableaux sont l'un des moyens importants de stockage d'informations. Excel, Access et d'autres bases de données stockent les informations dans des tableaux. Les tableaux représentent visuellement les données, ce qui facilite la création de graphiques et de diagrammes à partir de ces données.
Dans cette leçon, nous allons apprendre comment créer des tableaux en HTML. Pour cela, nous utiliserons les balises <table>, <tr>, <td>, <th>, <thead>, <tbody>, <tfoot>.

La balise table

TABLE est la balise principale du tableau, elle contient les autres balises du tableau.

<table>
</table>

Toutes les autres balises seront écrites à l'intérieur de cette balise.

La balise tr

TR est la balise de ligne. Chaque ligne est encadrée par la balise <tr></tr>. Si nous voulons trois lignes dans le tableau, il faut trois paires de balises :

<table>
  <tr></tr>
  <tr></tr>
  <tr></tr>
</table>

La balise td

TD est la balise de cellule. Chaque cellule doit se trouver dans une balise de ligne. Pour que le tableau s'affiche correctement, le nombre de cellules doit correspondre. Faisons un tableau avec quatre cellules par ligne :

<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

Remplissons maintenant le tableau avec des données :

<table>
  <tr>
    <td>Numéro</td>
    <td>Nom</td>
    <td>Prénom</td>
    <td>Patronyme</td>
  </tr>
  <tr>
    <td>1</td>
    <td>Ivanov</td>
    <td>Ivan</td>
    <td>Ivanovich</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Petrov</td>
    <td>Petr</td>
    <td>Petrovich</td>
  </tr>
</table>

Nous pouvons maintenant structurer logiquement le tableau en le divisant en trois sections : thead (en-tête), tbody (corps) et tfoot (pied de tableau).

La balise tbody

TBODY n’est pas obligatoire, mais peut être insérée pour indiquer que c’est la partie principale du tableau.

<table>
  <tbody>
    <tr>
      <td>Numéro</td>
      <td>Nom</td>
      <td>Prénom</td>
      <td>Patronyme</td>
    </tr>
    <tr>
      <td>1</td>
      <td>Ivanov</td>
      <td>Ivan</td>
      <td>Ivanovich</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Petrov</td>
      <td>Petr</td>
      <td>Petrovich</td>
    </tr>
  </tbody>
</table>

La balise thead

THEAD est utilisée pour créer l’en-tête du tableau, essayez de placer la première ligne dans thead.

<table>
  <thead>
    <tr>
      <td>Numéro</td>
      <td>Nom</td>
      <td>Prénom</td>
      <td>Patronyme</td>
    </tr>
  </thead>
  <tbody>   
    <tr>
      <td>1</td>
      <td>Ivanov</td>
      <td>Ivan</td>
      <td>Ivanovich</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Petrov</td>
      <td>Petr</td>
      <td>Petrovich</td>
    </tr>
  </tbody>
</table>

Et maintenant, au lieu des cellules td, nous utilisons les cellules th pour indiquer que ce sont les titres des colonnes :

<table>
  <thead>
    <tr>
      <th>Numéro</th>
      <th>Nom</th>
      <th>Prénom</th>
      <th>Patronyme</th>
    </tr>
  </thead>
  <tbody>   
    <tr>
      <td>1</td>
      <td>Ivanov</td>
      <td>Ivan</td>
      <td>Ivanovich</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Petrov</td>
      <td>Petr</td>
      <td>Petrovich</td>
    </tr>
  </tbody>
</table>

Si votre navigateur est correct, les titres des colonnes seront mis en évidence, au moins en gras. Il reste encore la balise tfoot pour le pied de tableau.

La balise tfoot

TFOOT définit la légende en bas du tableau.

<table>
  <thead>
    <tr>
      <th>Numéro</th>
      <th>Nom</th>
      <th>Prénom</th>
      <th>Patronyme</th>
    </tr>
  </thead>
  <tbody>   
    <tr>
      <td>1</td>
      <td>Ivanov</td>
      <td>Ivan</td>
      <td>Ivanovich</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Petrov</td>
      <td>Petr</td>
      <td>Petrovich</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Table créée en 2012</td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tfoot>
</table>

L’attribut colspan

Un des attributs importants de la balise td est colspan, il permet de fusionner des cellules. Regardons notre pied de tableau. Nous avons 4 cellules, mais une seule est remplie, donc on peut fusionner ces quatre cellules. Utilisons l’attribut colspan.

<table>
  <thead>
    <tr>
      <th>Numéro</th>
      <th>Nom</th>
      <th>Prénom</th>
      <th>Patronyme</th>
    </tr>
  </thead>
  <tbody>   
    <tr>
      <td>1</td>
      <td>Ivanov</td>
      <td>Ivan</td>
      <td>Ivanovich</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Petrov</td>
      <td>Petr</td>
      <td>Petrovich</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="4">Table créée en 2012</td>
    </tr>
  </tfoot>
</table>

Maintenant, nous avons une grande cellule qui fait la largeur de 4 cellules. La valeur de l’attribut colspan correspond au nombre de cellules fusionnées.

Types de blocs supplémentaires (EBT) – Nouvelle expérience de Layout Builder❗

❗Types de paragraphes supplémentaires (EPT) – Nouvelle expérience Paragraphes