Un seul en-tête
Conception avec un seul en-tête
Dans le cas de tableaux simples comportant un en-tête de ligne ou un en-tête de colonne, utiliser l’élément <th> pour marquer la première rangée ou la première colonne.
Utiliser l’attribut scope pour identifier les cellules définies par l’en-tête. La portée indique si l’en-tête s’applique à une rangée, à une colonne ou à un groupe de rangées ou de colonnes. Consulter la section En-têtes irréguliers pour plus de détails sur l’attribut scope.
Bon exemple : Tableau simple avec des en-têtes en colonne
L'exemple commence
| Date | Heure | Description de la réunion |
|---|---|---|
| Lundi | 10 h | Point sur l’état d’avancement |
| Mardi | 14 h | Réunion des gestionnaires |
| Jeudi | 16 h | Réunion d’équipe |
L'exemple finit
Voir le HTML
Début du code
<table class="table table-bordered table-hover">
<caption>Réunions de cette semaine</caption>
<thead>
<tr>
<th scope="col">Date</th>
<th scope="col">Heure</th>
<th scope="col">Description de la réunion</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lundi</td>
<td>10 h</td>
<td>Point sur l’état d’avancement</td>
</tr>
[…]
</tbody>
</table>
Fin du code
Bon exemple : Tableau simple avec en-têtes de rangée
L'exemple commence
| Date | Lundi | Mardi | Jeudi |
|---|---|---|---|
| Heure | 10 h | 14 h | 16 h |
| Description de la réunion | Point sur l’état d’avancement | Réunion des gestionnaires | Réunion d’équipe |
L'exemple finit
Voir le HTML
Début du code
<table class="table table-bordered table-hover">
<caption>Réunions de cette semaine</caption>
<tbody>
<tr>
<th scope="row">Date</th>
<td>Luni</td>
<td>Mardi</td>
<td>Jeudi</td>
</tr>
<tr>
<th scope="row">Heure</th>
<td>10 h</td>
<td>14 h</td>
<td>16 h</td>
</tr>
<tr>
<th scope="row">Description de la réunion</th>
<td>Point sur l’état d’avancement</td>
<td>Réunion des gestionnaires</td>
<td>Réunion d’équipe</td>
</tr>
</tbody>
</table>
Fin du code