CSS2 et les tableaux HTML

Le code HTML & CSS commun aux trois tableaux

Code HTML

<table class =...> <caption>Catalogue</caption> <thead> <tr><th>référence</th><th>prix HT</th><th>taux TVA</th></tr> </thead> <tbody> <tr><td>BO11</td><td>10 €</td><td>10%</td></tr> <tr><td>VI300</td><td>20 €</td><td>10%</td></tr> <tr><td>CL040</td><td>5 €</td><td>20%</td></tr> <tr><td>EC150</td><td>15 €</td><td>20%</td></tr> <tr><td>*****</td><td></td><td></td></tr> <tr><td>*****</td><td></td><td></td></tr> </tbody> <tfoot> <tr><th>nbre référence</th><th colspan ="2">prix moyen</th></tr> <tr><td>4</td><td colspan ="2">12,5 €</td></tr> </tfoot> </table>

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

Code CSS

	table {width: 80% ; margin : 10px auto 10px auto ; }
	tbody {background : lime ;  }
	thead, tfoot{background : skyblue ;}
	tr, caption {height: 50px ; }
	caption {font-size : 20px ; line-height : 50px; background : yellow; }
	th,td, caption {border :1px solid black ; }
	td {padding-left : 5px ; padding-right : 5px ; }

Premier tableau de données

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

	.tableau1 {border-spacing :5px; }

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"

	.tableau2{border-collapse : collapse ;empty-cells : hide ; caption-side : bottom;  border-spacing : 10px; }

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

	.tableau3{border-collapse : separate ; border-spacing : 10px ; empty-cells : hide ; caption-side : top;  }

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