Tutoriel CSS - sommaire

CSS2 et les tableaux HTML

Le code HTML & CSS commun aux trois tableaux

Code HTML

Pour le premier tableau la valeur de l'attribut class ="tableau1", "tableau2" pour le deuxième tableau et "tableau3" pour le dernier.

Code CSS

Premier tableau de données

La règle de style pour la classe "tableau1"

Le rendu

Commentaire

Le titre du tableau (balise caption) est au dessus du tableau (par défaut la propriété caption-side vaut "top").
Les bordures contiguës sont séparées (par défaut border-collapse vaut "separate") ; séparation de 5px indiquée par la border-spacing.
Les bordures des cellules vides affichées (par défaut la propriété empty-cells vaut "show").

Deuxième tableau de données

La règle de style pour la classe "tableau2"

Le rendu

Commentaire

Le titre du tableau (balise caption) est en dessous du tableau (caption-side vaut "bottom").
Les bordures contiguës sont fusionnées : border-collapse:collapse;.
La propriété empty-cells : hide n'a pas d'incidence car les bordures contiguës sont fusionnées.
border-spacing : 10px n'est pas prise en compte puisque les bordures contiguës sont fusionnées.

Troisième tableau

La règle de style pour la classe "tableau3"

Le rendu

Commentaire

Le titre du tableau (balise caption) est au dessus du tableau (caption-side vaut "top").
Les bordures contiguës sont séparées (border-collapse vaut "separate").
La propriété empty-cells : hide masque les cellules vides cette fois-ci.

Résumons

Border-spacing : entier et empty-cells : hide appliquées uniquement si border-collapse vaut "separate".