Un tableau produit avec CSS

Dans cette page je vais vous montrer que l'on peut réaliser dans une page web des tableaux sans utiliser les fameuses balises HTML table, caption, tr, td, etc. . Mais en utilisant le CSS !

Légende du tableau

Texte cellule Texte cellule Texte cellule

Texte cellule Texte cellule Texte cellule

Texte cellule Texte cellule Texte cellule

Le code HTML

<div class ="tableau"> <h2>Légende du tableau</h2> <p> <span>Texte cellule</span> <span>Texte cellule</span> <span>Texte cellule</span> </p> <p> <span>Texte cellule</span> <span>Texte cellule</span> <span>Texte cellule</span> </p> <p> <span>Texte cellule</span> <span>Texte cellule</span> <span>Texte cellule</span> </p> </div>

Point de balise table, caption, tr, th, td dans le code HTML et pourtant un beau tableau s'affiche ...
L'explication c'est certaines valeurs de la propriété display.

Le code CSS

	div.tableau{display : table; width : 600px ; margin :auto ; border-spacing : 10px ; border : 2px solid red;}
	div.tableau h2 {display : table-caption ; text-align : center; }
	div.tableau p{display : table-row; }
	div.tableau p span {display : table-cell; width :150px ; border : 1px solid black ; height : 50px; text-align : center; }

Retour menu