Les tableaux sont utilisés pour organiser et afficher les informations d'un jeu de données.
Documentationth0 | th1 | th2 | th3 | th4 | th5 |
---|---|---|---|---|---|
Lorem ips | Lorem ipsum dolor sit a | Lorem ipsum dolor | Lorem ipsum dolor sit amet, consectetur adipisc | Lorem ipsum | Lorem ipsum dolor sit amet, consectet |
Lorem ipsum dolo | Lorem ipsum dolor sit amet, c | Lorem ipsum dol | Lorem ipsum dol | Lorem i | Lorem ipsum dol |
<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 [...] eli</td>
<td>Lorem [...] elit ut.</td>
<td>Lorem [...] elit ut.</td>
<td>Lorem [...] elit ut.</td>
<td>Lore</td>
<td>Lorem [...] elit ut.</td>
</tr>
<tr>
<td>Lore</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 | Lorem ipsum dolor sit | Lorem ipsum dolor si | Lo | Lorem ipsum dolor sit amet, consectetur | Lorem ipsum dolor sit amet, consectetur a |
Lorem ipsum dolor sit amet, consectetur adipiscin | Lorem ipsum dolor sit amet, consectetur a | Lorem ipsum dolor s | Lorem ipsum dolor sit amet, | Lorem ipsum dolor sit amet, co | L |
<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>Lorem [...] elit ut.</td>
<td>Lorem [...] elit </td>
<td>Lorem [...] el</td>
<td>Lorem [...] elit ut.</td>
<td>Lorem [...] elit ut.</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 amet, consectetur adipiscin | Lorem ipsum do | Lorem ipsum dolor sit | Lorem ipsum d | Lore | Lorem ipsum dolor sit amet |
<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 [...] elit ut.</td>
<td>Lorem [...] elit u</td>
<td>Lorem [...] elit ut.</td>
</tr>
</tbody>
</table>
</div>
th0 | th1 | th2 |
---|---|---|
Lorem ipsum dolor sit amet, consectetur adipisc | Lorem ipsum dolor sit amet, consectetur adipiscin | Lorem ipsum dolor sit amet, cons |
<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 [...] e</td>
<td>Lorem [...] elit ut.</td>
<td>Lorem [...] elit ut.</td>
</tr>
</tbody>
</table>
</div>
th0 | th1 | th2 | th3 | th4 | th5 |
---|---|---|---|---|---|
Lorem | Lorem ipsum dolor sit amet, c | Lorem ipsum dolor sit amet, consectetur a | Lorem ipsum dolor sit amet, consectetur ad | Lorem ipsum | Lorem ipsum dolor sit amet |
<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 [...] elit ut.</td>
<td>Lorem</td>
<td>Lorem [...] elit ut.</td>
<td>Lorem [.</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 | Lo | Lo | Lorem ipsum dolor sit amet, consectetur ad | Lorem ipsum dolor sit amet, consec | Lor |
<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 [...]</td>
<td>Lorem [...] elit</td>
<td>Lore</td>
<td>Lorem [...] elit ut.</td>
<td>Lorem [...] elit ut.</td>
</tr>
</tbody>
</table>
</div>
th0 | th1 | th2 | th3 | th4 | th5 |
---|---|---|---|---|---|
Lore | Lorem ipsum dolor sit amet, consectetur adipiscin | Lorem ipsum dolor sit a | Lorem | Lorem ipsu | Lorem ipsum dolor |
Lorem ipsum dolor s | Lorem ipsum dolor sit amet, consectetur adipiscin | Lorem ipsum d | Lorem ipsum dolor | Lorem ipsum d | Lorem ip |
<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 [...] elit ut.</td>
<td>Lorem [...] elit ut.</td>
<td>Lorem [...] elit ut.</td>
<td>Lorem [...] elit ut.</td>
<td>Lorem [...] elit ut.</td>
</tr>
<tr>
<td>Lo</td>
<td>Lorem [...] elit ut.</td>
<td>Lorem [...] elit ut</td>
<td></td>
<td>Lorem [...] elit ut.</td>
<td>Lor</td>
</tr>
</tbody>
</table>
</div>
th0 | th1 | th2 | th3 | th4 | th5 |
---|---|---|---|---|---|
Lorem ipsum dolor sit amet, consectetur ad | Lorem | Lorem ipsum dolor sit amet, consectetur adipisc | Lorem ipsum dolor sit amet, consectetur adipisc | Lorem ipsum dolor sit ame | Lorem ipsum dolor sit amet, co |
Lorem | Lorem ipsum dolor sit amet, consectetu | Lorem ipsum dolor sit amet, consectetur adip | Lorem ipsum dolor sit amet, | Lorem ipsum dolor sit amet, | Lorem ipsum d |
<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 [...]</td>
<td>Lorem [...] elit ut.</td>
<td>Lorem [...] elit ut.</td>
<td>Lore</td>
<td>Lorem [...] elit ut.</td>
<td>Lorem [...] elit ut</td>
</tr>
<tr>
<td>Lorem [...] elit ut.</td>
<td>Lorem [...] el</td>
<td>Lorem [...] elit ut.</td>
<td>Lo</td>
<td>Lorem [...] elit ut.</td>
<td>Lorem</td>
</tr>
</tbody>
</table>
</div>