Effondrement de la frontière CSS

Code CSS:
Nous appliquons certaines propriétés sur la rubrique pour rendre notre rubrique plus attrayante. Nous changeons sa «famille de police» et la fixons sur «Arial». Le style de ce texte de titre est «italique» et la couleur de cette rubrique est «bleu». Maintenant, nous passons à la table et fixons la bordure de la table comme «1px» en largeur, «solide» en type et «noir» en couleur. Le concept principal est utilisé ici qui est «la frontière-effondrement». Nous utilisons cette propriété et définissons cette «frontière-mèche» pour «s'effondrer».

Sortir:
Jetons un coup d'œil à l'image suivante dans laquelle la sortie est affichée. Vous pouvez voir que la bordure de la table est célibataire.

Exemple n ° 2
Dans ce cas, nous modifions un peu la table précédente. Ici, nous ajoutons deux autres colonnes à la table précédente et utilisons à nouveau la propriété "Border-Collapse" sur cette nouvelle table.

Code CSS:
Dans le code CSS, nous utilisons une autre propriété qui est la propriété «d'espacement des bordures». Vous verrez si cela affecte ou non la bordure de la table lorsque nous utilisons la propriété «bordure-bordure» avec cette propriété.

Nous modifions la «Font-Family» de la rubrique. Cette fois, nous utilisons «Calibri» comme «Font-Family» de la rubrique. La «couleur» que nous utilisons ici pour le titre est «rouge». Maintenant, appliquez à nouveau la propriété «Border» pour la table, la cellule et le cap de la table. La bordure de toutes ces propriétés est définie sur «2px», avec un type «solide» et une couleur «verte». La propriété «border-rollapse» devrait «s'effondrer». Ensuite, nous utilisons «l'espacement des bordures» pour donner de l'espace entre la bordure de la table et les cellules de la table. Nous l'avons réglé sur «20px».

Sortir:

Ici, la sortie ne montre aucune différence dans le bord des tables et des cellules. Il apparaît la même que dans l'illustration précédente. Cela signifie que la propriété «d'espacement des bordures» ne change pas l'espace de bordure de la table parce que nous avons utilisé la propriété «bordure-bordure» dans ce tableau avec la propriété «d'espacement des bordures».

Exemple n ° 3
Ici, nous créons deux tables différentes de la même manière que celles discutées précédemment dans notre premier exemple. Nous créons deux tables afin que nous puissions apprendre comment cette propriété «border-colapse» fonctionne différemment de la propriété «séparée».

Code CSS:
La «Font-Family» de la tête est «Times New Roman» avec une couleur «bleue». La «bordure» des deux tables est définie sur la couleur «orange» et «2px» de type «solide». Nous utilisons la propriété «border-colapse» dans le tableau 1. Nous utilisons également l'autre «border-ycaplue» dans le tableau 2, mais cette fois, nous définissons cette propriété comme «séparée».

Sortir:
Ici, nous avons deux tables dans la sortie. La première bordure de table est la même que dans nos exemples précédents. Mais la deuxième bordure de table est différente parce que nous avons utilisé le «séparé» avec le «frontière à la frontière». La bordure de la table est séparée de la bordure des cellules dans une table.

Exemple n ° 4
Ici, nous avons à nouveau deux tables que nous avons conçues dans l'exemple 3. Maintenant, nous modifions quelques styles de ces tables, utilisons la propriété «espacement des bordures» sur les deux tables et vérifions la différence dans les deux tables.

Cette fois, la «Font-Family» de la tête est «algérienne» et la couleur est «marron». La bordure de la table est de couleur «magenta». Le tableau 1 utilise «l'effondrement» avec le «border-rcapslay» avec un «espacement des bordures» de «10px». Pour le tableau deux, nous utilisons une bordure «séparée» et «l'espacement des bordures» est également «10px». La sortie montrera la différence.

Sortir:
Dans la sortie, vous pouvez facilement voir la différence entre le tableau un et le tableau deux. Cela montre que lorsque nous utilisons la «bordure de bordure: bordure», alors «l'espacement des bordures» n'affecte pas le tableau. Mais lorsque nous utilisons la «frontière-effondrement: séparé», alors nous pouvons régler l'espacement de la frontière entre les cellules et la bordure de la table en fonction de notre choix.

Exemple n ° 5
Ici, nous appliquons les trois propriétés de la bordure de la table. Tout d'abord, nous utilisons la propriété «border-collapse» dans le tableau 1 qui est définie comme «effondrement». Dans la deuxième propriété, nous changeons la couleur de la frontière en «vert de mer moyen». Dans la troisième propriété, nous utilisons «l'espacement des bordures: 10px». Après cela, nous utilisons les mêmes propriétés dans le tableau 2, mais nous utilisons la «séparation» au lieu de «l'effondrement» dans la propriété «Border-Collapse». De plus, nous avons réglé la couleur de la bordure sur «violet» et utilisons le même «espacement des bordures». Maintenant, regardez comment ça marche.

Il n'y a pas de changement dans le tableau 1. Il n'y a pas d'espacement entre le bord de la table et les cellules. La couleur de la table est la même. La propriété «bordure de bordure» n'affecte pas le tableau car nous utilisons la bordure «effondrement» du tableau 1. Mais dans le tableau 2, vous pouvez voir que la couleur de la bordure de la table et la bordure de la cellule sont différentes. De plus, il y a un espacement de «10px» entre la frontière de la cellule et la frontière de la table.

Conclusion

Dans ce didacticiel, nous avons utilisé la propriété «border-collapse» et avons appris la différence lorsque nous utilisons «séparé» et «effondrement» avec la propriété «border-collapse». On nous montre également la sortie dans laquelle la différence de «séparé» et «effondrement» est visible. Vous pouvez facilement obtenir ce concept sur la façon dont les deux propriétés sont différentes les unes des autres. Vous avez appris ce qui se passe lorsque nous utilisons la propriété «séparée» et «s'effondrer» avec la propriété «border-colapset» dans CSS.

• « Css att
• Propriété CSS Border-Left »