Docs HTML exécutables : Tableau HTML

Q: Comment créer un tableau en HTML ?

Entourez-le de , écrivez un par ligne, et placez les cellules à l'intérieur : pour les cellules d'en-tête et pour les cellules de données. Chaque ligne doit avoir le même nombre de cellules, sauf si certaines cellules s'étendent sur plusieurs colonnes.

Q: Comment rendre un tableau HTML responsive ?

Placez le tableau dans un conteneur avec overflow-x: auto. Sur un écran étroit, le tableau défile horizontalement dans le conteneur au lieu d'élargir toute la page.

Comment faire un tableau en HTML

Un tableau est un élément <table> composé de lignes (<tr>), et chaque ligne est composée de cellules : <th> pour les cellules d'en-tête et <td> pour les cellules de données.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Table</title>
  <style>
    th, td { border: 1px solid #9ca3af; padding: 6px 10px; }
  </style>
</head>
<body>
  <table>
    <tr>
      <th>Name</th>
      <th>Language</th>
      <th>Year</th>
    </tr>
    <tr>
      <td>Ada</td>
      <td>Python</td>
      <td>2023</td>
    </tr>
    <tr>
      <td>Linus</td>
      <td>C</td>
      <td>2021</td>
    </tr>
  </table>
</body>
</html>

Le tableau n'a pas de bordures à lui ; l'unique règle CSS les ajoute pour que vous voyiez les cellules. Les colonnes viennent des cellules : la première cellule de chaque ligne forme la colonne un, la deuxième la colonne deux, et ainsi de suite. Chaque ligne doit avoir le même nombre de cellules. Supprimez un <td> et cette ligne s'arrête plus tôt, en laissant un trou.

Les cellules <th> sont en gras et centrées par défaut. Ce n'est que l'apparence ; ce qui compte, c'est qu'elles sont des étiquettes, le sujet de la section suivante.

Les éléments d'un tableau

Élément	Rôle
`<table>`	Le tableau
`<caption>`	Le titre du tableau, premier enfant de `<table>`
`<thead>`	Le groupe des lignes d'en-tête
`<tbody>`	Le groupe des lignes du corps (un tableau peut en avoir plusieurs)
`<tfoot>`	Le groupe des lignes de pied, comme les totaux
`<tr>`	Une ligne
`<th>`	Une cellule d'en-tête
`<td>`	Une cellule de données
`<colgroup>`, `<col>`	Des colonnes, pour styliser une colonne entière (largeurs, fond)

Les bordures sont présentées dans bordure de tableau HTML, et les cellules qui s'étendent sur plusieurs colonnes ou lignes dans colspan et rowspan.

Cellules d'en-tête, scope et caption

Un tableau avec des en-têtes en haut et sur le côté doit indiquer dans quel sens pointe chaque en-tête. scope="col" nomme la colonne en dessous, scope="row" nomme la ligne à côté. <caption> donne au tableau un titre visible :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Headers and caption</title>
  <style>
    table { border-collapse: collapse; font-family: system-ui, sans-serif; }
    caption { font-weight: bold; padding-bottom: 6px; }
    th, td { border: 1px solid #9ca3af; padding: 6px 10px; }
    thead th { background: #e5e7eb; }
    tbody th { text-align: start; }
  </style>
</head>
<body>
  <table>
    <caption>Opening hours</caption>
    <thead>
      <tr>
        <th scope="col">Day</th>
        <th scope="col">Opens</th>
        <th scope="col">Closes</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Monday</th>
        <td>9:00</td>
        <td>17:00</td>
      </tr>
      <tr>
        <th scope="row">Saturday</th>
        <td>10:00</td>
        <td>14:00</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

Avec ce balisage, un lecteur d'écran qui arrive sur la cellule 14:00 peut annoncer « Saturday, Closes, 14:00 », donc le nombre n'est jamais lu seul. Pour un tableau simple avec une seule ligne d'en-tête, les navigateurs déduisent généralement les en-têtes sans scope, mais l'écrire ne coûte rien et supprime les suppositions.

La légende est aussi ce qu'annonce un lecteur d'écran quand il atteint le tableau. Préférez-la à un titre placé au-dessus du tableau, qui n'y est pas relié.

thead, tbody et tfoot

Les trois groupes répartissent les lignes en en-tête, corps et pied. Le pied est l'endroit des totaux :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>thead tbody tfoot</title>
  <style>
    table { border-collapse: collapse; font-family: system-ui, sans-serif; }
    th, td { padding: 6px 12px; border-bottom: 1px solid #e5e7eb; }
    thead th { border-bottom: 2px solid #111827; text-align: start; }
    tfoot td, tfoot th { border-top: 2px solid #111827; font-weight: bold; }
    .num { text-align: end; font-variant-numeric: tabular-nums; }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr><th scope="col">Item</th><th scope="col" class="num">Price</th></tr>
    </thead>
    <tbody>
      <tr><td>Notebook</td><td class="num">4.50</td></tr>
      <tr><td>Pens (10)</td><td class="num">11.20</td></tr>
      <tr><td>Backpack</td><td class="num">39.00</td></tr>
    </tbody>
    <tfoot>
      <tr><th scope="row">Total</th><td class="num">54.70</td></tr>
    </tfoot>
  </table>
</body>
</html>

Deux détails rendent les nombres lisibles : text-align: end aligne les virgules décimales (chaque prix a deux décimales), et font-variant-numeric: tabular-nums donne à chaque chiffre la même largeur.

Si vous écrivez <tr> directement dans <table>, comme dans le premier exemple, le navigateur ajoute quand même un <tbody> autour des lignes. C'est pourquoi un sélecteur CSS comme table > tr ne trouve jamais rien : dans la page, les lignes sont dans tbody. Utilisez table tr, ou écrivez vous-même le <tbody>.

Styliser un tableau : lignes zébrées, survol et largeur

:nth-child colore une ligne sur deux, :hover met en évidence la ligne sous le pointeur, et width: 100% étire le tableau sur toute la largeur de son conteneur :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Striped table</title>
  <style>
    table { width: 100%; border-collapse: collapse; font-family: system-ui, sans-serif; }
    th, td { padding: 8px 12px; text-align: start; }
    thead th { background: #2563eb; color: #fff; }
    tbody tr:nth-child(even) { background: #f3f4f6; }
    tbody tr:hover { background: #dbeafe; }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr><th scope="col">Course</th><th scope="col">Lessons</th><th scope="col">Level</th></tr>
    </thead>
    <tbody>
      <tr><td>HTML</td><td>40</td><td>Beginner</td></tr>
      <tr><td>CSS</td><td>55</td><td>Beginner</td></tr>
      <tr><td>JavaScript</td><td>120</td><td>Beginner</td></tr>
      <tr><td>React</td><td>60</td><td>Intermediate</td></tr>
    </tbody>
  </table>
</body>
</html>

text-align: start aligne le texte des en-têtes sur les données en dessous ; sinon, th est centré. start plutôt que left garde un alignement correct dans les langues de droite à gauche.

Des tableaux responsives qui défilent

Un tableau ne peut pas se réduire en dessous de la largeur de son contenu. Sur un téléphone, un tableau large pousse toute la page sur le côté. Placez-le plutôt dans un conteneur qui défile :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Scrolling table</title>
  <style>
    .scroll { max-width: 300px; overflow-x: auto; border: 1px solid #e5e7eb; }
    table { border-collapse: collapse; white-space: nowrap; }
    th, td { padding: 6px 12px; border-bottom: 1px solid #e5e7eb; text-align: start; }
  </style>
</head>
<body>
  <div class="scroll" tabindex="0" role="region" aria-label="Plans">
    <table>
      <thead>
        <tr><th scope="col">Plan</th><th scope="col">Price</th><th scope="col">Courses</th><th scope="col">Certificates</th><th scope="col">Support</th></tr>
      </thead>
      <tbody>
        <tr><td>Free</td><td>0</td><td>Some</td><td>No</td><td>Community</td></tr>
        <tr><td>Pro</td><td>12 per month</td><td>All</td><td>Yes</td><td>Email</td></tr>
      </tbody>
    </table>
  </div>
</body>
</html>

Le conteneur est limité ici à 300 pixels pour imiter un écran de téléphone ; faites-le défiler horizontalement. tabindex="0" permet aux utilisateurs au clavier de mettre le focus sur le conteneur et de le faire défiler avec les flèches, et role="region" avec un aria-label donne un nom à cet arrêt.

Les tableaux sont faits pour les données

Utilisez un tableau quand le contenu a vraiment des lignes et des colonnes : prix, horaires, comparaisons, résultats. Ne vous en servez pas pour placer des éléments côte à côte dans la page. Les tableaux de mise en page déroutent les lecteurs d'écran, qui annoncent des lignes et des colonnes sans aucun sens, et ils ne s'adaptent pas aux petits écrans. La mise en page, c'est le rôle de flexbox et grid en CSS.

Erreurs fréquentes

Des lignes avec des nombres de cellules différents. Les lignes courtes s'arrêtent plus tôt et les colonnes ne s'alignent plus.
Utiliser <td> avec du texte en gras pour les en-têtes. Utilisez <th> pour que les en-têtes soient de vraies étiquettes.
Les attributs obsolètes border, cellpadding, cellspacing, bgcolor et align. Utilisez le CSS à la place.
Mettre du contenu directement dans <tr> ou <table>, hors de toute cellule. Les navigateurs le sortent du tableau, en général au-dessus.
Un titre au-dessus du tableau au lieu d'un <caption>.
table > tr en CSS. Le navigateur a inséré un <tbody> ; écrivez table tr ou tbody tr.

Questions fréquentes

Comment créer un tableau en HTML ?

Entourez-le de <table>, écrivez un <tr> par ligne, et placez les cellules à l'intérieur : <th> pour les cellules d'en-tête et <td> pour les cellules de données. Chaque ligne doit avoir le même nombre de cellules, sauf si certaines cellules s'étendent sur plusieurs colonnes.

Quelle est la différence entre th et td ?

<th> est une cellule d'en-tête qui nomme une colonne ou une ligne, et <td> est une cellule de données. Les navigateurs affichent <th> en gras et centré, et les lecteurs d'écran lisent l'en-tête correspondant avant chaque cellule de données pour que les nombres aient un sens.

À quoi servent thead, tbody et tfoot ?

Ils regroupent les lignes en en-tête, corps et pied (les totaux) du tableau. Ils rendent la structure claire pour les technologies d'assistance, donnent une prise au CSS, et quand un long tableau est imprimé, les navigateurs peuvent répéter le <thead> sur chaque page.

Pourquoi mon tableau HTML n'a pas de bordures ?

Les tableaux n'ont pas de bordures par défaut. Ajoutez-les en CSS : table { border-collapse: collapse; } th, td { border: 1px solid #ccc; }. L'ancien attribut border="1" est obsolète.

Comment rendre un tableau HTML responsive ?

Placez le tableau dans un conteneur avec overflow-x: auto. Sur un écran étroit, le tableau défile horizontalement dans le conteneur au lieu d'élargir toute la page.

Concepts liés