Comment éliminer l'espacement entre les bordures de la table avec CSS

Mohamed Benoit

Lorsque la table est créée en HTML, principalement le CSS "frontière»La propriété y est appliquée. Cela entraînera une table avec des frontières qui ont de l'espace entre eux. Dans les versions antérieures de HTML, l'attribut de celle de cellules a été utilisé pour supprimer cet espace. Cependant, ces jours-ci, le CSS "bordel à la frontière»La propriété peut être utilisée dans le même but.

Ce manuel guidera lié à:

- Quel est le "bordel à la frontière»Propriété CSS?
- Que sont les "bordel à la frontière»Valeurs de propriétés CSS?
- Comment effondrer l'espacement entre les bordures de la table avec CSS?

Quelle est la propriété CSS «Border-Collapset»?

Le CSS "bordel à la frontière»La propriété est utilisée pour ajuster les bordures du tableau comme s'effondrer ou séparés. Lorsque nous appliquons la propriété frontalière à la

, et

Éléments, il en résulte un tableau ayant des bordures avec des espaces entre eux. Pour supprimer cet espace, nous utilisons la propriété CSS «Border-Collapse» avec la valeur «effondrement".

Quelles sont les valeurs de propriété CSS «Border-Collapset»?

Les valeurs associées à la propriété mentionnée sont répertoriées ci-dessous:

- "séparé»: Cette valeur ajoute des espaces entre les bordures de la table.
- "effondrement»: Cette valeur supprime les espaces entre les bordures de la table.
- "hériter»: Cette valeur définit la valeur par défaut.
- "initial»: Cette valeur hérite de son parent.

Analyser l'exemple ci-dessous!

Exemple: comment créer une table dans HTML?

Dans HTML, d'abord, ajoutez un «

»Élément pour créer une table. Ensuite, ajoutez un élément de légende. Après cela, le nombre de lignes est créé en utilisant le «" étiqueter. La première Tag détient le «

»Tags pour les titres. D'autres tags TR maintiennent le

Tags pour les données:

Informations sur les étudiants
Nom d'étudiant Nom du père Cours Score
John Bois Développement Java 90
Marguerite William Introduction à C++ 89
Bina Jack Introduction à C 79

Le résultat du code HTML ci-dessus est le suivant:

Maintenant, nous allons ajouter une propriété frontalière et d'autres propriétés pour améliorer l'apparence de la table.

Style «Table», «Th», «TD» Elements

table, th, td
Border: 2px solide # 432C7A;
marge: auto;
rembourrage: 4px;
Font-Family: Verdana, Genève, Tahoma, Sans-Serif;

Les propriétés CSS suivantes sont appliquées aux éléments de table, de TD et de TD:

- "frontière"La propriété se voit attribuer la valeur"Solide 2px # 432C7A”Qui définit la largeur de bordure 2px, le style de bordure solide et la couleur de bordure n ° 432C7A.
- "marge«Propriété avec la valeur»auto»Indique un espace égal autour de l'élément.
- "rembourrage«Propriété avec la valeur»4px”Définit l'espace de 4px autour du contenu de l'élément ou à l'intérieur de la bordure.
- "famille de polices»La propriété est définie comme Verdana, Genève, Tahoma et Sans-Serif. La liste des styles déclarée garantit que si le navigateur Web ne prend pas en charge la première valeur, alors d'autres seront appliqués.

Élément de table de style «Légende»

Légende de table
taille de police: 20px;

L'élément de légende est appliqué avec le «taille de police»Propriété avec la valeur 20px.

On peut observer que les propriétés de style CSS sont ajoutées avec succès à la table:

Comment effondrer l'espacement entre les bordures de la table avec CSS?

Le CSS "bordel à la frontière"La propriété est appliquée avec la valeur"effondrement”À la table, aux éléments TD et TD comme suit:

Border-Collapse: s'effondrer;

Cette propriété supprimera l'espacement entre les bordures du tableau comme suit:

Il s'agissait de retirer l'espacement entre les bordures de la table avec CSS.

Conclusion

Dans CSS, le «bordel à la frontière«La propriété est utilisée pour s'effondrer ou séparer l'espacement des frontières entre les bordures de la table. Cette propriété est appliquée avec des valeurs telles que l'effondrement, séparé, initial ou hérité. Chaque valeur remplit une fonction différente. Cependant, le "effondrement”La valeur supprime l'espacement entre les bordures du tableau. Ce message a décrit comment supprimer l'espacement entre les bordures de la table.