En-têtes irréguliers
Conception avec des en-têtes irréguliers
Un tableau est irrégulier lorsqu’un ou plusieurs de ses en-têtes englobent plusieurs colonnes ou rangées.
HTML introduit des attributs et des éléments destinés à représenter les relations entre ces en-têtes couvrant des rangées ou des colonnes et les cellules de données qu’ils définissent.
L'attribut scope
Lorsqu’un en-tête couvre plusieurs colonnes, ajouter l’attribut scope="colgroup" à l’élément <th>. Voir l’en-tête A dans le tableau ci-dessous.
Lorsqu’un en-tête s’étend sur plusieurs rangées, ajouter l’attribut scope="rowgroup" à l’élément th. Voir l’en-tête B dans le tableau ci-dessous.
Pour les en-têtes de colonne solo, ajouter l’attribut scope="col" à l’élément <th>. Voir les en-têtes A1, A2, A3 dans le tableau ci-dessous.
Pour les en-têtes de rangée solo, ajouter l’attribut scope="row" à l’élément <th>. Voir les en-têtes B1 et B2 dans le tableau ci-dessous.
L'exemple commence
| A | ||||
|---|---|---|---|---|
| A1 | A2 | A3 | ||
| B | B1 | |||
| B2 | ||||
L'exemple finit
Le support du lecteur d’écran pour l’attribut scope="rowgroup" est pire que le support pour l’attribut scope="colgroup". Lorsque cela est possible, concevoir des tableaux qui utilisent scope="colgroup" et éviter scope="rowgroup".
Voir le HTML
Début du code
<table class="table table-bordered">
<caption>Tableau comportant un en-tête de colonne et un en-tête de rangée</caption>
<thead class="bg-primary">
<tr>
<td colspan="2" rowspan="2"> </td>
<th colspan="3" scope="colgroup">A</th>
</tr>
<tr>
<th scope="col">A1</th>
<th scope="col">A2</th>
<th scope="col">A3</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="2" class="bg-primary" scope="rowgroup">B</th>
<th class="bg-primary" scope="row">B1</th>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th class="bg-primary" scope="row">B2</th>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
Fin du code
Éléments définissant le groupe
Les tableaux irréguliers définissent également leurs colonnes individuelles et colonnes recouvrantes avec, respectivement, les éléments <col> et <colgroup>. Ces éléments sont les premiers enfants de l’élément du tableau et sont énumérés dans l’ordre dans lequel les colonnes apparaissent dans le tableau. L’attribut span de l’élément <colgroup> contient le nombre de colonnes recouvertes.
Les tableaux irréguliers définissent des groupes de rangées en utilisant les éléments <thead>, <tbody> et <tfoot>. L’élément <tbody> définit un nouveau groupe de rangées pour chaque utilisation, alors que <thead> et <tfoot> le font aussi, mais ne peuvent être utilisés qu’une seule fois par tableau.
Bon exemple : Tableau avec en-têtes recouvrant des colonnes et des rangées
Dans cet exemple, « Pays » et « Propriété » sont des colonnes, chacune identifiée avec un élément <col>. « Scenario » couvre les colonnes, identifiées avec un élément <colgroup span="3">. Les en-têtes « Canada » et « É.-U. » et leurs rangées respectives sont emboîtés dans un élément <tbody>.
L'exemple commence
| Pays | Propriété | Scénario | ||
|---|---|---|---|---|
| A | B | C | ||
| Canada | Achat | probable | très improbable | S. O. |
| Location | improbable | très improbable | très improbable | |
| É.-U. | Achat | improbable | très improbable | très improbable |
| Location | probable | très probable | S. O | |
L'exemple finit
Voir le HTML
Début du code
<table class="table table-bordered">
<col>
<col>
<colgroup span="3"></colgroup>
<caption>Scénarios de propriété, Canada c. États-Unis</caption>
<thead>
<tr class="bg-success">
<th scope="col" rowspan="2">Pays</th>
<th scope="col" rowspan="2">Propriété</th>
<th scope="colgroup" colspan="3">Scénario</th>
</tr>
<tr class="bg-success">
<th scope="col">A</th>
<th scope="col">B</th>
<th scope="col">C</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="rowgroup" rowspan="2" class="bg-success">Canada</th>
<th scope="row" class="bg-success">Achat</th>
<td>probable</td>
<td>très improbable</td>
<td>S. O.</td>
</tr>
<tr>
<th scope="row" class="bg-success">Location</th>
<td>improbable</td>
<td>très improbable</td>
<td>très improbable</td>
</tr>
</tbody>
<tbody>
<tr>
<th scope="rowgroup" rowspan="2" class="bg-success">É.-U.</th>
<th scope="row" class="bg-success">Achat</th>
<td>improbable</td>
<td>très improbable</td>
<td>très improbable</td>
</tr>
<tr>
<th scope="row" class="bg-success">Location</th>
<td>probable</td>
<td>très probable</td>
<td>S. O</td>
</tr>
</tbody>
</table>
Fin du code