HTML4 : les tableaux

Les balises relatives aux tableaux HTML ne se limitent pas table,tr,th,td. Il en existe d'autres moins connues.
Ci-dessous un tableau écrit en HTML4 :

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.
Les cellules du tableau font 50 pixels de haut. Le texte est centré verticalement dans chaque cellules
Des cellules sont masquées.
Espacement de 5 pixels entre les cellules.

Le code HTML correspondant

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

La feuille de style correspondantes

	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 ; }

Par défaut le texte est centré verticalement dans chaque cellule TD ou TH mais ce n'est pas le cas avec la balise CAPTION.
Aussi ai-je ajouté pour cette dernière balise line-height : 50px. Ainsi la ligne unique de texte est centrée verticalement dans sa boite (qui fait aussi 50px de haut).


Retour menu