Un beau tableau ... (bof)

Les balises relatives au tableau HTML ne se limitent pas table,tr,th,td !

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

Trois couleurs de fond.
Des cellules sont masquées.
Espacement de 5px entre les cellules.

Le code HTML du tableau

<table> <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>

Dans les deux dernières lignes il y a à chaque fois deux cellules vides.
Dans les deux lignes du pied de tableau il n'y a que deux cellules (et non 3) par ligne : fusion des deux dernières en une seule.
Chaque cellule délimitée par TD(alignement horizontal à gauche) ou TH (centrage horizontal).
Que ce soit TD ou TH le texte est toujours centré verticalement dans sa cellule (par défaut vertical-align : middle).

La feuille de style relative au tableau

	table {width: 80% ; margin : auto ; border-spacing : 5px ; empty-cells : hide ;}
	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 ; }

Attention pour centrer verticalement le texte dans la boîte CAPTION il suffit que la ligne de texte (line-height) ait la même hauteur que la boîte (ici 50px).
La propriété vertical-align : middle ne s'applique qu'aux cellules du tableau (balise TD ou TH).
Retour menu