Tableaux simples

Présentez des données en lignes et en colonnes avec les balises table, tr, th et td.

6 min · 3 questions

Un emploi du temps, une liste de prix, un classement sportif : certaines informations se lisent naturellement en lignes et en colonnes. C'est le rôle du tableau HTML. Trois balises suffisent pour commencer : <table> englobe tout le tableau, <tr> (table row) crée une ligne, et <td> (table data) crée une cellule à l'intérieur d'une ligne.

<table>
  <tr>
    <td>Pomme</td>
    <td>0,50 euro</td>
  </tr>
  <tr>
    <td>Banane</td>
    <td>0,30 euro</td>
  </tr>
</table>

Pour donner un titre à chaque colonne, on remplace <td> par <th> (table header, en-tête de tableau) dans la première ligne. Le navigateur affiche ces cellules d'en-tête en gras et centrées, ce qui les distingue des données.

<table>
  <tr>
    <th>Fruit</th>
    <th>Prix</th>
  </tr>
  <tr>
    <td>Pomme</td>
    <td>0,50 euro</td>
  </tr>
</table>

Le navigateur construit le tableau ligne par ligne : la première cellule de chaque <tr> tombe dans la première colonne, la deuxième cellule dans la deuxième colonne, et ainsi de suite. Par défaut, un tableau s'affiche sans bordures visibles : c'est normal, l'apparence (traits, couleurs, espacements) se réglera plus tard avec le CSS.

Quiz de validation

Vérifiez que vous avez bien retenu les points clés de cette leçon.

1. Quelle balise crée une ligne de tableau ?
   • <td>
   • <tr>
   • <table>
   • <ligne>
2. Quelle est la différence entre <td> et <th> ?
   • <th> crée une cellule d'en-tête, <td> une cellule de données
   • <th> crée un tableau entier, <td> une ligne
   • Aucune, les deux sont interchangeables
3. À quoi doit servir un tableau HTML ?
   • À mettre en page l'ensemble du site
   • À présenter des données en lignes et colonnes
   • À remplacer les listes à puces