Styler les tableaux

Fusionner les bordures

Si nous ajoutons des bordures aux cellules d'un tableau, nous verrons que chaque cellule aura sa propre bordure. Dans plusieurs cas, on voudra fusionner ces bordures pour empêcher un dédoublement des bordures entre les cellules. Pour ce faire, nous utiliserons la propriété border-collapse.

Cette propriété accepte 2 valeurs, soit seperate (valeur par défaut) et collapse. Voici un exemple:

HTML

CSS

Espacement

Les cellules <td> et <th> ne fonctionne pas de la même façon qu'un élément régulier dans une page web. En effet, la propriété margin n'a aucun effet sur eux. Si vous voulez mettre de l'espacement entre les cellules d'un tableau, vous devez plutôt utiliser la propriété border-spacing.

Cette propriété peut s'utiliser avec une valeur pour définir l'espacement de tous les côtés ou avec deux valeurs pour définir l'espacement gauche/droite et l'espacement haut/bas séparément. On l'utilise de la façon suivante:

HTML

CSS

À noter

Bien que le margin ne fonctionne pas dans un tableau, le padding, lui, est disponible. Bref, si vous voulez mettre de l'espacement à l'intérieur d'une cellule, vous pouvez le faire avec la propriété padding.

Attention

La propriété border-spacing peut uniquement fonctionner si les bordures du tableau sont séparé. Bref, si vous tentez de mettre un border-spacing sur un tableau qui a le border-collapse à la valeur collapse, il ne se passera rien.

Position du titre

Le titre ou la légende d'un tableau se retrouve dans la balise <caption>. Cette balise doit toujours être la première dans un <table> si elle est présente et s'affiche toujours en haut du tableau par défaut. Il est toutefois possible de déplacer ce titre en dessous du tableau à l'aide de la propriété caption-side.

Cette propriété accepte seulement 2 valeurs différentes, soit top (valeur par défaut) ou bottom. Voici comment l'utiliser:

HTML

CSS

<< Page précédente Page suivante >>