Mise en forme des tableaux

Mettre en forme un tableau HTML n'est pas la tâche la plus passionnante qui soit, mais nous devons tous nous y atteler de temps en temps. Cet article explique comment améliorer l'apparence des tableaux HTML, en mettant en avant certaines techniques spécifiques de mise en forme.

Prérequis :	Notions de base en HTML et Tableaux HTML, Valeurs et unités et Dimensionnement CSS.
Objectif d'apprentissage :	Gérer l'espacement dans les tableaux, y compris la fusion des bordures. Mettre en évidence clairement les différentes régions du tableau, y compris les en-têtes, la légende, l'en-tête, le corps et le pied de page. Comment mettre en œuvre les zébras, et pourquoi c'est utile.

Un tableau HTML typique

Commençons par examiner un tableau HTML classique. Enfin, nous disons « classique »… La plupart des exemples de tableaux HTML portent sur les chaussures, la météo ou les employés ; nous avons décidé de rendre les choses plus intéressantes en choisissant comme sujet les groupes punk célèbres du Royaume-Uni. Le code se présente comme suit :

html

<table>
  <caption>
    Récapitulatif des groupes punk les plus célèbres du Royaume-Uni
  </caption>
  <thead>
    <tr>
      <th scope="col">Groupe</th>
      <th scope="col">Année de formation</th>
      <th scope="col">Nombre d'albums</th>
      <th scope="col">Morceau le plus célèbre</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row" lang="en">Buzzcocks</th>
      <td>1976</td>
      <td>9</td>
      <td>
        <i lang="en">Ever fallen in love (with someone you shouldn't've)</i>
      </td>
    </tr>
    <tr>
      <th scope="row" lang="en">The Clash</th>
      <td>1976</td>
      <td>6</td>
      <td><i lang="en">London Calling</i></td>
    </tr>
    <tr>
      <th scope="row" lang="en">The Damned</th>
      <td>1976</td>
      <td>10</td>
      <td lang="en">Smash it up</td>
    </tr>
    <tr>
      <th scope="row" lang="en">Sex Pistols</th>
      <td>1975</td>
      <td>1</td>
      <td lang="en">Anarchy in the UK</td>
    </tr>
    <tr>
      <th scope="row" lang="en">Sham 69</th>
      <td>1976</td>
      <td>13</td>
      <td lang="en">If The Kids Are United</td>
    </tr>
    <tr>
      <th scope="row" lang="en">Siouxsie and the Banshees</th>
      <td>1976</td>
      <td>11</td>
      <td lang="en">Hong Kong Garden</td>
    </tr>
    <tr>
      <th scope="row" lang="en">Stiff Little Fingers</th>
      <td>1977</td>
      <td>10</td>
      <td lang="en">Suspect Device</td>
    </tr>
    <tr>
      <th scope="row" lang="en">The Stranglers</th>
      <td>1974</td>
      <td>17</td>
      <td><i lang="en">No More Heroes</i></td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row" colspan="2">Nombre total d'albums</th>
      <td colspan="2">77</td>
    </tr>
  </tfoot>
</table>

Le tableau est bien balisé, facile à mettre en forme et accessible grâce aux fonctionnalités offertes par scope, <caption>, <thead>, <tbody>, etc. Malheureusement, son apparence n'est pas très attrayante. Avec seulement le style par défaut du navigateur, il semble encombré, difficile à lire et un peu ennuyeux :

Nous devons utiliser un peu de CSS pour améliorer cela. Vous pouvez mettre en forme un tableau de la manière que vous souhaitez en utilisant CSS. Par exemple, nous avons créé ce design plutôt « punk » :

/* importation de la police */
@import "https://fonts.googleapis.com/css2?family=Rock+Salt&display=swap";

/* espacement */
table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  border: 3px solid purple;
}

thead th {
  line-height: 1.5;
}

thead th:nth-child(1) {
  width: 30%;
}

thead th:nth-child(2) {
  width: 20%;
}

thead th:nth-child(3) {
  width: 15%;
}

thead th:nth-child(4) {
  width: 35%;
}

th,
td {
  padding: 20px;
}

/* typographie */
html {
  font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}

thead th,
tfoot th {
  font-family: "Rock Salt", cursive;
}

th {
  letter-spacing: 2px;
}

td {
  letter-spacing: 1px;
}

tbody td {
  text-align: center;
}

tfoot th {
  text-align: right;
}

/* graphismes */
thead,
tfoot {
  background: url("https://mdn.github.io/learning-area/css/styling-boxes/styling-tables/leopardskin.jpg");
  color: white;
}

thead th,
tfoot th,
tfoot td {
  background: linear-gradient(to bottom, rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.5));
  border: 3px solid purple;
  text-shadow: 1px 1px 1px black;
}

tbody tr:nth-child(odd) {
  background-color: #ff33cc;
}

tbody tr:nth-child(even) {
  background-color: #e495e4;
}

tbody tr {
  background-image: url("https://mdn.github.io/learning-area/css/styling-boxes/styling-tables/noise.png");
}

table {
  background-color: #ff33cc;
}

/* légende */
caption {
  font-family: "Rock Salt", cursive;
  padding: 20px;
  font-style: italic;
  caption-side: bottom;
  color: #666666;
  text-align: right;
  letter-spacing: 1px;
}

Cependant, ce design est plutôt criard. Dans cet article, nous allons vous aider à le remanier en suivant certaines bonnes pratiques en matière de conception de tableaux, telles que décrites dans Typographie Web : concevoir des tableaux pour qu'on les lise, pas pour qu'on les regarde ^(angl.).

Commencer à mettre en forme notre tableau

Travaillons ensemble sur la mise en forme de notre exemple de tableau.

Pour commencer, faites une copie locale du balisage d'exemple montré plus haut et enregistrez-le dans un répertoire de travail quelque part sur votre ordinateur.
Ensuite, créez un nouveau fichier appelé style.css et enregistrez-le dans le même répertoire que vos autres fichiers.
Liez le CSS au HTML en plaçant la ligne suivante dans votre <head> :
html
```
<link href="style.css" rel="stylesheet" />
```

Chargez votre HTML dans un navigateur pour voir à quoi il ressemble par défaut.

Mettre à jour la police

Ceci est un point mineur et n'est pas strictement lié à la mise en forme des tableaux, mais nous avons trouvé que la police par défaut semblait un peu trop formelle pour un tableau sur les groupes punk. Commencez votre CSS en ajoutant la règle suivante :

css

html {
  font-family: "Helvetica", "Arial", sans-serif;
}

Espacement

La première chose que nous devons faire pour notre tableau est de régler l'espacement — le style par défaut des tableaux est tellement serré ! Pour ce faire, ajoutez le CSS suivant à la fin de votre fichier style.css :

css

table {
  table-layout: fixed;
  width: 90%;
  margin: 10px auto;
  border-collapse: collapse;
}

th,
td {
  padding: 0.6em;
}

Les points les plus importants à noter sont les suivants :

Une valeur table-layout à fixed est généralement une bonne idée à définir sur votre tableau, car elle permet au tableau de se comporter de manière un peu plus prévisible par défaut. Normalement, les colonnes de tableau ont tendance à être dimensionnées en fonction de la quantité de contenu qu'elles contiennent, ce qui produit des résultats étranges. Avec table-layout: fixed, vous pouvez dimensionner vos colonnes en fonction de la largeur de leurs en-têtes, puis gérer leur contenu en conséquence. Chris Coyier discute de cette technique plus en détail dans Mise en page fixe des tableaux ^(angl.).
Nous avons associé la mise en page fixe à une width de 90% et à une margin de 10px auto. Ces paramètres signifient que le tableau remplit principalement la fenêtre et est centré horizontalement.
Une valeur border-collapse de collapse est une bonne pratique standard pour tout effort de style de tableau. Par défaut, lorsque vous définissez des bordures sur les éléments de tableau, ils ont tous un espacement entre eux, comme l'illustre l'image ci-dessous : Cela n'a pas l'air très joli (bien que cela puisse être le visuel que vous voulez, qui sait ?). Avec border-collapse: collapse; défini, les bordures se fusionnent en une seule, ce qui est beaucoup mieux :
Nous avons défini un peu de padding sur les éléments <th> et <td> — cela donne aux éléments de données un peu d'espace pour respirer, rendant le tableau beaucoup plus lisible.

Enregistrez votre code et actualisez votre navigateur pour voir les résultats.

Alignement

Ensuite, nous allons nous occuper de l'alignement des différents types de données à l'intérieur de leurs cellules. Les bonnes pratiques dictent que vous devez aligner le texte à gauche et les nombres à droite ; le CSS suivant y parvient, alors ajoutez-le maintenant à la fin de votre fichier CSS.

css

tr :nth-child(2),
tr :nth-child(3) {
  text-align: right;
  width: 15%;
}

tr :nth-child(1),
tr :nth-child(4) {
  text-align: left;
  width: 35%;
}

tfoot tr :nth-child(1) {
  text-align: right;
}

tfoot tr :nth-child(2) {
  text-align: left;
}

Nous avons utilisé la pseudo-classe :nth-child ici ; un sélecteur utile qui vous permet de sélectionner un enfant numéroté spécifique d'un élément, ou une séquence spécifique. Ici, nous l'utilisons pour sélectionner des éléments <td> spécifiques à l'intérieur des éléments <th>.

Notez également que nous avons défini des largeurs spécifiques sur les lignes du tableau, les lignes contenant du texte étant beaucoup plus larges que celles contenant des nombres. C'est une bonne idée — les lignes contenant plus de contenu ont besoin de plus d'espace pour donner à leur contenu autant de chances que possible de tenir sur une seule ligne. Les lignes contenant moins de contenu n'ont pas besoin d'autant d'espace pour afficher leurs données, et en fait, si vous leur donnez beaucoup d'espace, les données se perdent un peu dans l'espace et sont donc plus difficiles à lire.

Nous devons également nous assurer que nos éléments de données sont alignés en haut de leurs cellules, plutôt qu'au milieu. Pour ce faire, nous pouvons utiliser la propriété vertical-align. Mettez à jour votre règle th, td existante comme suit :

css

th,
td {
  vertical-align: top;
  padding: 0.3em;
}

Encore une fois, enregistrez et actualisez pour voir l'effet de vos dernières mises à jour CSS.

Ajouter des bordures

Le tableau commence déjà à être beaucoup plus lisible, mais nous devrions ajouter quelques bordures pour fournir une séparation visuelle entre le <caption> du tableau, les données et la ligne totale en bas. Pour ce faire, ajoutez les règles suivantes à votre CSS :

css

tfoot {
  border-top: 1px solid #999999;
}

Ensuite, mettez à jour votre règle table existante comme suit :

css

table {
  table-layout: fixed;
  width: 90%;
  margin: 10px auto;
  border-collapse: collapse;
  border-top: 1px solid #999999;
  border-bottom: 1px solid #999999;
}

Encore une fois, enregistrez et actualisez pour voir l'effet de vos dernières mises à jour CSS.

Les zébras

Nous voulions consacrer une section distincte pour vous montrer comment implémenter des zébras (ou rayures de zèbre) — des lignes de couleur alternées qui facilitent la lecture et l'analyse des différentes lignes de données de votre tableau. Ajoutez le CSS suivant à la fin de votre fichier style.css :

css

tbody tr:nth-child(odd) {
  background-color: #eeeeee;
}

Plus tôt, vous avez vu le sélecteur :nth-child être utilisé pour sélectionner des éléments enfants spécifiques. Il peut également recevoir une formule en paramètre, ce qui lui permet de sélectionner une séquence d'éléments. La formule 2n+1 sélectionne tous les enfants numérotés impairs (1, 3, 5, etc.) et la formule 2n sélectionne tous les enfants numérotés pairs (2, 4, 6, etc.). Nous avons utilisé le mot-clé odd dans notre code, qui est un raccourci pour la formule 2n+1 (even est un raccourci pour 2n).

Encore une fois, n'oubliez pas d'enregistrer et d'actualiser pour voir le résultat.

Mettre en forme la légende

Il reste une dernière chose à faire avec notre tableau — mettre en forme la légende. Pour ce faire, ajoutez ce qui suit à la fin de votre fichier style.css :

css

caption {
  padding: 1em;
  font-style: italic;
  caption-side: bottom;
  letter-spacing: 1px;
}

Il n'y a rien de remarquable ici, sauf pour la propriété caption-side, à laquelle une valeur de bottom a été attribuée. Cela fait en sorte que la légende soit positionnée en bas du tableau.

Tableau terminé

Votre conception de tableau terminée doit ressembler à ceci :

html {
  font-family: "Helvetica", "Arial", sans-serif;
}

table {
  table-layout: fixed;
  width: 90%;
  margin: 10px auto;
  border-collapse: collapse;
  border-top: 1px solid #999999;
  border-bottom: 1px solid #999999;
}

th,
td {
  vertical-align: top;
  padding: 0.6em;
}

tr :nth-child(2),
tr :nth-child(3) {
  text-align: right;
  width: 15%;
}

tr :nth-child(1),
tr :nth-child(4) {
  text-align: left;
  width: 35%;
}

tfoot tr :nth-child(1) {
  text-align: right;
}

tfoot tr :nth-child(2) {
  text-align: left;
}

tfoot {
  border-top: 1px solid #999999;
}

tbody tr:nth-child(odd) {
  background-color: #eeeeee;
}

caption {
  padding: 1em;
  font-style: italic;
  caption-side: bottom;
  letter-spacing: 1px;
}

Conseils rapides pour le style des tableaux

Avant de passer à autre chose, nous avons pensé vous fournir une liste rapide des points les plus utiles illustrés ci-dessus :

Rendez votre balisage de tableau aussi simple que possible et gardez les choses flexibles.
Utilisez table-layout: fixed pour créer une mise en page de tableau plus prévisible qui vous permet de définir facilement les largeurs des colonnes en définissant width sur leurs en-têtes (<th>).
Utilisez border-collapse: collapse pour que les bordures des éléments de tableau se chevauchent, produisant un aspect plus net et plus facile à contrôler.
Utilisez <thead>, <tbody> et <tfoot> pour diviser votre tableau en sections logiques et fournir des endroits supplémentaires pour appliquer du CSS, ce qui facilite la superposition des styles si nécessaire.
Utilisez les zébras pour rendre les lignes alternatives plus faciles à lire.
Utilisez text-align pour aligner le texte de vos <th> et <td>, afin de rendre les choses plus nettes et plus faciles à suivre.

Résumé

Avec le style des tableaux maintenant derrière nous, nous avons besoin de quelque chose d'autre pour occuper notre temps. L'article suivant explore le débogage CSS — comment résoudre des problèmes tels que des mises en page qui ne ressemblent pas à ce qu'elles devraient, ou des propriétés qui ne s'appliquent pas lorsque vous pensez qu'elles devraient. Cela inclut des informations sur l'utilisation des outils de développement du navigateur pour trouver des solutions à vos problèmes.

Aider à améliorer MDN

Apprendre à contribuer

Cette page a été modifiée le 15 juin 2026 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu