Les tableaux sont utilisés pour organiser et afficher les informations d'un jeu de données.
Documentationth0 | th1 | th2 | th3 | th4 | th5 |
---|---|---|---|---|---|
Lorem ipsum dolor si | Lorem ipsum dolor sit amet, consectetur adip | Lorem ipsum | Lorem ipsum dolor sit amet, cons | Lorem ipsum dolor sit amet, consecte | Lorem ipsum dolor sit a |
Lorem ipsum | Lorem ipsum dolor sit amet, consectetur adipis | Lorem ipsum dolor sit amet, | Lorem ipsum dolor sit am | Lorem ipsum dolor si | Lorem ipsum dolor sit amet, cons |
<div class="fr-table">
<table>
<caption>Caption du tableau (accessibilité)</caption>
<thead>
<tr>
<th scope="col">th0 </th>
<th scope="col">th1 </th>
<th scope="col">th2 </th>
<th scope="col">th3 </th>
<th scope="col">th4 </th>
<th scope="col">th5 </th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem [...] elit ut.</td>
<td>Lorem [...] elit ut.</td>
<td>Lorem [...] elit ut.</td>
<td>Lorem [...] elit ut.</td>
<td>Lorem [</td>
<td>Lorem [...] elit ut.</td>
</tr>
<tr>
<td>Lorem [...] elit ut.</td>
<td>Lorem [...] elit ut.</td>
<td>Lorem [...] elit ut.</td>
<td>Lorem [...] elit ut.</td>
<td>Lorem [...] elit ut.</td>
<td>Lorem [...] elit ut.</td>
</tr>
</tbody>
</table>
</div>
th0 | th1 | th2 | th3 | th4 | th5 |
---|---|---|---|---|---|
Lorem ipsum dolor sit ame | Lorem ipsum dolor sit amet, con | Lorem ipsum | Lorem ipsu | Lorem ipsum dolor sit amet, | Lorem ipsum dolor sit amet, consecte |
Lorem ipsum dolor sit am | Lorem ipsum dolor sit amet, conse | Lorem ipsum dolor sit amet, consectetur adipisc | Lorem ipsum | Lorem ipsum dolor sit amet, consectetur ad | Lorem ipsum dol |
<div class="fr-table fr-table--bordered">
<table>
<caption>Caption du tableau (accessibilité)</caption>
<thead>
<tr>
<th scope="col">th0 </th>
<th scope="col">th1 </th>
<th scope="col">th2 </th>
<th scope="col">th3 </th>
<th scope="col">th4 </th>
<th scope="col">th5 </th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>Lorem [...] elit ut.</td>
<td>Lorem [...] elit ut.</td>
<td>Lorem [...] elit ut.</td>
<td>Lorem</td>
<td>Lorem [...] elit ut.</td>
</tr>
<tr>
<td>Lorem [...] eli</td>
<td>Lorem [...] e</td>
<td>Lorem </td>
<td>Lorem [...] elit ut.</td>
<td>Lorem [...] elit ut.</td>
<td>Lorem [...] elit ut.</td>
</tr>
</tbody>
</table>
</div>
th0 | th1 | th2 | th3 | th4 | th5 |
---|---|---|---|---|---|
Lorem ipsum dolor sit a | Lorem ipsum dolor sit am | Lorem ipsum dolor sit amet, consec | Lorem ips | Lorem ipsum dolor sit amet, consectet | Lorem ipsum dolor sit amet, c |
<div class="fr-table fr-table--no-scroll">
<table>
<caption>Caption tableau non scrollable</caption>
<thead>
<tr>
<th scope="col">th0 </th>
<th scope="col">th1 </th>
<th scope="col">th2 </th>
<th scope="col">th3 </th>
<th scope="col">th4 </th>
<th scope="col">th5 </th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem [...] elit ut.</td>
<td>Lorem [...</td>
<td>Lorem [...] elit ut.</td>
<td>Lorem [..</td>
<td>Lorem [...] elit ut.</td>
<td>Lo</td>
</tr>
</tbody>
</table>
</div>
th0 | th1 | th2 |
---|---|---|
Lorem ipsum dol | Lorem ipsum dolor sit am | Lorem ipsum dolor sit amet, c |
<div class="fr-table fr-table--layout-fixed">
<table>
<caption>Caption tableau fixé</caption>
<thead>
<tr>
<th scope="col">th0 </th>
<th scope="col">th1 </th>
<th scope="col">th2 </th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem [...] elit ut.</td>
<td>Lorem [...] elit ut.</td>
<td>Lorem [...] elit ut.</td>
</tr>
</tbody>
</table>
</div>
<div class="fr-table fr-table--no-caption">
<table>
<caption>Caption cachée</caption>
<thead>
<tr>
<th scope="col">th0 </th>
<th scope="col">th1 </th>
<th scope="col">th2 </th>
<th scope="col">th3 </th>
<th scope="col">th4 </th>
<th scope="col">th5 </th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem [...] </td>
<td>Lorem [...] elit ut.</td>
<td>Lorem [...] elit ut.</td>
<td>Lorem [..</td>
<td>Lorem [...] elit ut.</td>
<td>Lorem [..</td>
</tr>
</tbody>
</table>
</div>
<div class="fr-table fr-table--caption-bottom">
<table>
<caption>Caption en bas</caption>
<thead>
<tr>
<th scope="col">th0 </th>
<th scope="col">th1 </th>
<th scope="col">th2 </th>
<th scope="col">th3 </th>
<th scope="col">th4 </th>
<th scope="col">th5 </th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem [...] elit ut.</td>
<td>Lorem [...] e</td>
<td>Lorem [...] elit ut.</td>
<td>Lorem [...] elit </td>
<td>Lorem [...] elit ut.</td>
<td>Lorem [...] elit ut.</td>
</tr>
</tbody>
</table>
</div>
th0 | th1 | th2 | th3 | th4 | th5 |
---|---|---|---|---|---|
Lorem ipsum dolor si | Lorem | Lorem | Lorem ipsum dolor sit ame | Lorem ipsum | Lorem ipsum dolor sit amet, consectetur adipis |
Lorem ipsum dolor sit amet, c | Lorem ipsum dolor sit amet, conse | Lorem ipsum dolor sit amet, consectetur | Lorem ipsum dolor sit amet, consect | Lorem ipsum dolor sit amet, consec | Lorem ipsum dolor sit amet, |
<div class="fr-table fr-table--green-emeraude">
<table>
<caption>Caption du tableau (accessibilité)</caption>
<thead>
<tr>
<th scope="col">th0 </th>
<th scope="col">th1 </th>
<th scope="col">th2 </th>
<th scope="col">th3 </th>
<th scope="col">th4 </th>
<th scope="col">th5 </th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem [...] elit ut.</td>
<td>Lorem [...] eli</td>
<td>Lorem [...] elit ut.</td>
<td>Lorem [...] elit ut.</td>
<td>Lorem [...] elit</td>
<td>Lorem [...] eli</td>
</tr>
<tr>
<td></td>
<td>Lorem [...] elit</td>
<td>Lorem [...] elit ut.</td>
<td>Lorem [...] elit ut.</td>
<td>Lorem [..</td>
<td>Lorem [...] elit ut.</td>
</tr>
</tbody>
</table>
</div>
th0 | th1 | th2 | th3 | th4 | th5 |
---|---|---|---|---|---|
Lorem ipsum dolor sit amet, consectetur adipiscin | Lorem | Lo | Lorem ipsum dolor | Lorem ipsum | Lorem ipsum dolor sit amet, |
Lorem ipsum | Lorem | Lorem ipsum dolor sit amet, consecte | Lorem ipsum dolor sit amet, consectetur a | Lorem ipsum dolor sit amet, consec | Lorem ipsum dolor sit amet |
<div class="fr-table fr-table--green-emeraude fr-table--bordered">
<table>
<caption>Caption du tableau (accessibilité)</caption>
<thead>
<tr>
<th scope="col">th0 </th>
<th scope="col">th1 </th>
<th scope="col">th2 </th>
<th scope="col">th3 </th>
<th scope="col">th4 </th>
<th scope="col">th5 </th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem [...] elit ut.</td>
<td>Lorem [...] elit ut.</td>
<td>Lore</td>
<td></td>
<td>Lorem [...] elit ut</td>
<td>Lorem [..</td>
</tr>
<tr>
<td>Lorem [...] elit ut.</td>
<td></td>
<td>Lorem [...] elit ut.</td>
<td>Lorem [...] elit ut.</td>
<td>Lorem [...] elit ut.</td>
<td>Lorem [...]</td>
</tr>
</tbody>
</table>
</div>