Deux en-têtes
Conception avec deux en-têtes
Pour les tableaux comportant un en-tête de rangée simple et un en-tête de colonne simple, utiliser l’attribut scope pour identifier les cellules d’en-tête.
Pour rendre l’information accessible au plus grand nombre possible :
- Convertir des tableaux complexes en un ou plusieurs tableaux simples
- Convertir un tableau en liste si les données sont simples
Bon exemple : Tableau avec colonne décalée de cellules d’en-tête
Dans ce tableau, la colonne 2 contient les cellules d’en-tête de la rangée. Les cellules de la colonne 2 utilisent des éléments <th> et l’attribut scope="row". Les cellules de la rangée 1 sont également marquées <th> et utilisent scope="col".
L'exemple commence
| ID | Nom | Janv | Fév | Mars |
|---|---|---|---|---|
| 355 | John | 3 | 2 | 0 |
| 561 | Andy | 0 | 2 | 3 |
| 765 | Michelle | 2 | 0 | 0 |
L'exemple finit
Voir le HTML
Début du code
<table class="table table-bordered table-hover">
<caption>
Congés de maladie pris au premier trimestre
</caption>
<thead>
<tr>
<th scope="col"><abbr title="Identification">ID</abbr></th>
<th scope="col">Nom</th>
<th scope="col">Janv</th>
<th scope="col">Fév</th>
<th scope="col">Mars</th>
</tr>
</thead>
<tbody>
<tr>
<td>355</td>
<th scope="row">John</th>
<td>3</td>
<td>2</td>
<td>0</td>
</tr>
<tr>
<td>561</td>
<th scope="row">Andy</th>
<td>0</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>765</td>
<th scope="row">Michelle</th>
<td>2</td>
<td>0</td>
<td>0</td>
</tr>
</tbody>
</table>
Fin du code
Bon exemple : Conversion d’un tableau en listes
L'exemple commence
| ID | Nom | Janv | Fév | Mars |
|---|---|---|---|---|
| 355 | John | 3 | 2 | 0 |
| 561 | Andy | 0 | 2 | 3 |
| 765 | Michelle | 2 | 0 | 0 |
L'exemple finit
L'exemple commence
Congés de maladie pris au premier trimestre
Janvier
- John (ID #355): 3
- Andy (ID #561): 0
- Michelle (ID#765): 2
Février
- John (ID #355): 2
- Andy (ID #561): 2
- Michelle (ID#765): 0
Mars
- John (ID #355): 0
- Andy (ID #561): 3
- Michelle (ID#765): 0
L'exemple finit