Tutoriel CSS3 - sommaire

CSS2 et les tableaux HTML

La production d'un tableau c'est beaucoup de code HTML.
Le code HTML relatif à un tableau peut être généré par un script JS ou mieux encore, un script PHP.

Concernant les propriétés CSS relatives aux tableaux, sachez qu'il y une hiérarchie.

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 troisième.

Règles de style applicables aux trois tableaux

table {width: 80% ; margin : 10px auto 10px auto ; }
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 classe "tableau1"

	.tableau1 {border-spacing :5px; }

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 classe "tableau2"

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

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. Il y a donc une hiérarchie des propriétés.

Troisième tableau

La classe "tableau3"

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

Le rendu

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.