Les tableaux (cellules, bordures et les styles)

Le contenu des cellules

Avant de continuer notre sujet des tableaux, j'en profite pour passer en revue tous ce que l'on peut mettre dans un tableau. Vous pouvez ajouter beaucoup d'autres éléments dans les cellules comme, des images, des tableaux, des liens, des balises <div>, des fonds personnalisés pour chaque cellules (image ou couleur) et même votre page entière en restant entre les balises <body> bien-sûr.

Les bordures

Le plus souvent avec les tableaux, on me demande comment supprimer les bordures que tous le monde trouvent laides ! Tous simplement en définissant la bordure à 0 ou en affectant un style différent à celle-ci, ce que nous allons voir maintenant.

Vous venez de créer un joli tableau pour votre page, mais vous aimeriez faire disparaître les bordures. Grâce à l'attribut border="épaisseur", vous affectez la valeur zéro pour l'épaisseur et voilà votre bordure disparue.

Sans bordures

Code

border="0"

border="1px"

<table border="1px"><tr>
   <td>
      Le contenu de la cellule
   </td>
</tr></table>

Le contenu de la cellule

Avec bordures

Vous désirez changer l'épaisseur de la bordure du tableau, alors augmentez la valeur de border tous simplement.

Code

border="1px"

border="3px"

<table border="3px"><tr>
   <td>
      Le contenu de la cellule
   </td>
</tr></table>

Le contenu de la cellule

Changer de style

Pour changer le style de bordure de votre tableau, appliquez un style CSS à la balise <table> où la balise <td> pour les cellules. Les couleurs peuvent être saisie avec leur correspondance en hexadécimal (#FFFFFF) ou par leur nom en anglais ( white, yellow, red, green...)

Dans l'exemple suivant, nous avons un style en pointillé (dotted) de couleur jaune (yellow) affecté la bordure du tableau.

Code

Style en pointillés jaune

<table style="border-style:dotted; border-color:yellow;">
<tr><td>
Cellule 1
</td><td>
Cellule 2
</td></tr></table>

Cellule 1

Cellule 2

Voici maintenant un exemple avec tous les styles appliqués aux cellules du même tableau.

Style applicable aux tableaux

Style DOTTED ( traits en pointillés )

Style DASHED ( ligne discontinue )

Style SOLID (ligne continue )

Style DOUBLE ( 2 lignes )

Style GROOVE ( en relief )

Style RIDGE ( ombré )

Style INSET ( en relief éclairé par le bas )

Style OUTSET ( en relief éclairé par le haut )