Comment Définir le Remplissage et l'Espacement des Cellules

La balise <table> a des attributs cellpadding et cellspacing qui ne sont pas supportés en HTML5, c'est pour cela nous vous recommandons d'utiliser les propriétés CSS padding et border-spacing au lieu de ces attributs.

Donc, les alternatives de CSS cellpadding seront:

Créer et Styler une table Avec les Propriétés CSS

td,
th {
  padding: 10px;
}

L'alternative CSS pour cellspacingsera:

table {
  border-spacing: 10px;
}

Voyons comment les utiliser pas-à-pas:

  1. La première chose à faire est la création de l'élément <table> qui va contenir les balises <th>, <tr> et <td>.
  2. Donnez les styles au tableau en utilisant la propriété border-collapse. Définissez la valeur "separate".
Veuillez noter que la valeur "separate" est définie par défaut lorsque vous définissez la propriété border.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      table,
      td,
      th {
        border: 1px solid black;
        border-collapse: separate;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de border-collapse separate</h2>
    <table>
      <tr>
        <th>Titre</th>
        <th>Titre</th>
      </tr>
      <tr>
        <td>Quelque texte</td>
        <td>Quelque texte</td>
      </tr>
      <tr>
        <td>Quelque texte</td>
        <td>Quelque texte</td>
      </tr>
    </table>
  </body>
</html>
  1. Ajoutez la propriété padding aux éléments <th> et <td> pour définir cellpadding:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      table,
      td,
      th {
        border: 1px solid black;
        border-collapse: separate;
      }
      td,
      th {
        padding: 5px 10px;
      }
    </style>
  </head>
  <body>
    <h2>Exemple pour border-collapse séparée</h2>
    <table>
      <tr>
        <th>Titre</th>
        <th>Titre</th>
      </tr>
      <tr>
        <td>Quelque texte</td>
        <td>Quelque texte</td>
      </tr>
      <tr>
        <td>Quelque texte</td>
        <td>Quelque texte</td>
      </tr>
    </table>
  </body>
</html>
  1. Pour définir cellspacing, définissez la propriété border-spacing pour l'élément <table> :

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      table {
        border-spacing: 10px;
      }
      table,
      td,
      th {
        border: 1px solid black;
        border-collapse: separate;
      }
      td,
      th {
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de cellspacing</h2>
    <table>
      <tr>
        <th>Titre</th>
        <th>Titre</th>
      </tr>
      <tr>
        <td>Quelque texte</td>
        <td>Quelque texte</td>
      </tr>
      <tr>
        <td>Quelque texte</td>
        <td>Quelque texte</td>
      </tr>
    </table>
  </body>
</html>
  1. Stylez les éléments <table> , <th>, <tr> et <td> et donnez les propriétés color, background-color et text-align si nécessaire:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      table {
        border-collapse: separate;
        border-spacing: 10px;
        background-color: #1c87c9;
      }
      table,
      th,
      td {
        border: 2px solid #aaa;
        text-align: center;
      }
      th {
        color: #fff;
        background-color: #095484;
        padding: 10px;
      }
      td {
        background-color: #eee;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Cellpadding et Cellspacing</h2>
    <table>
      <thead>
        <tr>
          <th>Titre</th>
          <th>Titre</th>
          <th>Titre</th>
          <th>Titre</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Quelque texte</td>
          <td>Quelque texte</td>
          <td>Quelque texte</td>
          <td>Quelque texte</td>
        </tr>
        <tr>
          <td>Quelque texte</td>
          <td>Quelque texte</td>
          <td>Quelque texte</td>
          <td>Quelque texte</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>