DSFR v1.12.1
Les tableaux sont utilisés pour organiser et afficher les informations d'un jeu de données.
Documentation
Les exemples suivants sont dépréciés, ne pas utiliser comme référence
Pour support des versions précédentes
th0 | th1 | th2 | th3 | th4 | th5 |
---|---|---|---|---|---|
Lorem ipsum dolor sit ame | Lorem ipsum dolor sit ame | Lorem ipsum dolor sit ame | Lorem ipsum dolor sit ame | Lorem ipsum dolor sit ame | Lorem ipsum dolor sit ame |
Lorem ipsum dolor sit ame | Lorem ipsum dolor sit ame | Lorem ipsum dolor sit ame | Lorem ipsum dolor sit ame | Lorem ipsum dolor sit ame | Lorem ipsum dolor sit ame |
<div class="fr-table" id="table-7861">
<table>
<caption>Titre du tableau (caption)</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>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 |
---|---|
Lorem ipsum dolor sit ame | Lorem ipsum dolor sit ame |
Lorem ipsum dolor sit ame | Lorem ipsum dolor sit ame |
<div class="fr-table" id="table-7864">
<table>
<caption>Titre du tableau (caption)</caption>
<thead>
<tr>
<th scope="col">th0 </th>
<th scope="col">th1 </th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem [...] elit ut.</td>
<td>Lorem [...] elit ut.</td>
</tr>
<tr>
<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 ame | Lorem ipsum dolor sit ame | Lorem ipsum dolor sit ame | Lorem ipsum dolor sit ame | Lorem ipsum dolor sit ame |
Lorem ipsum dolor sit ame | Lorem ipsum dolor sit ame | Lorem ipsum dolor sit ame | Lorem ipsum dolor sit ame | Lorem ipsum dolor sit ame | Lorem ipsum dolor sit ame |
<div class="fr-table fr-table--bordered" id="table-7867">
<table>
<caption>Titre du tableau (caption)</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>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 ame | Lorem ipsum dolor sit ame | Lorem ipsum dolor sit ame | Lorem ipsum dolor sit ame | Lorem ipsum dolor sit ame |
<div class="fr-table fr-table--no-scroll" id="table-7870">
<table>
<caption>Titre du tableau (caption) 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 [...] 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 |
---|---|---|
Lorem ipsum dolor sit ame | Lorem ipsum dolor sit ame | Lorem ipsum dolor sit ame |
<div class="fr-table fr-table--layout-fixed" id="table-7873">
<table>
<caption>Titre du tableau (caption) 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" id="table-7876">
<table>
<caption>Titre du tableau (caption) caché</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>
</tbody>
</table>
</div>
<div class="fr-table fr-table--caption-bottom" id="table-7879">
<table>
<caption>Titre du tableau (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 [...] 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 ame | Lorem ipsum dolor sit ame | Lorem ipsum dolor sit ame | Lorem ipsum dolor sit ame | Lorem ipsum dolor sit ame |
Lorem ipsum dolor sit ame | Lorem ipsum dolor sit ame | Lorem ipsum dolor sit ame | Lorem ipsum dolor sit ame | Lorem ipsum dolor sit ame | Lorem ipsum dolor sit ame |
<div class="fr-table fr-table--green-emeraude" id="table-7882">
<table>
<caption>Titre du tableau (caption)</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>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 ame | Lorem ipsum dolor sit ame | Lorem ipsum dolor sit ame | Lorem ipsum dolor sit ame | Lorem ipsum dolor sit ame |
Lorem ipsum dolor sit ame | Lorem ipsum dolor sit ame | Lorem ipsum dolor sit ame | Lorem ipsum dolor sit ame | Lorem ipsum dolor sit ame | Lorem ipsum dolor sit ame |
<div class="fr-table fr-table--green-emeraude fr-table--bordered" id="table-7885">
<table>
<caption>Titre du tableau (caption)</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>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>