Accueil

Traduction

Tutoriel CSS - sommaire

Sommaire partiellement masqué - faites défiler !

Tutoriel CSS - recherche

L'auteur : Patrick Darcheville

Vous pouvez me contacter via Facebook pour questions & suggestions : Page Facebook relative à mon site

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

Catalogue
référenceprix HTtaux TVA
BO1110 €10%
VI30020 €10%
CL0405 €20%
EC15015 €20%
*****
*****
nbre référenceprix moyen
412,5 €

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

Catalogue
référenceprix HTtaux TVA
BO1110 €10%
VI30020 €10%
CL0405 €20%
EC15015 €20%
*****
*****
nbre référenceprix moyen
412,5 €

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

Catalogue
référenceprix HTtaux TVA
BO1110 €10%
VI30020 €10%
CL0405 €20%
EC15015 €20%
*****
*****
nbre référenceprix moyen
412,5 €

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".