- Comment ajouter une bordure inférieure à la ligne du tableau
? - Définissez border-bottom sur l'élément Table Row
- Élément de tableau de styles
- Élément de style 'td'
- Élément de style 'tr'
Comment ajouter une bordure inférieure à la ligne du tableau
? L'ajout de la bordure inférieure à la ligne du tableau ajoutera la bordure à toute la ligne pour améliorer l'expérience visuelle et attirer l'attention de l'utilisateur.
Un exemple détaillé d'ajout de border-bottom à la ligne de tableau
est présenté ci-dessous :
Définissez border-bottom sur la ligne du tableau
Créez un tableau simple contenant 3 lignes et 3 colonnes dans notre fichier HTML qui sont faites en utilisant les éléments
, et :
< tableau >
< tr classe = 'ligne' >
< e > Nom < / e >
< e > Statut < / e >
< e > Chambre numéro < / e >
< / tr >
< tr classe = 'ligne' >
< td > Fakhar < / td >
< td > Étudiant < / td >
< td > 05 < / td >
< / tr >
< tr classe = 'ligne' >
< td > Omar < / td >
< td > Étudiant < / td >
< td > 05 < / td >
< / tr >
< / tableau >Dans l'extrait de code ci-dessus, nous avons attribué une classe de 'ligne' aux lignes du tableau
, afin qu'il soit accessible ultérieurement dans le CSS.
La page Web ressemblera à ceci :
Élément de tableau de styles
Dans la partie CSS, sélectionnez l'élément tableau et alignez le texte au centre. Après cela, utilisez le ' border-collapse ” propriété pour définir sa valeur sur repli :
tableau
{
border-collapse : effondrement ;
aligner le texte : centrer ;
}Élément de style 'td'
Pour une meilleure représentation visuelle, donnons un padding de 20px aux éléments table data «
» et table header « » : td
{
rembourrage : 20 px ;
}
e
{
rembourrage : 20 px ;
}La sortie ressemble à ceci :
La sortie ci-dessus a montré le rembourrage de 20 pixels et aligné le texte au centre.
Élément de style 'tr'
Dans le fichier CSS, ajoutez la propriété border-bottom sous le sélecteur 'tr'. Il attribue à chaque ligne du tableau, y compris la ligne d'en-tête. Par exemple, définissez sa valeur sur 2px solid darkcyan :
tr {
bordure inférieure : 2px cyan foncé solide ;
}Après avoir exécuté l'extrait de code ci-dessus, la page Web ressemble à ceci :
C'est tout sur la façon d'ajouter une bordure au bas de chaque ligne de tableau '
”. Conclusion
Pour ajouter une bordure au bas de l'élément
, définissez la propriété CSS border-collapse sur collapse et utilisez la propriété border-bottom sur l'élément « ». Il permet à la propriété CSS d'appliquer des bordures sur le tableau. C'est ainsi que vous pouvez facilement ajouter une bordure inférieure à chaque balise '
'. - Définissez border-bottom sur l'élément Table Row