Utiliser le remplissage de cellule dans le tableau en CSS

1. Utilisez les propriétés padding et border-spacing pour le remplissage des cellules et l’espacement des cellules en CSS
2. Utilisez la propriété border-spacing pour spécifier l’espacement vertical et horizontal dans CSS

Cet article présente le concept de remplissage et d’espacement des cellules avec les moyens d’y parvenir en CSS.

Utilisez les propriétés padding et border-spacing pour le remplissage des cellules et l’espacement des cellules en CSS

Le but du remplissage de cellule est de fournir les espaces entre la bordure de la cellule et le contenu de la cellule. Nous pouvons utiliser la propriété padding en CSS pour spécifier le remplissage d’une cellule. La propriété padding est un raccourci pour représenter le rembourrage haut, droit, bas et gauche. Nous pouvons sélectionner les cellules d’un tableau avec des sélecteurs CSS et utiliser la propriété padding sur celles-ci.

De même, le but de l’espacement des cellules est de fournir les espaces entre les cellules adjacentes. Nous pouvons utiliser la propriété CSS border-spacing pour spécifier l’espacement entre la bordure des cellules voisines. Cependant, cette propriété ne fonctionne que lorsque la propriété border-collapse est définie sur separate. Cela signifie que nous ne pouvons pas utiliser la propriété border-spacing lorsque nous définissons border-collapse sur collapse. La valeur separate est la valeur par défaut de la propriété border-collapse.

Le tableau HTML normal sans remplissage ni espacement des cellules est équivalent au CSS appliqué suivant. Le border-collapse:collapse implique que les bordures des cellules adjacentes sont fusionnées en une seule. Le padding:0px ressemble à l’absence de remplissage dans les cellules. Cela ressemble au comportement par défaut d’une table.

table {
    border-collapse:collapse;
}

td {
    padding:0px;
} 

Par exemple, créez un tableau HTML avec les en-têtes Nom, Adresse et Âge. Remplissez le tableau avec quelques valeurs. La balise <td> </td> représente les données du tableau. En CSS, sélectionnez la balise <table> et définissez border-spacing sur 5px. Ensuite, sélectionnez la balise <td> et définissez padding sur 5px.

Ainsi, nous avons créé un remplissage de cellule de 5px des quatre côtés du texte. Nous avons également créé un espace de 5px entre les bordures de chaque cellule du tableau. Nous avons appris à réaliser le remplissage et l’espacement des cellules en CSS.

Exemple de code :

<table border>
  <tr>
    <th>Name</th>
    <th>Address</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Switzerland</td>
    <td>65</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jamaica</td>
    <td>23</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Denmark</td>
    <td>23</td>
  </tr>
</table>

table {
    border-spacing: 5px;
}
td {
    padding: 5px;
}

Utilisez la propriété border-spacing pour spécifier l’espacement vertical et horizontal dans CSS

Nous pouvons utiliser la propriété border-spacing pour spécifier l’espacement horizontal et vertical entre les bordures des cellules du tableau. Dans l’exemple précédent, nous avons appliqué un espacement horizontal. Ici, nous appliquerons les deux espacements. Nous pouvons spécifier deux valeurs pour la propriété border-spacing. Le premier ressemble à l’espacement horizontal et le second à l’espacement vertical. Nous pouvons appliquer cette méthode dans le tableau créé ci-dessus.

Par exemple, sélectionnez la balise table et définissez border-spacing sur 8px et 5px. Il créera l’espacement horizontal de 8px et l’espacement vertical de 5px.

Exemple de code :

table {
    border-spacing:8px 5px;
}
td {
    padding: 5px;
}

<table border>
  <tr>
    <th>Name</th>
    <th>Address</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Switzerland</td>
    <td>65</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jamaica</td>
    <td>23</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Denmark</td>
    <td>23</td>
  </tr>
</table>