Les tableaux en HTML

1. Élément <table>

HTML offre un moyen pratique de présenter des données sous une forme structurée grâce aux tableaux. Les tableaux aident à organiser les informations en rangées et colonnes, ce qui les rend utiles pour présenter des données numériques, des horaires, des listes de prix et d'autres ensembles de données structurées. Regardons comment utiliser les balises principales pour créer des tableaux : <table>, <tr>, <td> et <th>.

La balise <table> sert de conteneur pour tout le tableau. Elle est utilisée pour marquer le début et la fin du tableau et contient toutes les autres balises liées au tableau.

Exemple de création d'un tableau avec la balise <table> :

<table>
  <!-- Ici se trouvent les rangées et cellules du tableau -->
</table>

La balise <table> peut être stylisée en ajoutant un attribut border pour définir une bordure au tableau :

<table border="1">
  <tr>
    <td>Exemple de cellule</td>
  </tr>
</table>

Ici, l'attribut border="1" ajoute une bordure autour du tableau et de ses cellules, les rendant visibles.

2. Élément <tr>

La balise <tr> représente une rangée du tableau (table row). Chaque rangée doit être contenue dans une balise <tr>, qui se trouve à l'intérieur de <table>.

Exemple :

<table border="1">
  <tr>
    <td>Cellule 1</td>
    <td>Cellule 2</td>
  </tr>
  <tr>
    <td>Cellule 3</td>
    <td>Cellule 4</td>
  </tr>
</table>

Dans cet exemple, le tableau se compose de deux rangées. Chaque rangée contient deux cellules.

3. Élément <td>

La balise <td> (table data) est utilisée pour créer des cellules contenant des données dans un tableau. Elle représente une cellule de tableau standard, qui peut contenir du texte, une image ou un autre contenu HTML.

Exemple d'utilisation de <td> :

<table border="1">
  <tr>
    <td>Cellule 1</td>
    <td>Cellule 2</td>
  </tr>
</table>

<table border="1">
  <tr>
    <td>Cellule 1</td>
    <td>Cellule 2</td>
  </tr>
</table>

Les cellules <td> contiennent le contenu principal du tableau et se trouvent à l'intérieur des rangées <tr>.

4. Élément <th>

La balise <th> (table header) est utilisée pour créer des en-têtes dans le tableau. Les cellules créées avec <th> sont, par défaut, en gras et centrées. C'est pratique pour représenter les en-têtes des colonnes ou des rangées.

Exemple de tableau avec des en-têtes :

    
<table border="1">
  <tr>
    <th>Nom</th>
    <th>Âge</th>
  </tr>
  <tr>
    <td>Anna</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Ivan</td>
    <td>30</td>
  </tr>
<table border="1">
    
  

    
<table border="1">
  <tr>
    <th>Nom</th>
    <th>Âge</th>
  </tr>
  <tr>
    <td>Anna</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Ivan</td>
    <td>30</td>
</tr>
<table border="1">
    
  

Dans cet exemple, <th> est utilisé pour indiquer les en-têtes « Nom » et « Âge », permettant aux utilisateurs de comprendre rapidement ce que signifient les données de chaque colonne.