Tableaux de données

01Utiliser un tableau pour des données liées

Les tableaux conviennent quand les lignes et les colonnes représentent des données liées. Ne les utilisez pas pour placer l’en-tête, la barre latérale ou le pied de page.

<table>
  <caption>Material comparison</caption>
  <tr><th scope="col">Material</th><th scope="col">Finish</th></tr>
  <tr><td>Oak</td><td>Natural</td></tr>
</table>

02Bien identifier les en-têtes

Utilisez th pour les en-têtes et td pour les données. L’attribut scope précise si un en-tête concerne une ligne ou une colonne. La balise caption donne un titre utile au tableau.

<tr>
  <th scope="row">Kitchen</th>
  <td>Made to measure</td>
</tr>

03S’adapter aux petits écrans

Placez un tableau trop large dans un conteneur avec défilement horizontal. Conservez la structure du tableau plutôt que de réduire le texte jusqu’à le rendre illisible.

<div class="table-scroll">...</div>
<style>
.table-scroll { overflow-x: auto; }
th, td { padding: 12px; text-align: left; }
</style>

04À vous de jouer

Ajoutez une ligne au tableau et gardez des en-têtes explicites.

Pour aller plus loin

Consultez les guides MDN et standard HTML Living Standard pour approfondir et connaître les bonnes pratiques des navigateurs actuels.