Le rembourrage des cellules est défini comme l'espace au milieu des données de la cellule et de la bordure. Lorsque nous mettons les données dans les cellules de la table, nous devons créer de l'espace entre la frontière de la cellule et ses données. Cet espacement est connu sous le nom de rembourrage cellulaire dans CSS. Nous pouvons régler le rembourrage gauche de la cellule, le rembourrage droit, le rembourrage supérieur et le rembourrage inférieur séparément ainsi que le rembourrage combiné pour tous les côtés. Si nous ne définissons pas ce rembourrage de cellules dans nos cellules de table, alors elle sera définie par défaut en fonction des données des cellules. Nous avons différentes propriétés dans CSS pour régler ce rembourrage de cellules.
En utilisant la propriété «rembourrage», il ajuste le rembourrage sur les quatre côtés à l'intérieur de la cellule. Mais si nous voulons définir le rembourrage uniquement d'un côté, nous avons également les propriétés pour définir ce. Dans ce guide, nous explorerons la propriété de rembourrage de cellules dans CSS et effectuerons des exemples ici dans lesquels nous utiliserons ces propriétés.
Propriétés pour le rembourrage cellulaire dans CSS:
Rembourrage: valeur.
Padding-gauche: valeur.
Rembourrage à droite: valeur.
Tablier de rembourrage: valeur.
Padding-boot: valeur.
Exemple 1:
Comme nous devons appliquer les propriétés de rembourrage des cellules sur nos cellules de table, nous devons donc construire le tableau. Tout d'abord, nous utiliserons ces propriétés dessus. Nous pouvons créer le tableau en HTML en ajoutant des balises qui sont utilisées pour construire le tableau. Ici, nous allons construire une table en HTML en ouvrant le fichier. Après avoir ajouté des balises de base du HTML, nous commençons à construire le tableau dans le corps du code HTML. Nous avons mis le «
" étiqueter. Dans cette balise, nous allons créer la ligne de cap en utilisant le «tr» puis la balise «th». Dans la balise «th», nous ajoutons des données ici. Ensuite, nous utilisons à nouveau «tr» pour chaque ligne.
Ensuite, nous utilisons la balise «TD» dans cette balise «tr». Et ajouter des données dans ce «TD» afin qu'il ajoute des données aux lignes de la table. Après avoir terminé ce code, nous devons l'enregistrer avec le «.Extension de fichier HTML »et nous devons lier ce fichier avec le fichier CSS dans la« tête »de ce fichier HTML. Nous utiliserons ce tableau dans tous les exemples de ce guide, mais appliquerons différentes propriétés de rembourrage de cellules dans chaque exemple. Maintenant, après avoir enregistré cela, nous allons nous diriger vers le fichier CSS dans lequel nous utiliserons les propriétés CSS. Ainsi, toutes ces propriétés s'appliqueront ici dans ce tableau.
Nous avons créé un titre en HTML. Donc, ici, nous allons le coiffer un peu en utilisant la propriété «couleur». Nous définissons la couleur de la police sur «Maroon». Ensuite, nous avons également réglé sa «famille de police» et utilisons «l'algérien» comme valeur de cette propriété. Ensuite, appliquez la bordure «2px» sur toute la table. Le type est défini ici sur «solide» et la couleur de la «bordure» est «marron».
Ensuite, la «largeur» de la table est définie. Nous mettons «auto» ici afin que la largeur s'ajustera automatiquement en fonction des données. Après cela, la propriété de la «frontière» est là, et c'est «l'effondrement». Ainsi, la bordure de la table sera effondrée. Maintenant, nous devons créer une bordure pour chaque cellule. Donc, pour cela, nous utilisons à nouveau la propriété «frontière» pour «TH» et «TD». Les données écrites dans ces cellules sont définies sur la couleur «noir» dans la propriété «couleur».
Maintenant, nous définissons le rembourrage des cellules à l'aide de la propriété «rembourrage» dans CSS et définissons le rembourrage «15px» ici. Il créera un espace 15px entre la cellule et les données du haut, de la gauche, du bas et des côtés droits. Si nous voulons appliquer le même rembourrage sur les quatre côtés, nous utilisons cette propriété «rembourrage». Cette propriété applique le rembourrage de tous les côtés.
Dans cette sortie, notez qu'il y a un espace entre le texte qui est écrit à l'intérieur de la cellule et la bordure de cette cellule. L'espace des quatre côtés est égal. Il s'agit d'un rembourrage cellulaire dans CSS et cette propriété «rembourrage» définit un rembourrage égal de tous les côtés.
Exemple n ° 2:
Ici, le code est le même que nous avons discuté dans le premier exemple. Nous changeons simplement la «couleur» du titre et la couleur de la «bordure» de la cellule en «vert». Lorsque nous utilisons cette propriété «padding-gauche», elle ajustera le rembourrage des cellules sur le côté gauche uniquement. Nous définissons la valeur du «padding-gauche» sur «60px». Il créera 60px d'espace sur le côté gauche des données de la cellule et de la bordure de la cellule.
Dans cette sortie, il y a un espace sur le côté gauche entre les données et la bordure de toutes les cellules. C'est parce que nous utilisons la propriété «padding-gauche» ici. Donc, il ne crée l'espace souhaité que sur le côté gauche et il n'applique pas ce rembourrage sur les trois côtés restants.
Exemple # 3:
Dans cet exemple, nous changeons simplement la «couleur» de l'en-tête, la couleur de la «bordure» de la cellule et la table à «orange». Lorsque nous utilisons la propriété «padding-droite», elle n'affecte que le rembourrage des cellules sur le côté droit. Il fera un espace entre les données présentes à l'intérieur de la cellule et le bord droit de la cellule. La valeur du «padding-droite» ici est définie sur «50px."Cela laissera un écart de 50px entre les données de la cellule et la frontière de la cellule sur le côté droit.
Vous pouvez voir qu'il y a un espace uniquement sur le côté droit entre les données et la bordure de toutes les cellules. Cela est dû à l'utilisation de la propriété «padding-droite». En conséquence, il crée simplement le rembourrage nécessaire sur le côté droit et ignore les trois côtés restants.
Exemple n ° 4:
Ici, nous modifions simplement la «couleur» de la rubrique, la «bordure» des cellules et la bordure de la table en «bleu». Nous utilisons le «padding-top» de la propriété CSS. La propriété «padding» n'affecte que le rembourrage des cellules sur le dessus lorsqu'il est utilisé. Le «padding-top» est défini sur «55px» dans ce cas. En haut, il y aura un écart de 55px entre les données de la cellule et la bordure de la cellule.
Ici, sur le côté supérieur de chaque cellule, il y a un espace entre les données et la limite de la cellule. Cela est dû à l'utilisation de la propriété «padding-top». En conséquence, il ne fait qu'ajouter le rembourrage nécessaire au côté supérieur.
Exemple n ° 5:
Maintenant, nous changeons la «couleur» de la rubrique, la «bordure» des cellules et la table en «violet». Nous utilisons la propriété CSS, «Padding-Bottom». Lorsque l'attribut «padding-bottom» est appliqué, il ne fait que le rembourrage des cellules en bas. Il fera un rembourrage de cellule entre les données à l'intérieur de la cellule et la bordure inférieure de la cellule. Dans ce scénario, le «padding-boot» est défini sur «53px».
Ici, vous pouvez observer l'espace entre les données à l'intérieur de la cellule et la bordure inférieure de la cellule. Comme nous utilisons la propriété «padding-boot», il ajoute le rembourrage de cellule uniquement au bas de la cellule.
Conclusion:
Ce guide a expliqué le concept de rembourrage de cellules en CSS en détail. Nous avons discuté de différentes propriétés de rembourrage ici et nous avons utilisé ces propriétés dans différents codes CSS. Nous avons établi que dans CSS, nous ajustons le rembourrage des cellules de tous les côtés de la cellule en utilisant la propriété «rembourrage» et appliquant un rembourrage d'un seul côté en utilisant différentes propriétés de rembourrage. Nous avons examiné une variété de codes dans lesquels nous avons utilisé ces propriétés ainsi que les effets de ces propriétés sur la cellule de la table. Vous réglerez le rembourrage des cellules après avoir lu ce guide à fond.
