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>
Trouvez-vous cela utile?

Articles Associées