Docs HTML exécutables : Bordure de tableau

Q: Comment ajouter une bordure à un tableau en HTML ?

Utilisez du CSS sur le tableau et ses cellules : table { border-collapse: collapse; } th, td { border: 1px solid #999; }. La bordure des cellules dessine la grille, et border-collapse: collapse fusionne les bordures voisines en traits simples.

Q: Comment arrondir les coins d'un tableau ?

border-radius n'a aucun effet sur un tableau en border-collapse: collapse. Utilisez border-collapse: separate avec border-spacing: 0, mettez l'arrondi sur le tableau, et donnez aux cellules des coins un arrondi assorti (border-start-start-radius et ses équivalents) pour que leur fond ne dépasse pas des coins.

Comment ajouter une bordure à un tableau

Les tableaux n'ont pas de bordures par défaut. Ajoutez-les en CSS : une border sur chaque cellule dessine la grille, et border-collapse: collapse sur le tableau fusionne chaque paire de bordures voisines en un seul trait.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Table border</title>
  <style>
    table { border-collapse: collapse; }
    th, td { border: 1px solid #6b7280; padding: 6px 12px; }
  </style>
</head>
<body>
  <table>
    <tr><th>Size</th><th>Price</th></tr>
    <tr><td>Small</td><td>3.00</td></tr>
    <tr><td>Large</td><td>4.50</td></tr>
  </table>
</body>
</html>

La propriété raccourcie border prend une largeur, un style et une couleur, dans n'importe quel ordre : 1px solid #6b7280. Mettez-la sur th, td, pas seulement sur table : une bordure sur le tableau ne dessine que le cadre extérieur.

border-collapse : separate ou collapse

border-collapse décide si les cellules partagent leurs bordures.

Valeur	Résultat
`separate` (par défaut)	Chaque cellule a sa propre bordure, avec un écart entre les cellules fixé par `border-spacing`
`collapse`	Les cellules voisines partagent une seule bordure ; `border-spacing` est ignoré

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>border-collapse</title>
  <style>
    body { display: flex; flex-wrap: wrap; gap: 24px; font-family: system-ui, sans-serif; }
    table { border: 2px solid #2563eb; }
    th, td { border: 2px solid #f59e0b; padding: 6px 10px; }
    .separate { border-collapse: separate; border-spacing: 6px; }
    .collapse { border-collapse: collapse; }
  </style>
</head>
<body>
  <table class="separate">
    <caption>separate</caption>
    <tr><td>A</td><td>B</td></tr>
    <tr><td>C</td><td>D</td></tr>
  </table>
  <table class="collapse">
    <caption>collapse</caption>
    <tr><td>A</td><td>B</td></tr>
    <tr><td>C</td><td>D</td></tr>
  </table>
</body>
</html>

Dans le tableau separate, vous voyez les deux couches : le cadre bleu du tableau et une boîte ambre distincte autour de chaque cellule, avec border-spacing entre elles. Remplacez 6px par 0 et les cellules se touchent, mais les traits restent doublés. Seul collapse les fusionne.

Quand deux bordures fusionnées se rencontrent et diffèrent, la plus large l'emporte. À largeur égale, c'est le style qui décide (double bat solid, qui bat dashed et dotted), et en cas d'égalité, la bordure de la cellule bat celle de la ligne, qui bat celle du tableau. C'est pourquoi le bord extérieur du tableau collapse est ambre et non bleu : les cellules et le tableau y ont tous deux des bordures de 2px en solid, et ce sont les cellules qui gagnent.

Uniquement des lignes horizontales, ou uniquement les traits intérieurs

La plupart des tableaux modernes ne dessinent pas tous les traits. Deux schémas courants :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Border patterns</title>
  <style>
    body { display: flex; flex-wrap: wrap; gap: 32px; font-family: system-ui, sans-serif; }
    table { border-collapse: collapse; }
    th, td { padding: 6px 12px; text-align: start; }

    /* 1. Row lines only */
    .rows th, .rows td { border-bottom: 1px solid #d1d5db; }
    .rows thead th { border-bottom: 2px solid #111827; }

    /* 2. Inner grid, no outer frame */
    .inner th, .inner td { border: 1px solid #d1d5db; }
    .inner tr:first-child th, .inner tr:first-child td { border-top: 0; }
    .inner tr:last-child th, .inner tr:last-child td { border-bottom: 0; }
    .inner th:first-child, .inner td:first-child { border-inline-start: 0; }
    .inner th:last-child, .inner td:last-child { border-inline-end: 0; }
  </style>
</head>
<body>
  <table class="rows">
    <thead><tr><th>Name</th><th>Score</th></tr></thead>
    <tbody>
      <tr><td>Ana</td><td>92</td></tr>
      <tr><td>Bob</td><td>87</td></tr>
    </tbody>
  </table>

  <table class="inner">
    <tr><td>1</td><td>2</td><td>3</td></tr>
    <tr><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>7</td><td>8</td><td>9</td></tr>
  </table>
</body>
</html>

Le second tableau retire la bordure du côté extérieur de chaque cellule de bord. border-inline-start et border-inline-end désignent le début et la fin de la ligne, donc le même CSS reste correct dans les langues de droite à gauche, où la première cellule est de l'autre côté.

Coins de tableau arrondis

border-radius ne fait rien sur un tableau en border-collapse: collapse. Les tableaux arrondis utilisent le modèle separate sans espacement, et dessinent chaque trait une seule fois en ne donnant aux cellules qu'une bordure du bas et une bordure de fin :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Rounded table</title>
  <style>
    table {
      border-collapse: separate;
      border-spacing: 0;
      border: 1px solid #9ca3af;
      border-radius: 10px;
      font-family: system-ui, sans-serif;
    }
    th, td {
      padding: 8px 14px;
      border-bottom: 1px solid #9ca3af;
      border-inline-end: 1px solid #9ca3af;
    }
    th { background: #e5e7eb; }
    tr:first-child > :first-child { border-start-start-radius: 9px; }
    tr:first-child > :last-child { border-start-end-radius: 9px; }
    tr > :last-child { border-inline-end: 0; }
    tr:last-child > * { border-bottom: 0; }
  </style>
</head>
<body>
  <table>
    <tr><th>Plan</th><th>Price</th></tr>
    <tr><td>Free</td><td>0</td></tr>
    <tr><td>Pro</td><td>12</td></tr>
  </table>
</body>
</html>

Les deux cellules de coin de l'en-tête reçoivent leur propre arrondi pour que le fond gris suive la courbe. Sans lui, leurs coins carrés dépassent de la bordure arrondie. L'arrondi fait 9px, les 10px du tableau moins sa bordure de 1px, pour que les deux courbes coïncident.

Couleur et épaisseur de bordure selon la partie

Les bordures peuvent varier selon la partie du tableau. Des sélecteurs sur thead, tfoot et certaines lignes posent un trait plus épais sous l'en-tête ou au-dessus des totaux :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Border per part</title>
  <style>
    table { border-collapse: collapse; font-family: system-ui, sans-serif; }
    th, td { padding: 6px 14px; border: 1px solid #e5e7eb; text-align: start; }
    thead th { border-bottom: 3px solid #2563eb; }
    tfoot td { border-top: 3px double #111827; font-weight: bold; }
  </style>
</head>
<body>
  <table>
    <thead><tr><th>Month</th><th>Sales</th></tr></thead>
    <tbody>
      <tr><td>July</td><td>120</td></tr>
      <tr><td>August</td><td>135</td></tr>
    </tbody>
    <tfoot><tr><td>Total</td><td>255</td></tr></tfoot>
  </table>
</body>
</html>

Les traits de 3px l'emportent sur les traits gris de 1px là où ils se rencontrent, selon les règles de fusion ci-dessus. Pour le reste de la structure du tableau (thead, tfoot, th), voir tableau HTML.

L'attribut border

Les vieux tutoriels utilisent des attributs sur la balise <table> :

<table border="1" cellspacing="0" cellpadding="6">

Les navigateurs respectent encore border="1" : il dessine une bordure sur le tableau et sur chaque cellule, dans le modèle separate, ce qui donne l'aspect doublé. Les trois attributs sont obsolètes en HTML5. Les équivalents CSS sont border sur les cellules, border-spacing (ou border-collapse: collapse) sur le tableau, et padding sur les cellules.

Erreurs fréquentes

Une bordure seulement sur table. Vous obtenez un cadre sans traits à l'intérieur. Ajoutez la bordure à th, td.
Oublier border-collapse: collapse, puis voir des traits doublés.
border-radius avec border-collapse: collapse. L'arrondi est ignoré.
border-spacing avec border-collapse: collapse. L'espacement ne fonctionne que dans le modèle separate.
Des bordures sur <tr> dans le modèle separate. Les lignes ne dessinent pas de bordures sauf si le tableau est en collapse ; stylisez plutôt les cellules.
Utiliser border="1" dans du nouveau code. Cela marche encore, mais ne permet pas de choisir une couleur et c'est obsolète.

Questions fréquentes

Comment ajouter une bordure à un tableau en HTML ?

Utilisez du CSS sur le tableau et ses cellules : table { border-collapse: collapse; } th, td { border: 1px solid #999; }. La bordure des cellules dessine la grille, et border-collapse: collapse fusionne les bordures voisines en traits simples.

Pourquoi mon tableau a des bordures doubles ?

Par défaut, chaque cellule dessine sa propre bordure avec un écart entre les cellules (border-collapse: separate), donc des cellules voisines montrent deux traits. Définissez border-collapse: collapse sur la <table> pour les fusionner en un seul.

L'attribut border de table est-il encore valide ?

<table border="1"> dessine encore des bordures dans tous les navigateurs, mais il est obsolète en HTML5 et ne permet de contrôler ni la couleur ni le style. Utilisez plutôt la propriété CSS border.

Comment arrondir les coins d'un tableau ?

border-radius n'a aucun effet sur un tableau en border-collapse: collapse. Utilisez border-collapse: separate avec border-spacing: 0, mettez l'arrondi sur le tableau, et donnez aux cellules des coins un arrondi assorti (border-start-start-radius et ses équivalents) pour que leur fond ne dépasse pas des coins.

Comment supprimer la bordure d'un tableau ?

Les tableaux n'ont pas de bordure tant que rien n'en ajoute. Retirez l'attribut border de la balise <table>, ou définissez border: none sur table, th, td pour annuler une feuille de style qui en ajoute.

Concepts liés