Comment Supprimer l'Espace Entre les Cellules des Tables en Utilisant CSS?

CSS a beaucoup de propriétés importantes et utiles qui peuvent résoudre des grands problèmes en quelques secondes.

Dans ce snippet, nous allons montrer comment supprimer les espaces entre les cellules de la table à l'aide de CSS. Si vous utilisez CSS pour mettre un border sur votre balises <th> et <td>, une espace entre elles apparaîtra.

Avant, on devait supprimer l'espace entre les cellules en utilisant l'attribut cellspacing qui est déjà obsolèt. Aujourd'hui CSS propose la propriété border-collapse qui spécifie si les bordures de la table sont éffondrées ou non.

1. Créez HTML

Créez un élément <table> qui va contenir les balises <tr>, <th> et <td>.

<table>
  <tr>
    <th>1</th>
    <th>2</th>
    <th>3</th>
    <th>4</th>
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
</table>

2. Créez CSS

Définissez padding, l'épaisseur et la couleur pour les balises td, th.

td,
th {
  padding: 1em;
  border: 1px solid #666666;
}

Pour supprimer l'espace, on doit utiliser le mot clé "collapse" de la propriété border-collapse. Ajoutez le suivant dans la section <style> :

table {
  border-collapse: collapse;
}

Ici on a une table et on voit qu'il y a une espace entre les cellules.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      td,
      th {
        padding: 1em;
        border: 1px solid #666666;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
      </tr>
      <tr>
        <td>texte</td>
        <td>texte</td>
        <td>texte</td>
        <td>texte</td>
      </tr>
    </table>
  </body>
</html>

Essayez-vous-même!

Voici un exemple, dans lequel les espaces entre les cellules sont supprimés.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      table {
        border-collapse: collapse;
      }
      td,
      th {
        padding: 1em;
        border: 1px solid #666666;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
      </tr>
      <tr>
        <td>texte</td>
        <td>texte</td>
        <td>texte</td>
        <td>texte</td>
      </tr>
    </table>
  </body>
</html>

Essayez-vous-même!

Un autre exemple dans lequel la table est créée par les balises <thead> et <tbody>. La balise <thead> définit l'en-tête d'une table HTML. La balise est utilisée avec la balise <tbody>, qui spécifie le corps.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      table {
        border-collapse: collapse;
      }
      table,
      th,
      td {
        border: 2px solid #000000;
      }
      table th,
      table td {
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>Pays</th>
          <th>Capitale</th>
          <th>Grande Ville</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>France</td>
          <td>Paris</td>
          <td>Lyon</td>
        </tr>
        <tr>
          <td>Italie</td>
          <td>Rome</td>
          <td>Milan</td>
        </tr>
        <tr>
          <td>Espagne</td>
          <td>Madrid</td>
          <td>Valencia</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Essayez-vous-même!