Dans une page Web, le tableau demeure un élément indispensable. La conception d'un document HTML élaboré nécessite d'une façon quasi-systématique le recours aux tableaux.
En effet, un tableau est utilisé non seulement comme contenant d'informations, de données, de renseignements divers parfaitement agencés et structurés permettant une lecture claire, systématique ou méthodique.
Dans une page HTML, le tableau permet également de disposer sur le document différents éléments tels que du texte ou des images dans un but de présentation, ou de lisibilité.
Par sa puissance fonctionnelle, mais aussi par la discrétion dont il sait faire preuve, le tableau prend souvent une place centrale dans tous les documents HTML complexes.
L'utilisation pertinente d'un tableau résout dans de nombreux cas des situations insolubles.
La commande <table> marque le début d'un tableau.
La commande </table> marque la fin d'un tableau.
<html> <head> <title>Un titre pertinent</title> <meta name="Description" content="..."> <meta http-equiv="Date" content="01/01/2000"> ... </head> <body> <table> ... </table> ... Diverses commandes HTML ... </body> </html> |
Un tableau peut être composé de trois sous-parties permettant de distinguer respectivement, la partie supérieure, le corps et la partie inférieure d'un tableau.
<table> | <thead> |
|
</thead> | </table> | |||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
<tbody> | </tbody> | ||||||||||||
<tfoot> | </tfoot> |
L'illustration ci-dessous vous décrit un tableau à cinq colonnes comportant une cellule fusionnée pour accueillir le titre, un en-tête composé de cinq cellules et enfin cinq lignes de données constituées également de cinq cellules chacune.
<table> |
Première colonne | Seconde colonne | ||
---|---|---|---|---|
Titre | <caption> | ...Titre tableau... | </caption> | |
En-tête | <tr> | <th> ... </th> |
<th> ... </th> |
</tr> |
Première ligne | <tr> | <td> ... </td> |
<td> ... </td> |
</tr> |
Seconde ligne | <tr> | <td> ... </td> |
<td> ... </td> |
</tr> |
Troisième ligne | <tr> | <td> ... </td> |
<td> ... </td> |
</tr> |
Quatrième ligne | <tr> | <td> ... </td> |
<td> ... </td> |
</tr> |
Cinquième ligne | <tr> | <td> ... </td> |
<td> ... </td> |
</tr> |
</table> |