Qu'est-ce que le rembourrage des cellules de table dans CSS

Par défaut, une table a des cellules très étroites, ce qui pourrait entraîner des problèmes de visibilité. Pour éviter cela, nous préférons utiliser la propriété CSS Paddding pour remplir les cellules d'une table. Le rembourrage rend les cellules plus larges et plus grandes que leur taille par défaut. En conséquence, le tableau aura l'air bien avec une présentation claire des données.

Dans cet article, nous décrirons comment utiliser le rembourrage cellulaire dans un tableau de CSS.

Comment utiliser le rembourrage des cellules de table dans CSS?

Dans CSS, le «rembourrage»La propriété ajoute un espace vide autour du contenu des éléments. Il est également utilisé pour contrôler l'espace de chaque côté. Par exemple, le rembourrage du côté gauche peut être ajouté à l'aide de la propriété de rembourrage à gauche. De même, les propriétés de rembourrage, de rembourrage et de padding-bas peuvent être utilisées pour créer respectivement l'espace autour du contenu de l'élément à partir de la droite, du haut et du bas,.

Pour ajouter un rembourrage dans la cellule de la table, suivez l'exemple donné.

Exemple 1: Ajouter un rembourrage dans les cellules de la table à l'aide de la propriété de rembourrage

Sur notre page HTML, nous avons une table avec des blocs très étroits. Ajoutons un peu d'espace dans les blocs de la table:

Voici le code HTML actuel pour notre page Web:

Linux	Indice
LLC	Etats-Unis

Maintenant, prenons le "TD”Ou la cellule de données de table avec le tableau et appliquez le«style de bordure«Propriété comme«solide". De cette façon, vous pouvez obtenir la bordure autour de la table et son contenu. Dans l'étape suivante, utilisez le «rembourrage«Propriété avec la valeur»1rem". En conséquence, la cellule de table deviendra plus longue et plus large:

Enregistrez votre fichier HTML et lancez-le sur le navigateur Web pour afficher le résultat:

Comme vous pouvez le voir, le rembourrage a été ajouté avec succès à la cellule de table:

Exemple 2: Ajustez le rembourrage dans les cellules de la table de chaque côté

Dans cet exemple, nous placerons notre texte dans le coin supérieur gauche de la cellule. Pour cela, nous attribuerons le «rembourrage«Valeur de la propriété comme«0px 35px 30px 0px», Où le premier 0px est pour le haut, la deuxième valeur 35px est pour la droite, 30px pour la valeur inférieure et quatrième 0px est pour le rembourrage latéral gauche:

Sortir

Nous vous avons expliqué ce qu'est le rembourrage des cellules de table et comment l'utiliser.

Conclusion

Les cellules de table ont un espace limité par défaut, ce qui pourrait entraîner des problèmes de lisibilité pour le spectateur. Pour cela, le CSS "rembourrage»La propriété est utilisée pour ajouter de l'espace à la cellule de table. Dans ce guide, nous vous avons aidé à comprendre ce qu'est le rembourrage des cellules de table. De plus, nous avons également montré différents exemples liés à l'ajout de rembourrage cellulaire à l'aide de CSS.