DSFR v1.12.0
Les tableaux sont utilisés pour organiser et afficher les informations d'un jeu de données.
Documentation| th0 | th1 | th2 | th3 |
|---|---|---|---|
| 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 |
| 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-md-component">
<div class="fr-table__wrapper">
<div class="fr-table__container">
<div class="fr-table__content">
<table id="table-md">
<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>
</tr>
</thead>
<tbody>
<tr id="table-md-row-key-1" data-row-key="1">
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
</tr>
<tr id="table-md-row-key-2" data-row-key="2">
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
</tr>
<tr id="table-md-row-key-3" data-row-key="3">
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
</tr>
<tr id="table-md-row-key-4" data-row-key="4">
<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>
</div>
</div>
| th0 | th1 | th2 | th3 |
|---|---|---|---|
| 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 |
| Lorem ipsum dolor sit ame | Lorem ipsum dolor sit ame | Lorem ipsum dolor sit ame | Lorem ipsum dolor sit ame |
<div class="fr-table--sm fr-table fr-table" id="table-sm-component">
<div class="fr-table__wrapper">
<div class="fr-table__container">
<div class="fr-table__content">
<table id="table-sm">
<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>
</tr>
</thead>
<tbody>
<tr id="table-sm-row-key-1" data-row-key="1">
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
</tr>
<tr id="table-sm-row-key-2" data-row-key="2">
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
</tr>
<tr id="table-sm-row-key-3" data-row-key="3">
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
</tr>
<tr id="table-sm-row-key-4" data-row-key="4">
<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>
</div>
</div>
| th0 | th1 | th2 | th3 |
|---|---|---|---|
| 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 |
| Lorem ipsum dolor sit ame | Lorem ipsum dolor sit ame | Lorem ipsum dolor sit ame | Lorem ipsum dolor sit ame |
<div class="fr-table--lg fr-table fr-table" id="table-lg-component">
<div class="fr-table__wrapper">
<div class="fr-table__container">
<div class="fr-table__content">
<table id="table-lg">
<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>
</tr>
</thead>
<tbody>
<tr id="table-lg-row-key-1" data-row-key="1">
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
</tr>
<tr id="table-lg-row-key-2" data-row-key="2">
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
</tr>
<tr id="table-lg-row-key-3" data-row-key="3">
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
</tr>
<tr id="table-lg-row-key-4" data-row-key="4">
<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>
</div>
</div>
| th0 | th1 | th2 | th3 |
|---|---|---|---|
| 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 |
| 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-bordered-component">
<div class="fr-table__wrapper">
<div class="fr-table__container">
<div class="fr-table__content">
<table id="table-bordered">
<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>
</tr>
</thead>
<tbody>
<tr id="table-bordered-row-key-1" data-row-key="1">
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
</tr>
<tr id="table-bordered-row-key-2" data-row-key="2">
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
</tr>
<tr id="table-bordered-row-key-3" data-row-key="3">
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
</tr>
<tr id="table-bordered-row-key-4" data-row-key="4">
<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>
</div>
</div>
| th0 | th1 | th2 | th3 |
|---|---|---|---|
| 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 |
| 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-no-scroll-component">
<div class="fr-table__wrapper">
<div class="fr-table__container">
<div class="fr-table__content">
<table id="table-no-scroll">
<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>
</tr>
</thead>
<tbody>
<tr id="table-no-scroll-row-key-1" data-row-key="1">
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
</tr>
<tr id="table-no-scroll-row-key-2" data-row-key="2">
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
</tr>
<tr id="table-no-scroll-row-key-3" data-row-key="3">
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
</tr>
<tr id="table-no-scroll-row-key-4" data-row-key="4">
<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>
</div>
</div>
En ajoutant les classes fr-col--xs, fr-col--sm, fr-col--md ou fr-col--lg sur les cellules d'en-tête du tableau
| xs | sm | md | lg |
|---|---|---|---|
| Lorem | Lorem ipsu | Lorem ipsum dol | Lorem ipsum dolor si |
| Lorem | Lorem ipsu | Lorem ipsum dol | Lorem ipsum dolor si |
| Lorem | Lorem ipsu | Lorem ipsum dol | Lorem ipsum dolor si |
| Lorem | Lorem ipsu | Lorem ipsum dol | Lorem ipsum dolor si |
<div class="fr-table" id="table-column-sizes-component">
<div class="fr-table__wrapper">
<div class="fr-table__container">
<div class="fr-table__content">
<table id="table-column-sizes">
<caption>
Titre du tableau (caption)
</caption>
<thead>
<tr>
<th class="fr-col--xs">
xs
</th>
<th class="fr-col--sm">
sm
</th>
<th class="fr-col--md">
md
</th>
<th class="fr-col--lg">
lg
</th>
</tr>
</thead>
<tbody>
<tr id="table-column-sizes-row-key-1" data-row-key="1">
<td>
Lorem
</td>
<td>
Lorem [...
</td>
<td>
Lorem [...] eli
</td>
<td>
Lorem [...] elit ut.
</td>
</tr>
<tr id="table-column-sizes-row-key-2" data-row-key="2">
<td>
Lorem
</td>
<td>
Lorem [...
</td>
<td>
Lorem [...] eli
</td>
<td>
Lorem [...] elit ut.
</td>
</tr>
<tr id="table-column-sizes-row-key-3" data-row-key="3">
<td>
Lorem
</td>
<td>
Lorem [...
</td>
<td>
Lorem [...] eli
</td>
<td>
Lorem [...] elit ut.
</td>
</tr>
<tr id="table-column-sizes-row-key-4" data-row-key="4">
<td>
Lorem
</td>
<td>
Lorem [...
</td>
<td>
Lorem [...] eli
</td>
<td>
Lorem [...] elit ut.
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
Par défaut le contenu des cellules est centré verticalement et aligné à gauche mais peut être modifié à l'aide des classe utilitaires fr-cell--top, fr-cell--bottom pour l'alignement vertical et fr-cell--center, fr-cell--right pour l'alignement horizontal
| top | bottom | center | right |
|---|---|---|---|
| Lorem ipsum dolor sit ame | Lorem ipsum dolor sit ame | Lorem ipsum dolor sit ame |
Lorem
Lorem ipsu Lorem ipsum dolor sit ame |
| Lorem ipsum dolor sit ame | Lorem ipsum dolor sit ame | Lorem ipsum dolor sit ame |
Lorem
Lorem ipsu Lorem ipsum dolor sit ame |
| Lorem ipsum dolor sit ame | Lorem ipsum dolor sit ame | Lorem ipsum dolor sit ame |
Lorem
Lorem ipsu Lorem ipsum dolor sit ame |
| Lorem ipsum dolor sit ame | Lorem ipsum dolor sit ame | Lorem ipsum dolor sit ame |
Lorem
Lorem ipsu Lorem ipsum dolor sit ame |
<div class="fr-table fr-table--bordered" id="table-default-component">
<div class="fr-table__wrapper">
<div class="fr-table__container">
<div class="fr-table__content">
<table id="table-default">
<caption>
Titre du tableau (caption)
</caption>
<thead>
<tr>
<th>
top
</th>
<th>
bottom
</th>
<th>
center
</th>
<th>
right
</th>
</tr>
</thead>
<tbody>
<tr id="table-default-row-key-1" data-row-key="1">
<td class="fr-cell--top">
Lorem [...] elit ut.
</td>
<td class="fr-cell--bottom">
Lorem [...] elit ut.
</td>
<td class="fr-cell--center">
Lorem [...] elit ut.
</td>
<td class="fr-cell--right">
Lorem
<br>Lorem [...
<br>Lorem [...] elit ut.
</td>
</tr>
<tr id="table-default-row-key-2" data-row-key="2">
<td class="fr-cell--top">
Lorem [...] elit ut.
</td>
<td class="fr-cell--bottom">
Lorem [...] elit ut.
</td>
<td class="fr-cell--center">
Lorem [...] elit ut.
</td>
<td class="fr-cell--right">
Lorem
<br>Lorem [...
<br>Lorem [...] elit ut.
</td>
</tr>
<tr id="table-default-row-key-3" data-row-key="3">
<td class="fr-cell--top">
Lorem [...] elit ut.
</td>
<td class="fr-cell--bottom">
Lorem [...] elit ut.
</td>
<td class="fr-cell--center">
Lorem [...] elit ut.
</td>
<td class="fr-cell--right">
Lorem
<br>Lorem [...
<br>Lorem [...] elit ut.
</td>
</tr>
<tr id="table-default-row-key-4" data-row-key="4">
<td class="fr-cell--top">
Lorem [...] elit ut.
</td>
<td class="fr-cell--bottom">
Lorem [...] elit ut.
</td>
<td class="fr-cell--center">
Lorem [...] elit ut.
</td>
<td class="fr-cell--right">
Lorem
<br>Lorem [...
<br>Lorem [...] elit ut.
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
Il est possible de réactiver le retour à la ligne des éléments inline en ajoutant la classe fr-cell--multiline sur l'element table, une ligne ou une cellule du tableau
| th0 | th1 | th2 | th3 |
|---|---|---|---|
| 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 |
| 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-multiline-component">
<div class="fr-table__wrapper">
<div class="fr-table__container">
<div class="fr-table__content">
<table class="fr-cell--multiline" id="table-multiline">
<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>
</tr>
</thead>
<tbody>
<tr id="table-multiline-row-key-1" data-row-key="1">
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
</tr>
<tr id="table-multiline-row-key-2" data-row-key="2">
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
</tr>
<tr id="table-multiline-row-key-3" data-row-key="3">
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
</tr>
<tr id="table-multiline-row-key-4" data-row-key="4">
<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>
</div>
</div>
| th0 | th1 | th2 | th3 |
|---|---|---|---|
| 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 |
| 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-caption" id="table-noCaption-component">
<div class="fr-table__wrapper">
<div class="fr-table__container">
<div class="fr-table__content">
<table id="table-noCaption">
<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>
</tr>
</thead>
<tbody>
<tr id="table-noCaption-row-key-1" data-row-key="1">
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
</tr>
<tr id="table-noCaption-row-key-2" data-row-key="2">
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
</tr>
<tr id="table-noCaption-row-key-3" data-row-key="3">
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
</tr>
<tr id="table-noCaption-row-key-4" data-row-key="4">
<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>
</div>
</div>
| th0 | th1 | th2 | th3 |
|---|---|---|---|
| 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 |
| 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--caption-bottom" id="table-captionBottom-component">
<div class="fr-table__wrapper">
<div class="fr-table__container">
<div class="fr-table__content">
<table id="table-captionBottom">
<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>
</tr>
</thead>
<tbody>
<tr id="table-captionBottom-row-key-1" data-row-key="1">
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
</tr>
<tr id="table-captionBottom-row-key-2" data-row-key="2">
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
</tr>
<tr id="table-captionBottom-row-key-3" data-row-key="3">
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
</tr>
<tr id="table-captionBottom-row-key-4" data-row-key="4">
<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>
</div>
</div>
| Sélectionner | th0 | th1 | th2 | th3 |
|---|---|---|---|---|
|
|
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 |
|
|
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-selectable-component">
<div class="fr-table__wrapper">
<div class="fr-table__container">
<div class="fr-table__content">
<table id="table-selectable">
<caption>
Titre du tableau (caption)
</caption>
<thead>
<tr>
<th class="fr-cell--fixed" role="columnheader">
<span class="fr-sr-only">Sélectionner</span>
</th>
<th scope="col">
th0
</th>
<th scope="col">
th1
</th>
<th scope="col">
th2
</th>
<th scope="col">
th3
</th>
</tr>
</thead>
<tbody>
<tr id="table-selectable-row-key-1" data-row-key="1">
<th class="fr-cell--fixed" scope="row">
<div class="fr-checkbox-group fr-checkbox-group--sm">
<input name="row-select" id="table-select-checkbox-7748--0" type="checkbox">
<label class="fr-label" for="table-select-checkbox-7748--0">
Sélectionner la ligne 1
</label>
</div>
</th>
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
</tr>
<tr id="table-selectable-row-key-2" data-row-key="2">
<th class="fr-cell--fixed" scope="row">
<div class="fr-checkbox-group fr-checkbox-group--sm">
<input name="row-select" id="table-select-checkbox-7750--1" type="checkbox">
<label class="fr-label" for="table-select-checkbox-7750--1">
Sélectionner la ligne 2
</label>
</div>
</th>
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
</tr>
<tr id="table-selectable-row-key-3" data-row-key="3">
<th class="fr-cell--fixed" scope="row">
<div class="fr-checkbox-group fr-checkbox-group--sm">
<input name="row-select" id="table-select-checkbox-7752--2" type="checkbox">
<label class="fr-label" for="table-select-checkbox-7752--2">
Sélectionner la ligne 3
</label>
</div>
</th>
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
</tr>
<tr id="table-selectable-row-key-4" data-row-key="4">
<th class="fr-cell--fixed" scope="row">
<div class="fr-checkbox-group fr-checkbox-group--sm">
<input name="row-select" id="table-select-checkbox-7754--3" type="checkbox">
<label class="fr-label" for="table-select-checkbox-7754--3">
Sélectionner la ligne 4
</label>
</div>
</th>
<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>
</div>
</div>
| En tête de colonne [À MODIFIER] | th0 | th1 | th2 | th3 |
|---|---|---|---|---|
| th0 | Lorem ipsum dolor sit ame | Lorem ipsum dolor sit ame | Lorem ipsum dolor sit ame | Lorem ipsum dolor sit ame |
| th1 | Lorem ipsum dolor sit ame | Lorem ipsum dolor sit ame | Lorem ipsum dolor sit ame | Lorem ipsum dolor sit ame |
| th2 | Lorem ipsum dolor sit ame | Lorem ipsum dolor sit ame | Lorem ipsum dolor sit ame | Lorem ipsum dolor sit ame |
| th3 | 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-double-entry-component">
<div class="fr-table__wrapper">
<div class="fr-table__container">
<div class="fr-table__content">
<table id="table-double-entry">
<caption>
Titre du tableau (caption)
</caption>
<thead>
<tr>
<th class="fr-cell--fixed" role="columnheader">
<span class="fr-sr-only">En tête de colonne [À MODIFIER]</span>
</th>
<th scope="col">
th0
</th>
<th scope="col">
th1
</th>
<th scope="col">
th2
</th>
<th scope="col">
th3
</th>
</tr>
</thead>
<tbody>
<tr id="table-double-entry-row-key-1" data-row-key="1">
<th class="fr-cell--fixed" scope="row">
th0
</th>
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
</tr>
<tr id="table-double-entry-row-key-2" data-row-key="2">
<th class="fr-cell--fixed" scope="row">
th1
</th>
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
</tr>
<tr id="table-double-entry-row-key-3" data-row-key="3">
<th class="fr-cell--fixed" scope="row">
th2
</th>
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
<td>
Lorem [...] elit ut.
</td>
</tr>
<tr id="table-double-entry-row-key-4" data-row-key="4">
<th class="fr-cell--fixed" scope="row">
th3
</th>
<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>
</div>
</div>
Lorsqu’un tableau de données contient des en-têtes qui ne sont pas répartis uniquement sur la première ligne et/ou la première colonne de la grille ou dont la portée n’est pas valable pour l’ensemble de la colonne ou de la ligne, on parle de tableau de données complexe. Il est alors nécessaire de fournir un « résumé » permettant d’en expliquer sa nature et sa structure afin d’en faciliter la consultation pour des utilisateurs de technologies d’assistance par exemple.
| Horaires | Lundi | Mardi |
Mercredi & Jeudi
Exemple de 2 cellules fusionnées dans le Header |
Vendredi | |
|---|---|---|---|---|---|
| Groupes 1 & 2 | Groupes 1 & 2 | Groupe 1 | Groupe 2 | Groupes 1 & 2 | |
| 8h | Français | Mathématiques | LV1 | Histoire - Géographie | EPS |
| 9h |
Etude dirigée
Exemple de colspan sur toute la ligne |
||||
| 10h | Mathématiques | Histoire - Géographie |
Arts appliqués
|
LV2 | Sciences |
| 11h | Français | EPS | Histoire - Géographie | Physique - Chimie | |
| 12h | Sciences | LV1 |
EPS
Exemple de colspan sur 2 cellules |
LV2 | |
<div class="fr-table fr-table--bordered" id="table-complex-component">
<div class="fr-table__wrapper">
<div class="fr-table__container">
<div class="fr-table__content">
<table id="table-complex">
<caption>
Titre du tableau (caption)
<div class="fr-table__caption__desc">(Résumé) Emploi du temps horaire des Groupes 1 et 2, le matin des jours de la semaine ouvrée (Lundi au Vendredi) : <ul>
<li>la première colonne représente le planning de la journée de Lundi pour les groupes 1 et 2,</li>
<li>la deuxième colonne représente le planning de la journée de Mardi pour les groupes 1 et 2,</li>
<li>la troisième colonne représente le planning des journées de Mercredi et Jeudi pour le groupe 1,</li>
<li>la quatrième colonne représente le planning des journées de Mercredi et Jeudi pour le groupe 2,</li>
<li>la cinquième colonne représente le planning de la journée de Vendredi pour les groupes 1 et 2.</li>
</ul>
</div>
</caption>
<thead>
<tr>
<th class="fr-cell--fixed" role="columnheader" rowspan="2" id="complex-thead-0-col-0">
<span class="fr-sr-only">Horaires</span>
</th>
<th id="complex-thead-0-col-1">
Lundi
</th>
<th id="complex-thead-0-col-2">
Mardi
</th>
<th colspan="2" id="complex-thead-0-col-3">
Mercredi & Jeudi
<br>
<i>Exemple de 2 cellules fusionnées dans le Header</i>
</th>
<th id="complex-thead-0-col-4">
Vendredi
</th>
</tr>
<tr>
<th headers="complex-thead-0-col-1" id="complex-thead-1-col-0">
Groupes 1 & 2
</th>
<th headers="complex-thead-0-col-2" id="complex-thead-1-col-1">
Groupes 1 & 2
</th>
<th headers="complex-thead-0-col-3" id="complex-thead-1-col-2">
Groupe 1
</th>
<th headers="complex-thead-0-col-3" id="complex-thead-1-col-3">
Groupe 2
</th>
<th headers="complex-thead-0-col-4" id="complex-thead-1-col-4">
Groupes 1 & 2
</th>
</tr>
</thead>
<tbody>
<tr id="table-complex-row-key-1" data-row-key="1">
<th class="fr-cell--fixed" id="complex-row-0" headers="complex-thead-0-col-0">
8h
</th>
<td headers="complex-row-0 complex-thead-0-col-1 complex-thead-1-col-1">
Français
</td>
<td headers="complex-row-0 complex-thead-0-col-2 complex-thead-1-col-2">
Mathématiques
</td>
<td headers="complex-row-0 complex-thead-0-col-3 complex-thead-1-col-3">
LV1
</td>
<td headers="complex-row-0 complex-thead-0-col-3 complex-thead-1-col-4">
Histoire - Géographie
</td>
<td headers="complex-row-0 complex-thead-0-col-4 complex-thead-1-col-5">
EPS
</td>
</tr>
<tr id="table-complex-row-key-2" data-row-key="2">
<th class="fr-cell--fixed" id="complex-row-1" headers="complex-thead-0-col-0">
9h
</th>
<td colspan="5" headers="complex-row-1 complex-thead-0-col-1 complex-thead-0-col-2 complex-thead-0-col-3 complex-thead-0-col-4 complex-thead-1-col-1 complex-thead-1-col-2 complex-thead-1-col-3 complex-thead-1-col-4 complex-thead-1-col-5">
Etude dirigée
<br>
<i>Exemple de colspan sur toute la ligne</i>
</td>
</tr>
<tr id="table-complex-row-key-3" data-row-key="3">
<th class="fr-cell--fixed" id="complex-row-2" headers="complex-thead-0-col-0">
10h
</th>
<td headers="complex-row-2 complex-thead-0-col-1 complex-thead-1-col-1">
Mathématiques
</td>
<td headers="complex-row-2 complex-thead-0-col-2 complex-thead-1-col-2">
Histoire - Géographie
</td>
<td rowspan="2" headers="complex-row-2 complex-row-3 complex-thead-0-col-3 complex-thead-1-col-3">
Arts appliqués
<br>
<svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
<use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/environment/environment.svg#artwork-decorative"></use>
<use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/environment/environment.svg#artwork-minor"></use>
<use class="fr-artwork-major" href="../../../dist/artwork/pictograms/environment/environment.svg#artwork-major"></use>
</svg>
</td>
<td headers="complex-row-2 complex-thead-0-col-3 complex-thead-1-col-4">
LV2
</td>
<td headers="complex-row-2 complex-thead-0-col-4 complex-thead-1-col-5">
Sciences
</td>
</tr>
<tr id="table-complex-row-key-4" data-row-key="4">
<th class="fr-cell--fixed" id="complex-row-3" headers="complex-thead-0-col-0">
11h
</th>
<td headers="complex-row-3 complex-thead-0-col-1 complex-thead-1-col-1">
Français
</td>
<td headers="complex-row-3 complex-thead-0-col-2 complex-thead-1-col-2">
EPS
</td>
<td headers="complex-row-3 complex-thead-0-col-3 complex-thead-1-col-4">
Histoire - Géographie
</td>
<td headers="complex-row-3 complex-thead-0-col-4 complex-thead-1-col-5">
Physique - Chimie
</td>
</tr>
<tr id="table-complex-row-key-5" data-row-key="5">
<th class="fr-cell--fixed" id="complex-row-4" headers="complex-thead-0-col-0">
12h
</th>
<td headers="complex-row-4 complex-thead-0-col-1 complex-thead-1-col-1">
Sciences
</td>
<td headers="complex-row-4 complex-thead-0-col-2 complex-thead-1-col-2">
LV1
</td>
<td colspan="2" headers="complex-row-4 complex-thead-0-col-3 complex-thead-1-col-3 complex-thead-1-col-4">
EPS
<br>
<i>Exemple de colspan sur 2 cellules</i>
</td>
<td headers="complex-row-4 complex-thead-0-col-4 complex-thead-1-col-5">
LV2
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
Nombre de lignes sélectionnées
| Sélectionner | Titre par défaut |
Titre par défaut
Texte par défaut
|
Titre par défaut
|
Texte par défaut Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut. |
Libellé par défaut |
Texte par défaut | Titre par défaut | Titre par défaut Texte par défaut | Texte par défaut | ||
|---|---|---|---|---|---|---|---|---|---|---|---|
|
|
Texte par défaut |
Libellé par défaut Titre par défaut
Texte par défaut
|
Libellé par défaut Texte par défaut |
Texte par défaut |
|
30,00 € |
Libellé par défaut |
Libellé par défaut | Lien de Téléchargement JPG – 61,88 Ko | ||
|
|
Texte par défaut |
Libellé par défaut Titre par défaut
Texte par défaut
|
Libellé par défaut Texte par défaut |
Texte par défaut |
|
30,00 € |
Libellé par défaut |
Libellé par défaut | Lien de Téléchargement JPG – 61,88 Ko | ||
|
|
Texte par défaut |
Libellé par défaut Titre par défaut
Texte par défaut
|
Libellé par défaut Texte par défaut |
Texte par défaut |
|
30,00 € |
Libellé par défaut |
Libellé par défaut | Lien de Téléchargement JPG – 61,88 Ko | ||
|
|
Texte par défaut |
Libellé par défaut Titre par défaut
Texte par défaut
|
Libellé par défaut Texte par défaut |
Texte par défaut |
|
30,00 € |
Libellé par défaut |
Libellé par défaut | Lien de Téléchargement JPG – 61,88 Ko | ||
|
|
Texte par défaut |
Libellé par défaut Titre par défaut
Texte par défaut
|
Libellé par défaut Texte par défaut |
Texte par défaut |
|
30,00 € |
Libellé par défaut |
Libellé par défaut | Lien de Téléchargement JPG – 61,88 Ko | ||
|
|
Texte par défaut |
Libellé par défaut Titre par défaut
Texte par défaut
|
Libellé par défaut Texte par défaut |
Texte par défaut |
|
30,00 € |
Libellé par défaut |
Libellé par défaut | Lien de Téléchargement JPG – 61,88 Ko |
<div class="fr-table" id="table-miscellaneous-component">
<div class="fr-table__header">
<fieldset class="fr-segmented fr-segmented--no-legend">
<legend class="fr-segmented__legend">
Type d'affichage
</legend>
<div class="fr-segmented__elements">
<div class="fr-segmented__element">
<input value="1" checked type="radio" id="table-header-segmented-table-7845" name="table-header-segmented-table">
<label class="fr-icon-table-line fr-label" for="table-header-segmented-table-7845">
Tableau
</label>
</div>
<div class="fr-segmented__element">
<input value="2" type="radio" id="table-header-segmented-list-7846" name="table-header-segmented-table">
<label class="fr-icon-list-unordered fr-label" for="table-header-segmented-list-7846">
Liste
</label>
</div>
</div>
</fieldset>
<p class="fr-table__detail">Nombre de lignes sélectionnées</p>
<ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-md fr-btns-group--icon-left">
<li>
<button id="table-header-button-primary-7842" class="fr-btn fr-icon-settings-5-line fr-btn--icon-left fr-btn--secondary">Action groupée</button>
</li>
<li>
<button id="table-header-button-secondary-7843" class="fr-btn fr-icon-settings-5-line fr-btn--icon-left fr-btn--secondary">Action groupée</button>
</li>
</ul>
</div>
<div class="fr-table__wrapper">
<div class="fr-table__container">
<div class="fr-table__content">
<table id="table-miscellaneous">
<caption>
Titre long du tableau (caption) Repellat natus illo omnis nulla nostrum ut doloremque ipsam voluptas officiis cumque porro.
</caption>
<thead>
<tr>
<th class="fr-cell--fixed" role="columnheader">
<span class="fr-sr-only">Sélectionner</span>
</th>
<th>
<span class="fr-cell__title">Titre par défaut</span>
</th>
<th>
<div class="fr-cell__title">Titre par défaut</div>
<div class="fr-cell__desc">Texte par défaut</div>
</th>
<th>
<div class="fr-cell--sort">
<span class="fr-cell__title">Titre par défaut</span>
<button id="table-miscellaneous-thead-sort-asc-desc" class="fr-btn--sort fr-btn fr-btn--sm">Trier</button>
</div>
</th>
<th>
<button aria-sorting="desc" id="table-miscellaneous-thead-sort-desc" class="fr-btn--sort fr-btn fr-btn--sm">Trier</button>
</th>
<th>
<span class="fr-cell__desc">Texte par défaut</span>
<button id="table-default-button-7810" aria-describedby="table-miscellaneous-thead-tooltip" class="fr-ml-2v fr-btn--tooltip fr-btn fr-btn--sm">Texte par défaut</button>
<span class="fr-tooltip fr-placement" id="table-miscellaneous-thead-tooltip" role="tooltip">Lorem [...] elit ut.</span>
</th>
<th>
<button aria-sorting="asc" id="table-miscellaneous-thead-sort-asc" class="fr-btn--sort fr-btn fr-btn--sm">Trier</button>
</th>
<th>
<p id="table-miscellaneous-thead-badge" class="fr-badge fr-badge--info">Libellé par défaut</p>
</th>
<th>
<span class="fr-cell__desc">Texte par défaut</span>
</th>
<th>
<span class="fr-cell__title">Titre par défaut</span>
</th>
<th>
<span class="fr-cell__title">Titre par défaut</span>
<span class="fr-cell__desc fr-ml-2v">Texte par défaut</span>
</th>
<th>
<span class="fr-icon-arrow-right-s-line fr-icon--sm" aria-hidden="true"></span>
Texte par défaut
</th>
</tr>
</thead>
<tbody>
<tr id="table-miscellaneous-row-key-1" data-row-key="1">
<th class="fr-cell--fixed" scope="row">
<div class="fr-checkbox-group fr-checkbox-group--sm">
<input name="row-select" checked="true" id="table-miscellaneous-select-row-checkbox-1" type="checkbox">
<label class="fr-label" for="table-miscellaneous-select-row-checkbox-1">
Sélectionner la ligne 1 : Titre par défaut
</label>
</div>
<span class="fr-cell__title">Titre par défaut</span>
</th>
<td>
Texte par défaut
</td>
<td>
<p class="fr-mb-2v fr-badge fr-badge--sm fr-badge--info">Libellé par défaut</p>
<div class="fr-cell__title fr-mb-2v">Titre par défaut</div>
<div class="fr-cell__desc">Texte par défaut</div>
</td>
<td>
<p class="fr-mr-2v fr-badge fr-badge--sm fr-badge--success">Libellé par défaut</p>
Texte par défaut
</td>
<td>
Texte par défaut
</td>
<td>
<div class="fr-input-group" id="input-group-7813">
<label class="fr-label" for="text-input-text-1">
</label>
<input class="fr-input" aria-describedby="text-input-text-1-messages" id="text-input-text-1" type="text">
<div class="fr-messages-group" id="text-input-text-1-messages" aria-live="polite">
</div>
</div>
</td>
<td>
30,00 €
</td>
<td>
<p class="fr-badge fr-badge--info">Libellé par défaut</p>
</td>
<td>
<button id="table-default-button-7814" class="fr-btn fr-btn--sm fr-btn--secondary">Libellé bouton</button>
</td>
<td>
<a class="fr-tag" id="tag-7815" href="#">Libellé par défaut</a>
</td>
<td>
<a id="link-7816" download="true" href="/example/img/image.jpg" class="fr-link fr-link--download">Lien de Téléchargement <span class="fr-link__detail">JPG – 61,88 Ko</span>
</a>
</td>
<td>
<svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
<use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/environment/leaf.svg#artwork-decorative"></use>
<use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/environment/leaf.svg#artwork-minor"></use>
<use class="fr-artwork-major" href="../../../dist/artwork/pictograms/environment/leaf.svg#artwork-major"></use>
</svg>
</td>
</tr>
<tr id="table-miscellaneous-row-key-2" data-row-key="2">
<th class="fr-cell--fixed" scope="row">
<div class="fr-checkbox-group fr-checkbox-group--sm">
<input name="row-select" id="table-miscellaneous-select-row-checkbox-2" type="checkbox">
<label class="fr-label" for="table-miscellaneous-select-row-checkbox-2">
Sélectionner la ligne 2 : Titre par défaut
</label>
</div>
<span class="fr-cell__title">Titre par défaut</span>
</th>
<td>
Texte par défaut
</td>
<td>
<p class="fr-mb-2v fr-badge fr-badge--sm fr-badge--info">Libellé par défaut</p>
<div class="fr-cell__title fr-mb-2v">Titre par défaut</div>
<div class="fr-cell__desc">Texte par défaut</div>
</td>
<td>
<p class="fr-mr-2v fr-badge fr-badge--sm fr-badge--success">Libellé par défaut</p>
Texte par défaut
</td>
<td>
Texte par défaut
</td>
<td>
<div class="fr-input-group" id="input-group-7818">
<label class="fr-label" for="text-input-text-2">
</label>
<input class="fr-input" aria-describedby="text-input-text-2-messages" id="text-input-text-2" type="text">
<div class="fr-messages-group" id="text-input-text-2-messages" aria-live="polite">
</div>
</div>
</td>
<td>
30,00 €
</td>
<td>
<p class="fr-badge fr-badge--info">Libellé par défaut</p>
</td>
<td>
<button id="table-default-button-7819" class="fr-btn fr-btn--sm fr-btn--secondary">Libellé bouton</button>
</td>
<td>
<a class="fr-tag" id="tag-7820" href="#">Libellé par défaut</a>
</td>
<td>
<a id="link-7821" download="true" href="/example/img/image.jpg" class="fr-link fr-link--download">Lien de Téléchargement <span class="fr-link__detail">JPG – 61,88 Ko</span>
</a>
</td>
<td>
<svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
<use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/environment/leaf.svg#artwork-decorative"></use>
<use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/environment/leaf.svg#artwork-minor"></use>
<use class="fr-artwork-major" href="../../../dist/artwork/pictograms/environment/leaf.svg#artwork-major"></use>
</svg>
</td>
</tr>
<tr id="table-miscellaneous-row-key-3" data-row-key="3">
<th class="fr-cell--fixed" scope="row">
<div class="fr-checkbox-group fr-checkbox-group--sm">
<input name="row-select" id="table-miscellaneous-select-row-checkbox-3" type="checkbox">
<label class="fr-label" for="table-miscellaneous-select-row-checkbox-3">
Sélectionner la ligne 3 : Titre par défaut
</label>
</div>
<span class="fr-cell__title">Titre par défaut</span>
</th>
<td>
Texte par défaut
</td>
<td>
<p class="fr-mb-2v fr-badge fr-badge--sm fr-badge--info">Libellé par défaut</p>
<div class="fr-cell__title fr-mb-2v">Titre par défaut</div>
<div class="fr-cell__desc">Texte par défaut</div>
</td>
<td>
<p class="fr-mr-2v fr-badge fr-badge--sm fr-badge--success">Libellé par défaut</p>
Texte par défaut
</td>
<td>
Texte par défaut
</td>
<td>
<div class="fr-input-group" id="input-group-7823">
<label class="fr-label" for="text-input-text-3">
</label>
<input class="fr-input" aria-describedby="text-input-text-3-messages" id="text-input-text-3" type="text">
<div class="fr-messages-group" id="text-input-text-3-messages" aria-live="polite">
</div>
</div>
</td>
<td>
30,00 €
</td>
<td>
<p class="fr-badge fr-badge--info">Libellé par défaut</p>
</td>
<td>
<button id="table-default-button-7824" class="fr-btn fr-btn--sm fr-btn--secondary">Libellé bouton</button>
</td>
<td>
<a class="fr-tag" id="tag-7825" href="#">Libellé par défaut</a>
</td>
<td>
<a id="link-7826" download="true" href="/example/img/image.jpg" class="fr-link fr-link--download">Lien de Téléchargement <span class="fr-link__detail">JPG – 61,88 Ko</span>
</a>
</td>
<td>
<svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
<use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/environment/leaf.svg#artwork-decorative"></use>
<use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/environment/leaf.svg#artwork-minor"></use>
<use class="fr-artwork-major" href="../../../dist/artwork/pictograms/environment/leaf.svg#artwork-major"></use>
</svg>
</td>
</tr>
<tr id="table-miscellaneous-row-key-4" data-row-key="4">
<th class="fr-cell--fixed" scope="row">
<div class="fr-checkbox-group fr-checkbox-group--sm">
<input name="row-select" checked="true" id="table-miscellaneous-select-row-checkbox-4" type="checkbox">
<label class="fr-label" for="table-miscellaneous-select-row-checkbox-4">
Sélectionner la ligne 4 : Titre par défaut
</label>
</div>
<span class="fr-cell__title">Titre par défaut</span>
</th>
<td>
Texte par défaut
</td>
<td>
<p class="fr-mb-2v fr-badge fr-badge--sm fr-badge--info">Libellé par défaut</p>
<div class="fr-cell__title fr-mb-2v">Titre par défaut</div>
<div class="fr-cell__desc">Texte par défaut</div>
</td>
<td>
<p class="fr-mr-2v fr-badge fr-badge--sm fr-badge--success">Libellé par défaut</p>
Texte par défaut
</td>
<td>
Texte par défaut
</td>
<td>
<div class="fr-input-group" id="input-group-7828">
<label class="fr-label" for="text-input-text-4">
</label>
<input class="fr-input" aria-describedby="text-input-text-4-messages" id="text-input-text-4" type="text">
<div class="fr-messages-group" id="text-input-text-4-messages" aria-live="polite">
</div>
</div>
</td>
<td>
30,00 €
</td>
<td>
<p class="fr-badge fr-badge--info">Libellé par défaut</p>
</td>
<td>
<button id="table-default-button-7829" class="fr-btn fr-btn--sm fr-btn--secondary">Libellé bouton</button>
</td>
<td>
<a class="fr-tag" id="tag-7830" href="#">Libellé par défaut</a>
</td>
<td>
<a id="link-7831" download="true" href="/example/img/image.jpg" class="fr-link fr-link--download">Lien de Téléchargement <span class="fr-link__detail">JPG – 61,88 Ko</span>
</a>
</td>
<td>
<svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
<use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/environment/leaf.svg#artwork-decorative"></use>
<use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/environment/leaf.svg#artwork-minor"></use>
<use class="fr-artwork-major" href="../../../dist/artwork/pictograms/environment/leaf.svg#artwork-major"></use>
</svg>
</td>
</tr>
<tr id="table-miscellaneous-row-key-5" data-row-key="5">
<th class="fr-cell--fixed" scope="row">
<div class="fr-checkbox-group fr-checkbox-group--sm">
<input name="row-select" checked="true" id="table-miscellaneous-select-row-checkbox-5" type="checkbox">
<label class="fr-label" for="table-miscellaneous-select-row-checkbox-5">
Sélectionner la ligne 5 : Titre par défaut
</label>
</div>
<span class="fr-cell__title">Titre par défaut</span>
</th>
<td>
Texte par défaut
</td>
<td>
<p class="fr-mb-2v fr-badge fr-badge--sm fr-badge--info">Libellé par défaut</p>
<div class="fr-cell__title fr-mb-2v">Titre par défaut</div>
<div class="fr-cell__desc">Texte par défaut</div>
</td>
<td>
<p class="fr-mr-2v fr-badge fr-badge--sm fr-badge--success">Libellé par défaut</p>
Texte par défaut
</td>
<td>
Texte par défaut
</td>
<td>
<div class="fr-input-group" id="input-group-7833">
<label class="fr-label" for="text-input-text-5">
</label>
<input class="fr-input" aria-describedby="text-input-text-5-messages" id="text-input-text-5" type="text">
<div class="fr-messages-group" id="text-input-text-5-messages" aria-live="polite">
</div>
</div>
</td>
<td>
30,00 €
</td>
<td>
<p class="fr-badge fr-badge--info">Libellé par défaut</p>
</td>
<td>
<button id="table-default-button-7834" class="fr-btn fr-btn--sm fr-btn--secondary">Libellé bouton</button>
</td>
<td>
<a class="fr-tag" id="tag-7835" href="#">Libellé par défaut</a>
</td>
<td>
<a id="link-7836" download="true" href="/example/img/image.jpg" class="fr-link fr-link--download">Lien de Téléchargement <span class="fr-link__detail">JPG – 61,88 Ko</span>
</a>
</td>
<td>
<svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
<use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/environment/leaf.svg#artwork-decorative"></use>
<use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/environment/leaf.svg#artwork-minor"></use>
<use class="fr-artwork-major" href="../../../dist/artwork/pictograms/environment/leaf.svg#artwork-major"></use>
</svg>
</td>
</tr>
<tr id="table-miscellaneous-row-key-6" data-row-key="6">
<th class="fr-cell--fixed" scope="row">
<div class="fr-checkbox-group fr-checkbox-group--sm">
<input name="row-select" id="table-miscellaneous-select-row-checkbox-6" type="checkbox">
<label class="fr-label" for="table-miscellaneous-select-row-checkbox-6">
Sélectionner la ligne 6 : Titre par défaut
</label>
</div>
<span class="fr-cell__title">Titre par défaut</span>
</th>
<td>
Texte par défaut
</td>
<td>
<p class="fr-mb-2v fr-badge fr-badge--sm fr-badge--info">Libellé par défaut</p>
<div class="fr-cell__title fr-mb-2v">Titre par défaut</div>
<div class="fr-cell__desc">Texte par défaut</div>
</td>
<td>
<p class="fr-mr-2v fr-badge fr-badge--sm fr-badge--success">Libellé par défaut</p>
Texte par défaut
</td>
<td>
Texte par défaut
</td>
<td>
<div class="fr-input-group" id="input-group-7838">
<label class="fr-label" for="text-input-text-6">
</label>
<input class="fr-input" aria-describedby="text-input-text-6-messages" id="text-input-text-6" type="text">
<div class="fr-messages-group" id="text-input-text-6-messages" aria-live="polite">
</div>
</div>
</td>
<td>
30,00 €
</td>
<td>
<p class="fr-badge fr-badge--info">Libellé par défaut</p>
</td>
<td>
<button id="table-default-button-7839" class="fr-btn fr-btn--sm fr-btn--secondary">Libellé bouton</button>
</td>
<td>
<a class="fr-tag" id="tag-7840" href="#">Libellé par défaut</a>
</td>
<td>
<a id="link-7841" download="true" href="/example/img/image.jpg" class="fr-link fr-link--download">Lien de Téléchargement <span class="fr-link__detail">JPG – 61,88 Ko</span>
</a>
</td>
<td>
<svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
<use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/environment/leaf.svg#artwork-decorative"></use>
<use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/environment/leaf.svg#artwork-minor"></use>
<use class="fr-artwork-major" href="../../../dist/artwork/pictograms/environment/leaf.svg#artwork-major"></use>
</svg>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="fr-table__footer">
<div class="fr-table__footer--start">
<p class="fr-table__detail">215 lignes</p>
<div class="fr-select-group">
<label class="fr-sr-only fr-label" for="table-footer-select-7847">
Nombre de lignes par page
</label>
<select class="fr-select" aria-describedby="table-footer-select-7847-messages" id="table-footer-select-7847" name="table-footer-select-7847">
<option value="" selected disabled hidden>Nombre de lignes par page</option>
<option value="4">4 lignes par page</option>
<option value="10">10 lignes par page</option>
<option value="20">20 lignes par page</option>
</select>
<div class="fr-messages-group" id="table-footer-select-7847-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-table__footer--middle">
<nav role="navigation" class="fr-pagination" aria-label="Pagination" data-fr-analytics-page-total="3">
<ul class="fr-pagination__list">
<li>
<a class="fr-pagination__link fr-pagination__link--first" id="table-footer-pagination-7851" title="Première page" aria-disabled="true" role="link">
Première page
</a>
</li>
<li>
<a class="fr-pagination__link fr-pagination__link--prev fr-pagination__link--lg-label" id="table-footer-pagination-7852" title="Précédente" aria-disabled="true" role="link">
Précédente
</a>
</li>
<li>
<a class="fr-pagination__link" id="table-footer-pagination-7848" aria-current="page" title="Page 1">
1
</a>
</li>
<li>
<a class="fr-pagination__link" id="table-footer-pagination-7849" href="#" title="Page 2">
2
</a>
</li>
<li>
<a class="fr-pagination__link fr-hidden fr-unhidden-lg" id="table-footer-pagination-7850" href="#" title="Page 3">
3
</a>
</li>
<li>
<a class="fr-pagination__link fr-pagination__link--next fr-pagination__link--lg-label" id="table-footer-pagination-7853" href="#" title="Suivante">
Suivante
</a>
</li>
<li>
<a class="fr-pagination__link fr-pagination__link--last" id="table-footer-pagination-7854" href="#" title="Dernière page">
Dernière page
</a>
</li>
</ul>
</nav>
</div>
<div class="fr-table__footer--end">
<ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-md">
<li>
<button id="table-footer-button-primary-7855" class="fr-btn">Action tableau</button>
</li>
<li>
<button id="table-footer-button-secondary-7856" class="fr-btn fr-btn--secondary">Action tableau</button>
</li>
</ul>
</div>
</div>
</div>