HTML <table> Tag

La balise <table> définit un tableau HTML. C'est un conteneur pour les éléments qui constituent les lignes, les cellules et les en-têtes du tableau, affichant des données tabulaires — des informations ayant une relation significative entre les lignes et les colonnes.

Cette page explique comment structurer correctement un tableau, comment le rendre accessible aux lecteurs d'écran, et quelles propriétés CSS remplacent les anciens attributs de présentation qui ne sont plus valides en HTML5.

Structure d'un tableau

Un tableau est construit à partir de plusieurs éléments coopérants :

<tr> définit une ligne de tableau.
<th> définit une cellule d'en-tête — son texte est en gras et centré par défaut.
<td> définit une cellule de données.
<caption> donne un titre au tableau.
<thead>, <tbody> et <tfoot> regroupent les lignes d'en-tête, de corps et de pied de page.
<colgroup> permet d'appliquer un style à des colonnes entières.

Regrouper les lignes avec <thead> et <tbody> va au-delà d'un balisage ordonné : cela indique au navigateur (et aux technologies d'assistance) quelle ligne est l'en-tête. Cela permet également au corps de défiler pendant que l'en-tête reste fixe, et de styliser séparément les lignes d'en-tête et de corps.

Astuce

Utilisez <th> pour toute cellule qui identifie une ligne ou une colonne. Sa valeur principale est l'accessibilité : les lecteurs d'écran annoncent l'en-tête lors de la lecture d'une cellule de données, de sorte qu'un utilisateur qui ne peut pas voir la grille sait toujours ce que chaque valeur signifie. En bonus, les cellules d'en-tête sont en gras et centrées par défaut et aident les moteurs de recherche à comprendre la structure du tableau.

Syntaxe

La balise <table> fonctionne par paires. Le contenu est écrit entre les balises d'ouverture (<table>) et de fermeture (</table>).

Exemple de la balise HTML `<table>` :

Balise HTML <table>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        width: 80%;
        margin: 30px auto;
        border-collapse: collapse;
      }
      th,
      td {
        padding: 10px;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <table>
      <caption>Upcoming release dates</caption>
      <thead>
        <tr>
          <th scope="col">Month</th>
          <th scope="col">Date</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">June</th>
          <td>10.06.2018</td>
        </tr>
        <tr>
          <th scope="row">July</th>
          <td>15.07.2018</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Essayez vous-même »

Résultat

Rendre les tableaux accessibles

Une grille visuellement formatée est facile à parcourir des yeux, mais un lecteur d'écran annonce les cellules une à une. Ces fonctionnalités lui fournissent le contexte nécessaire :

<caption> est le nom accessible du tableau. Placez-le comme premier enfant de <table>. Les utilisateurs de lecteurs d'écran l'entendent lorsqu'ils arrivent sur le tableau, ce qui leur permet de savoir de quoi traitent les données avant de les explorer.
<th scope="col"> marque une cellule comme en-tête de toute sa colonne ; <th scope="row"> la marque comme en-tête de sa ligne. Avec ces attributs en place, un lecteur d'écran peut annoncer « Month: June » au lieu de simplement « June », reliant chaque valeur à son étiquette.

Pour les tableaux complexes — où une cellule est liée à des en-têtes qui ne se trouvent pas simplement en haut de sa colonne ou au début de sa ligne (par exemple, des en-têtes qui s'étendent sur plusieurs colonnes) — scope ne suffit pas. Utilisez le modèle headers/id : donnez à chaque <th> un id unique, puis listez les ids concernés dans l'attribut headers de chaque <td>.

<table>
  <caption>Quarterly revenue by region</caption>
  <thead>
    <tr>
      <th id="region">Region</th>
      <th id="q1">Q1</th>
      <th id="q2">Q2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th id="europe" headers="region">Europe</th>
      <td headers="europe q1">120</td>
      <td headers="europe q2">150</td>
    </tr>
  </tbody>
</table>

Attributs

Danger

Les attributs de la balise <table> ne sont pas pris en charge en HTML5. Pour styliser les tableaux, utilisez les propriétés CSS listées ci-dessous.

Attribut	Valeur	Description	Propriété CSS
align	left center right	Définit comment le tableau doit être aligné par rapport au texte environnant. Non pris en charge en HTML5.	margin
bgcolor	rgb(x,x,x) #xxxxxx colorname	Définit la couleur d'arrière-plan d'un tableau. Non pris en charge en HTML5.	background-color
border	1 0	Définit la taille du cadre entourant le tableau. Non pris en charge en HTML5.	border
cellpadding	pixels	Définit l'espace entre la paroi de la cellule et le contenu de la cellule. Non pris en charge en HTML5.	padding
cellspacing	pixels	Définit l'espace entre les cellules. Non pris en charge en HTML5.	border-spacing
frame	void above below hsides lhs rhs vsides box border	Définit quel côté du cadre entourant le tableau doit être affiché. Non pris en charge en HTML5.	border-style border-width
rules	none groups rows cols all	Définit quelles parties des bordures intérieures doivent être visibles. Non pris en charge en HTML5.	border (Utilisez cette propriété en correspondance avec les balises HTML thead, tbody, tfoot, col ou colgroup).
width	pixels	Définit la largeur d'un tableau. Non pris en charge en HTML5.	width

La balise <table> prend également en charge les attributs globaux et les attributs d'événement.

Remplacer les anciens attributs par CSS

Les attributs de présentation ci-dessus (border, cellpadding, cellspacing, align, bgcolor, etc.) sont obsolètes en HTML5. Stylisez le tableau avec CSS à la place. Cet exemple reproduit un tableau avec bordures, espacement et centrage sans aucun attribut déprécié :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        /* width="80%" + align="center" */
        width: 80%;
        margin: 30px auto;
        /* cellspacing="0" — collapse the double borders */
        border-collapse: collapse;
        /* bgcolor on the table */
        background-color: #f9f9f9;
      }
      th,
      td {
        /* border="1" */
        border: 1px solid #666;
        /* cellpadding="10" */
        padding: 10px;
        /* align="left" inside cells */
        text-align: left;
      }
    </style>
  </head>
  <body>
    <table>
      <caption>Styled with CSS, not attributes</caption>
      <thead>
        <tr>
          <th scope="col">Month</th>
          <th scope="col">Date</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">June</th>
          <td>10.06.2018</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Une correspondance rapide des attributs les plus courants avec leurs remplacements CSS :

border → border
cellpadding → padding sur <th>/<td>
cellspacing → border-spacing, ou border-collapse: collapse pour supprimer les espaces
align → margin (tableau) ou text-align (cellules)
bgcolor → background-color
width → width

N'utilisez pas les tableaux pour la mise en page

Un <table> ne doit contenir que des données tabulaires — du contenu ayant de vraies relations ligne/colonne. N'utilisez pas de tableau pour positionner des régions de la page comme des barres latérales, la navigation ou des colonnes de texte. Les tableaux de mise en page désorganisent les lecteurs d'écran (qui essaient d'annoncer des relations en-tête/cellule qui n'existent pas) et sont rigides et difficiles à rendre responsives.

Pour la mise en page, utilisez plutôt le CSS moderne :

CSS Grid pour les mises en page à deux dimensions (lignes et colonnes) — le remplaçant naturel des structures de page en grille.
Flexbox pour les mises en page à une dimension, comme une rangée de cartes ou une barre de navigation.

Consultez les modèles de mise en page HTML pour des structures prêtes à l'emploi.

Pratique

Laquelle des affirmations suivantes concernant les éléments de tableau HTML est correcte ?

L'élément td définit une cellule de données, l'élément th définit une cellule d'en-tête, et tr définit une ligne.L'élément th est utilisé pour créer une note de bas de page au bas du tableau.L'élément td est le seul moyen d'insérer des images dans une page web.L'élément caption doit être placé après la balise de fermeture du tableau.