Médiaforma

All posts tagged bordure

Dans la rubrique précédente, vous avez appris à définir une bordure personnalisée pour un tableau. Dans cette rubrique, nous allons voir comment définir une bordure personnalisée pour chacune des cellules du tableau. Pour cela, il va falloir modifier le style de la balise <td>.

Commencez par insérer une balise <style> </style> entre les balises <head> et </head>, et définissez le type de la balise <style> à “text/css”. Pour modifier le style de la balise <td>, il suffit d’écrire td entre les balises <style> et </style> et d’énumérer les caractéristiques de la balise <td> entre des accolades. Ici, toutes les balises <td> auront une couleur rouge pointillée épaisse de 5 pixels.

Avec cet exemple élémentaire, vous commencez à percevoir le potentiel des instructions CSS. Le simple fait d’avoir modifié le style de la balise <td> entre les balises <style> et </style> s’applique à tout le document.

Un dernier détail : pour éviter d’avoir des bordures répétées entre les cellules, il suffit de définir la propriété CSS border-collapse de la balise <table> et de lui affecter la valeur collapse.


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.