Cours HTML / Créer un tableau avec table, tr, th et td

Utilisez un tableau HTML pour des données dont les valeurs sont liées par des lignes et des colonnes. Un élément table contient des lignes (tr) ; chaque ligne a des cellules d'en-tête (th) ou des cellules de données (td). N'utilisez pas un tableau simplement pour positionner des parties d'une page.

La structure de base du tableau

Ce petit tableau enregistre combien de fruits sont en stock. La première ligne nomme les colonnes ; les lignes suivantes contiennent les valeurs.

<table>

  <tr>

    <th>Fruit</th>

    <th>Stock</th>

  </tr>

  <tr>

    <td>Pommes</td>

    <td>12 pièces</td>

  </tr>

  <tr>

    <td>Poires</td>

    <td>8 pièces</td>

  </tr>

</table>

Les données apparaissent par ligne et colonne comme suit :

Collez le code dans le body d'un fichier HTML. Chaque tr forme une ligne horizontale, et ses cellules apparaissent de gauche à droite. Le style de table par défaut du navigateur peut montrer peu ou pas de bordure ; ajoutez des bordures avec du CSS uniquement après que la structure des données est correcte. Lors de la planification d'une table, esquissez d'abord ses colonnes et ses lignes. Pour ajouter un autre fruit, ajoutez une autre ligne de données avec un nom de fruit et une valeur de stock.

Séparer les lignes d'en-tête et de corps

Utilisez thead et tbody lorsque vous souhaitez regrouper explicitement les lignes d'en-tête et de données. Une ligne de résumé peut être placée dans tfoot. Ces éléments organisent les lignes ; ils ne créent pas de couleurs ni de bordures par eux-mêmes. Vous pouvez les omettre dans un petit tableau, bien que le parseur HTML du navigateur puisse insérer un tbody dans l'arborescence du document même lorsqu'il n'a pas été écrit dans la source.

<table>

  <thead>

    <tr><th>Fruit</th><th>Stock</th></tr>

  </thead>

  <tbody>

    <tr><td>Pommes</td><td>12 pièces</td></tr>

    <tr><td>Poires</td><td>8 pièces</td></tr>

  </tbody>

</table>

Choisissez des cellules d'en-tête et des cellules de données

Utilisez th lorsqu'une valeur identifie une ligne ou une colonne ; utilisez td pour les données associées à cet en-tête. Ne choisissez pas th simplement pour mettre le texte en gras. Un tableau peut avoir à la fois des en-têtes de colonnes et des en-têtes de lignes. Incluez les unités, soit à côté de chaque chiffre, soit dans un en-tête approprié. Une valeur seule telle que « 12 » peut ne pas indiquer aux lecteurs si elle signifie des articles ou un prix. Comparez la légende, la portée et les cellules fusionnées en utilisant les tableaux réels dans Tableaux accessibles : caption, scope et cellules fusionnées.

Une fois les bases claires, vous pouvez ajouter caption pour nommer le tableau, scope pour clarifier les relations d'en-tête, et colspan ou rowspan lorsqu'une cellule couvre réellement plusieurs positions. La référence de table sur MDN décrit ces fonctionnalités.

Dans un vrai fichier HTML, enveloppez un tableau large comme suit. Le CSS overflow-x permet un défilement horizontal sans supprimer de données ni modifier le sens du tableau.

<div class="table-scroll">
  <table>
    <!-- Insérez ici les lignes du tableau précédent. -->
  </table>
</div>

.table-scroll { max-width: 100%; overflow-x: auto; }

Résoudre un tableau mal aligné

Vérifiez que chaque ligne ordinaire contient le nombre attendu de cellules. Des nombres non correspondants peuvent placer les données sous le mauvais en-tête. Si un tableau large est tronqué sur un écran étroit, envisagez une zone de défilement horizontal plutôt que de comprimer le contenu jusqu'à le rendre illisible. N'insérez pas des espaces répétés à l'intérieur des cellules pour imiter des colonnes ; l'alignement et les bordures appartiennent au CSS, tandis que les relations de données appartiennent au HTML.