HTML4 : révisions sur les tableaux

Les balises relatives aux tableaux HTML ne se limitent pas table,tr,th,td. Il en existe d'autres un peu moins connues et que nous allons aborder dans ce chapitre.

Exemple de tableau

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. Rappel : le texte est par défaut centré verticalement dans chaque cellule.
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 du corps du tableau (TBODY) il y a à chaque fois deux cellules vides.
Dans les deux lignes du pied de tableau (TFOOT) il n'y a que deux cellules au lieu de trois.
Chaque cellule délimitée par TD(alignement horizontal à gauche) ou TH (centrage horizontal).

Pour fusionner des cellules sur la même ligne (fusion sur plusieurs colonnes) il faut utiliser l'attribut colspan.
Sachez qu'il est possible de fusionner des cellules sur plusieurs lignes avec l'attribut rowspan. Voir le deuxième tableau.

La feuille de style de la page (donc commune aux deux tableaux)

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

Un autre exemple de tableau

BO1110 €10%
VI30020 €10%
CL0405 €20%
EC15015 €20%
Fusion de cellules******
******

Notez la fusion de cellules sur deux lignes dans la première colonne.

Le code HTML correspondant

<table> <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 rowspan ="2">Fusion de cellules</td><td>***</td><td>***</td></tr> <tr><td>***</td><td>***</td></tr> </table>

La dernière ligne TR ne contient que deux balise TD !
Retour menu