Comment définir la marge intérieure et l'espacement des cellules d'un tableau avec CSS ?

Lucas D. -

Problème : Ajuster l'espacement des cellules d'un tableau en CSS

Contrôler l'espacement entre et à l'intérieur des cellules d'un tableau est un défi lors de la mise en forme des tableaux HTML. Le CSS propose des méthodes pour ajuster le rembourrage et l'espacement des cellules, mais il peut être difficile de savoir quelles propriétés utiliser et comment les appliquer.

Solutions CSS pour le remplissage des cellules de tableau

Utilisation de la propriété Padding

Pour ajouter du remplissage aux cellules de tableau avec CSS, utilisez la propriété padding :

td, th {
    padding: 10px;
}

Cela ajoute 10 pixels de remplissage sur tous les côtés de chaque cellule du tableau. Vous pouvez également définir différentes valeurs de remplissage pour chaque côté :

td, th {
    padding-top: 5px;
    padding-right: 10px;
    padding-bottom: 5px;
    padding-left: 10px;
}

Ou utilisez la notation abrégée :

td, th {
    padding: 5px 10px; /* 5px pour le haut et le bas, 10px pour la gauche et la droite */
}

Exemple: Remplissage Responsive

Pour les tableaux responsifs, pensez à utiliser des unités relatives comme em ou % pour le remplissage. Cela permet au remplissage de s'adapter à la taille du texte ou à la largeur du conteneur :

td, th {
    padding: 0.5em 2%;
}

Cibler des cellules spécifiques

Pour ajouter du remplissage à des cellules spécifiques du tableau, ciblez séparément les éléments <td> et <th> :

td {
    padding: 8px;
}

th {
    padding: 12px;
}

Cela applique 8 pixels de remplissage aux cellules de données et 12 pixels aux cellules d'en-tête.

Pour plus de contrôle, utilisez des classes pour appliquer un remplissage personnalisé :

.custom-padding {
    padding: 15px 20px;
}

Puis dans votre HTML :

<td class="custom-padding">Contenu</td>

Cette méthode vous permet d'ajouter différents remplissages à des cellules spécifiques ou à des groupes de cellules dans votre tableau.

Techniques CSS pour l'espacement des cellules de tableau

Utilisation de la propriété Border-Spacing

La propriété border-spacing en CSS définit l'espace entre les cellules du tableau. Elle s'applique à l'élément <table> et affecte toutes les cellules du tableau. La syntaxe de base est :

table {
    border-spacing: 10px;
}

Cela ajoute 10 pixels d'espace entre toutes les cellules. Vous pouvez également définir des valeurs différentes pour l'espacement horizontal et vertical :

table {
    border-spacing: 5px 10px;
}

Cela crée 5 pixels d'espacement horizontal et 10 pixels d'espacement vertical entre les cellules.

Exemple: Espacement des bordures responsive

Pour les designs responsifs, envisagez d'utiliser des unités relatives comme em ou rem pour border-spacing :

table {
    border-spacing: 0.5em 1em;
}

Cela permet à l'espacement de s'adapter à différentes tailles d'écran et paramètres de police.

La propriété Border-Collapse

La propriété border-collapse contrôle l'affichage des bordures du tableau. Elle a deux valeurs principales :

table {
    border-collapse: separate;
}

Avec border-collapse: separate, chaque cellule conserve ses propres bordures, et la propriété border-spacing fonctionne. C'est le comportement par défaut.

table {
    border-collapse: collapse;
}

Lorsqu'elle est définie sur collapse, les bordures des cellules adjacentes se combinent en une seule bordure, et border-spacing ne fonctionne pas. C'est utile pour créer des tableaux sans espaces entre les cellules.

Pour utiliser border-spacing, vous devez définir border-collapse sur separate :

table {
    border-collapse: separate;
    border-spacing: 5px;
}

Cette combinaison vous permet de contrôler l'espace entre les cellules tout en conservant les bordures individuelles des cellules.