Tableaux

Le langage CSS permet également de styliser les tableaux créés en HTML.

La suite de ce cours détaille l’ensemble des propriétés utilisables pour styliser les tableaux HTML.

Bordures

Pour styliser les bordures d’un tableau, il faut utiliser la propriété raccourcie border. Cette propriété s’utilise exactement telle que décrite dans le cours sur les bordures, c'est-à-dire qu’elle reçoit les valeurs suivantes :

• Épaisseur de la bordure
• Style de bordure
• Couleur de la bordure

Exemple :

table, th, td {
    border : 5px solid black; /* Ici, le tableau ses cellules ont une bordure de 5px, de type solid et de couleur noire */
}

Tableau avec une largeur complète

Il est par ailleurs possible de donner une largeur au tableau, en utilisant la propriété CSS width. Cependant, dans certains cas, il est possible d’avoir besoin qu’un tableau prenne toute la largeur de la fenêtre du navigateur. Pour ce faire, la propriété width doit recevoir la valeur 100%.

Exemple :

table {
    width: 100%; /* Le tableau prend ici toute la largeur de l'écran */
}

Fusionner les cellules d’un tableau