Les tableaux HTML sont prévus pour afficher des données. La structure d'un tableau HTML est composée au minimum de 4 balises différentes :
- la balise <table> : c'est le tableau lui-même
- la balise <tr> : c'est la ligne du tableau
- la balise <th> : c'est la cellule d'en-tête du tableau
- la balise <td> : c'est la cellule du tableau
Par exemple, le code HTML ci-dessous :
<table>
<tr>
<th>Poisson</th>
<td>20 euros</td>
<td>500 grammes</td>
</tr>
<tr>
<th>Viande</th>
<td>15 euros</td>
<td>900 grammes</td>
</tr>
</table>
ce qui donne à l'affichage :
Afficher une legende au tableau HTML : balise caption
La balise <caption> est facultative mais permet d'attribuer un titre au tableau HTML.
<table>
<caption>Mes courses</caption>
<tr>
<th>Poisson</th>
<td>20 euros</td>
<td>500 grammes</td>
</tr>
<tr>
<th>Viande</th>
<td>15 euros</td>
<td>900 grammes</td>
</tr>
</table>
ce qui donne à l'affichage :
Afficher un groupe de cellules d'en-tete au tableau HTML : balise thead
La balise <thead> est facultative mais permet d'afficher des en-têtes à chaque colonne du tableau HTML. Dans ce cas, je suis obligé d'ajouter une balise <tbody> afin d'encapsuler le corps du tableau HTML.
<table>
<caption>Mes courses</caption>
<thead>
<tr>
<th>Aliment</th>
<th>Prix</th>
<th>Poids</th>
</tr>
</thead>
<tbody>
<tr>
<th>Poisson</th>
<td>20 euros</td>
<td>500 grammes</td>
</tr>
<tr>
<th>Viande</th>
<td>15 euros</td>
<td>900 grammes</td>
</tr>
</tbody>
</table>
ce qui donne à l'affichage :
Afficher un groupe de cellules de pied au tableau HTML : balise tfoot
La balise <tfoot> est facultative. Elle doit être intégrée entre l'en-tête du tableau (balise <thead>) et le corps du tableau HTML (balise <tbody>).
<table>
<caption>Mes courses</caption>
<thead>
<tr>
<th>Aliment</th>
<th>Prix</th>
<th>Poids</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Total</th>
<th>35 euros</th>
<th>1400 grammes</th>
</tr>
</tfoot>
<tbody>
<tr>
<th>Poisson</th>
<td>20 euros</td>
<td>500 grammes</td>
</tr>
<tr>
<th>Viande</th>
<td>15 euros</td>
<td>900 grammes</td>
</tr>
</tbody>
</table>
ce qui donne à l'affichage :
