Médiaforma

Choisir la forme de la bordure d’un tableau

Print Friendly

L’attribut border de la balise <table> affiche une bordure autour des cellules d’un tableau. En remplaçant cet attribut par quelques propriétés CSS, vous allez pourvoir choisir la couleur, l’épaisseur et la forme de la bordure.

Voici les propriétés à utiliser :

  • border-color pour choisir la couleur de la bordure. Vous pouvez utiliser une couleur prédéfinie, comme blue ou red, ou un code RVB hexadécimal précédé du signe #, comme #451244 ;
  • border-width pour choisir l’épaisseur de la bordure. Cette propriété peut prendre les valeurs thin, medium ou thick ou être définie en pixels (px), points (pt) ou une autre unité de mesure quelconque;
  • border-style pour choisir la forme de la bordure : dashed, dotted, double, solid, .inset, groove, ridge ou outset.

Dans cet exemple, la bordure est de couleur rouge, épaisse de 5 pixels et pointillée.

Entrainez-vous à utiliser d’autres valeurs pour les trois propriétés CSS border et examinez le résultat obtenu.

Ne voyez-vous pas quelque chose d’étrange dans cette bordure ? Elle entoure le tableau, mais pas les cellules qui le composent. Ceci est tout à fait normal puisque l’attribut style a été spécifié dans la balise <table> et non dans les différents <td>. Pour résoudre élégamment ce problème, vous devez modifier le style de la balise <td>. Cette technique sera étudiée dans la rubrique suivante.

Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

No comments yet.

Leave a Reply