W3docs
fr
Se connecter

Tableaux CSS

Stylisez vos tableaux HTML avec CSS : couleur, fusion des bordures, largeur, hauteur, alignement du texte et espacement. Exemples inclus.

Les tableaux HTML rendus par défaut par le navigateur sont minimalistes : fines doubles bordures, cellules à l'étroit et aucune séparation visuelle entre les lignes. CSS les transforme en affichages de données lisibles et faciles à parcourir. Ce chapitre passe en revue les propriétés essentielles pour les tableaux — bordures, espacement, alignement et styles de lignes — et se termine par des modèles que vous réutiliserez encore et encore : séparateurs, mise en évidence au survol, zébrure et défilement horizontal sur les petits écrans.

Chaque exemple ci-dessous est une page complète et exécutable, vous pouvez donc l'ouvrir, modifier une valeur et voir l'effet immédiatement.

Propriétés de style des tableaux

Voici les propriétés CSS utilisées pour styliser un tableau. Les propriétés background-color et color définissent respectivement la couleur d'arrière-plan et la couleur du texte. La propriété border-collapse fusionne les bordures du tableau. La propriété text-align définit l'alignement horizontal du texte. Vous pouvez également utiliser height, width et padding pour les ajustements de mise en page.

Exemple de stylisation d'un tableau :

Exemple de stylisation de tableaux HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        width: 100%;
        border-collapse: collapse;
      }
      table,
      th,
      td {
        border: 1px solid black;
      }
      thead {
        background-color: #1c87c9;
        color: #ffffff;
      }
      th {
        text-align: center;
        height: 50px;
      }
      tbody tr:nth-child(odd) {
        background: #ffffff;
      }
      tbody tr:nth-child(even) {
        background: #f4f4f4;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>Heading</th>
          <th>Heading</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Some text</td>
          <td>Some text</td>
        </tr>
        <tr>
          <td>Some text</td>
          <td>Some text</td>
        </tr>
        <tr>
          <td>Some text</td>
          <td>Some text</td>
        </tr>
        <tr>
          <td>Some text</td>
          <td>Some text</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>
Essayez vous-même »

Résultat

Exemple de tableau

Expliquons le code ci-dessus.

Comme vous pouvez le constater, notre tableau comporte deux sections principales : la section <thead> pour les en-têtes et la section <tbody> pour les lignes de données. Le tableau utilise des bordures noires, appliquées via la propriété border. Vous pouvez utiliser la couleur et le style de bordure de votre choix.

Couleur du tableau

La ligne d'en-tête (<thead>) est bleue avec du texte blanc. Le fond bleu provient de la propriété background-color, et le texte blanc de la propriété color — toutes deux appliquées au sélecteur thead afin que chaque cellule d'en-tête à l'intérieur les hérite. Les cellules du corps retombent sur le texte noir par défaut de la page sur un fond blanc (ou zébré).

Fusionner les bordures

Par défaut, un tableau dessine deux bordures entre les cellules adjacentes — une pour chaque cellule — ce qui produit un espace visible et une ligne doublée. La propriété border-collapse contrôle ce comportement :

  • border-collapse: separate (la valeur par défaut) conserve les bordures distinctes pour chaque cellule.
  • border-collapse: collapse fusionne les bordures adjacentes en une seule ligne, donnant l'aspect propre et quadrillé utilisé dans tous les exemples de cette page.

Vous voudrez presque toujours utiliser collapse pour les tableaux de données.

Largeur et hauteur du tableau

Utilisez width sur le sélecteur table pour contrôler l'espace horizontal occupé par le tableau — width: 100% lui permet de remplir son conteneur, ce qui est le choix le plus courant. Utilisez height sur th (ou td) pour donner de l'espace aux lignes. Les deux acceptent des pixels (50px) pour une taille fixe ou des pourcentages (100%) pour une taille relative au parent. Notez qu'un height en pourcentage ne fonctionne que si le parent a une hauteur connue, donc les valeurs fixes sont plus fiables pour les lignes.

Alignement du texte dans un tableau

La propriété text-align définit l'alignement horizontal du contenu des cellules. Les navigateurs alignent par défaut le texte des <th> au center et le texte des <td> à left, vous ne définissez donc text-align que pour remplacer ce comportement — par exemple, text-align: center sur th pour conserver les en-têtes centrés, ou text-align: right pour aligner les colonnes numériques par leurs chiffres. La section suivante présente un exemple complet.

Espacement dans un tableau

Pour contrôler l'espace entre la bordure et le contenu dans un tableau, utilisez la propriété padding sur les éléments <td> et <th> :

Espacement des tableaux HTML

td, th {
  padding: 15px;
}

Alignement horizontal avec la propriété text-align

Grâce à la propriété CSS text-align, vous pouvez définir l'alignement horizontal du contenu dans <th> ou <td>.

Par défaut, le contenu des éléments <td> est aligné à gauche et le contenu des éléments <th> est centré. Dans l'exemple ci-dessous, le contenu des éléments <th> et <td> est aligné à droite :

Exemple d'alignement du contenu des éléments <th> et <td> à droite :

Exemple d'alignement du contenu des éléments <th> et <td> à droite

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table,
      td,
      th {
        border: 1px solid black;
      }
      table {
        border-collapse: collapse;
        width: 100%;
      }
      th,
      td {
       text-align: right;
      }
    </style>
  </head>
  <body>
    <h2>Horizontal alignment example</h2>
    <table>
      <thead>
        <tr>
          <th>Firstname</th>
          <th>Lastname</th>
          <th>Money</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Sherlock</td>
          <td>Holmes</td>
          <td>$200</td>
        </tr>
        <tr>
          <td>John</td>
          <td>Watson</td>
          <td>$250</td>
        </tr>
        <tr>
          <td>Mary</td>
          <td>Whatson</td>
          <td>$500</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>
Essayez vous-même »

Alignement vertical avec la propriété vertical-align

Grâce à la propriété CSS vertical-align, vous pouvez définir l'alignement vertical du contenu dans <th> ou <td>.

Par défaut, le contenu des éléments <th> et <td> est aligné verticalement au milieu.

Dans l'exemple ci-dessous, le contenu des éléments <td> est aligné verticalement en bas :

Exemple d'alignement vertical du contenu des éléments <td> en bas :

<!DOCTYPE html>
<html>
  <head>
    <style>
      table,
      td,
      th {
        border: 1px solid black;
      }
      table {
        border-collapse: collapse;
        width: 100%;
      }
      td {
        height: 50px;
        vertical-align: bottom;
        text-align: right;
        padding-right: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Vertical alignment example</h2>
    <table>
      <thead>
        <tr>
          <th>Firstname</th>
          <th>Lastname</th>
          <th>Money</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Sherlock</td>
          <td>Holmes</td>
          <td>$300</td>
        </tr>
        <tr>
          <td>John</td>
          <td>Watson</td>
          <td>$250</td>
        </tr>
        <tr>
          <td>Mary</td>
          <td>Watson</td>
          <td>$500</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>
Essayez vous-même »

Séparateurs horizontaux

En ajoutant la propriété CSS border-bottom aux éléments <td> et <th>, vous créerez des séparateurs horizontaux.

Exemple de création de séparateurs horizontaux :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        border-collapse: collapse;
        width: 100%;
      }
      th,
      td {
        padding: 10px;
        text-align: left;
        border-bottom: 1px solid #cccccc;
      }
    </style>
  </head>
  <body>
    <h2>Horizontal dividers example</h2>
    <table>
      <thead>
        <tr>
          <th>Firstname</th>
          <th>Lastname</th>
          <th>Money</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Sherlock</td>
          <td>Holmes</td>
          <td>$200</td>
        </tr>
        <tr>
          <td>John</td>
          <td>Watson</td>
          <td>$350</td>
        </tr>
        <tr>
          <td>Mary</td>
          <td>Watson</td>
          <td>$500</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>
Essayez vous-même »

Tableaux avec effet de survol

L'utilisation du sélecteur CSS :hover sur l'élément <tr> rend le tableau interactif au survol.

Exemple de création d'un tableau avec effet de survol :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        border-collapse: collapse;
        width: 100%;
      }
      tr {
        background-color: #f5f5f5;
      }
      th,
      td {
        padding: 15px;
        text-align: left;
        border-bottom: 1px solid #ccc;
      }
      tr:hover {
        background-color: #cdcdcd;
      }
    </style>
  </head>
  <body>
    <h2>Hoverable table example</h2>
    <table>
      <thead>
        <tr>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Money</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Sherlock</td>
          <td>Holmes</td>
          <td>$200</td>
        </tr>
        <tr>
          <td>John</td>
          <td>Watson</td>
          <td>$350</td>
        </tr>
        <tr>
          <td>Mary</td>
          <td>Watson</td>
          <td>$500</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>
Essayez vous-même »

Tableau zébré

En utilisant le sélecteur nth-child() et en appliquant la propriété CSS background-color aux lignes paires (impaires) du tableau, vous pouvez créer un tableau zébré.

Exemple de création d'un tableau zébré :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        border-collapse: collapse;
        width: 100%;
      }
      th,
      td {
        text-align: left;
        padding: 10px;
      }
      tr:nth-child(even) {
        background-color: #6eeccf;
      }
      tr:nth-child(odd) {
        background-color: #2d7f88;
      }
    </style>
  </head>
  <body>
    <h2>Striped table example</h2>
    <table>
      <thead>
        <tr>
          <th>First name</th>
          <th>Last name</th>
          <th>Points</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Sherlock</td>
          <td>Holmes</td>
          <td>$250</td>
        </tr>
        <tr>
          <td>John</td>
          <td>Watson</td>
          <td>$350</td>
        </tr>
        <tr>
          <td>Mary</td>
          <td>Watson</td>
          <td>$500</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>
Essayez vous-même »

Tableaux adaptatifs

Un tableau large peut déborder sur les écrans étroits et casser la mise en page. Pour rendre un tableau adaptatif, enveloppez-le dans un élément conteneur (ici un <div>) et appliquez overflow-x: auto à ce conteneur. Lorsque le tableau est plus large que le viewport, le conteneur affiche une barre de défilement horizontale au lieu d'étirer la page — les lignes restent intactes et l'utilisateur fait simplement défiler horizontalement.

Exemple de création d'un tableau adaptatif :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        overflow-x: auto;
      }
      table {
        border-collapse: collapse;
        width: 100%;
      }
      th,
      td {
        text-align: left;
        padding: 8px 5px;
      }
      tr:nth-child(even) {
        background-color: #6eeccf;
      }
      tr:nth-child(odd) {
        background-color: #2d7f88;
      }
    </style>
  </head>
  <body>
    <h2>Responsive table example</h2>
    <div>
      <table>
        <thead>
          <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Money</th>
            <th>Money</th>
            <th>Money</th>
            <th>Money</th>
            <th>Money</th>
            <th>Money</th>
            <th>Money</th>
            <th>Money</th>
            <th>Money</th>
            <th>Money</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Sherlock</td>
            <td>Holmes</td>
            <td>$150</td>
            <td>$150</td>
            <td>$150</td>
            <td>$150</td>
            <td>$150</td>
            <td>$150</td>
            <td>$150</td>
            <td>$150</td>
            <td>$150</td>
            <td>$150</td>
          </tr>
          <tr>
            <td>John</td>
            <td>Watson</td>
            <td>$350</td>
            <td>$350</td>
            <td>$350</td>
            <td>$350</td>
            <td>$350</td>
            <td>$350</td>
            <td>$350</td>
            <td>$350</td>
            <td>$350</td>
            <td>$350</td>
          </tr>
          <tr>
            <td>Mary</td>
            <td>Watson</td>
            <td>$500</td>
            <td>$500</td>
            <td>$500</td>
            <td>$500</td>
            <td>$500</td>
            <td>$500</td>
            <td>$500</td>
            <td>$500</td>
            <td>$500</td>
            <td>$500</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
</html>
Essayez vous-même »

Sujets associés

Pratique

Pratique
Quelles propriétés CSS peuvent être appliquées aux tableaux ?
Quelles propriétés CSS peuvent être appliquées aux tableaux ?
Was this page helpful?