Design DSFR

Créer un tableau dans un article

Article

Mis à jour le mardi 30 avril 2024 , par Equipe WEBTICE

La création d’un tableau :

La création d’un tableau sous SPIP est très simple.

Chaque colonne est identifiée par le caractère suivant : |
Le tableau doit commencer par ce petit bout de code : <div class="fr-table fr-table--bordered"> et finir par </div>
Cela permet à SPIP de savoir qu’il s’agit d’un tableau avec des bordures.

Voici le code que vous devez ajouter dans votre article SPIP :

<div class="fr-table fr-table--bordered">
|{{Titre1}} | {{Titre2}}|
| Élément 1 | Élément 2 |
| Élément 1 | Élément 2 |
</div>

Définir un titre : |{{Titre1}} | {{Titre2}}|
Ajouter des bordures : fr-table--bordered

Voici le rendu visuel :
Titre1 Titre2
Élément 1 Élément 2
Élément 1 Élément 2

Fusionner des colonnes :

Fusionne avec la cellule de gauche : <

<div class="fr-table fr-table--bordered">
|{{Col 1}} | {{Col 2}}| {{Col 3}}| {{Col 4}}|
| Élément 1 | Élément 2 | <center>Fusion 3 et 4</center> |<|
| <center>Fusion 1 et 2</center>|<| Élément 3 | Élément 4 |
| <center>Fusion 1, 2, 3 </center>|<|<| Élément 4 |
| <center>Fusion 1, 2, 3, 4 </center>|<|<|<|
</div>

Voici le rendu visuel :
Col 1 Col 2 Col 3 Col 4
Élément 1 Élément 2
Fusion 3 et 4
Fusion 1 et 2
Élément 3 Élément 4
Fusion 1, 2, 3
Élément 4
Fusion 1, 2, 3, 4

Dans la même rubrique