Aide:Insérer un tableau/Interactions

De Poképédia
Aller à la navigation Aller à la recherche

En consultant les nombreux tableaux déjà en place sur Poképédia, vous avez pu constater que certains d'entre eux étaient équipés d'un bouton permettant de les enrouler/dérouler, tandis que d'autres laissent apparaître des flèches cliquables dans leur entête pour influencer l'ordre de tri des lignes. Ces interactions s'ajoutent facilement et tiennent souvent en un mot-clé (une "classe") à ajouter à votre code.


Tableau enroulable[modifier]

En lisant les sections précédentes, vous avez pu découvrir que le tableau standard possède une déclaration de la forme :
{| class="tableaustandard"

Pour que le tableau puisse s'enrouler, il suffit d'indiquer le mot-clé enroulable juste après tableaustandard, toujours entre les guillemets.
{| class="tableaustandard enroulable"

Exemple[modifier]

En tapant ce code :

{| class="tableaustandard enroulable"
! Entête 1
! Entête 2
|-
| Un
| A
|-
| Deux
| B
|}

L'affichage devient :

Entête 1 Entête 2
Un A
Deux B

Notez l'apparition du bouton "Enrouler" : Si le visiteur clique dessus, le tableau s'enroule et n'affiche plus que la ligne d'entête. S'il clique de nouveau, le tableau se déroule. Il faut impérativement une ligne d'entête à votre tableau pour que cela soit possible.

Tableau enroulable enroulé par défaut[modifier]

Il est parfois utile d'avoir un tableau enroulé par défaut, lorsque celui-ci est particulièrement long ou qu'il contient des informations des générations précédentes. Bien choisir quel tableau enrouler et dérouler par défaut peut permettre d'orienter le lecteur vers une section en particulier.

Là encore, tout se déclenche via l'ajout d'un nouveau mot-clé supplémentaire, enroulé, à côté du enroulable précédent. Votre déclaration de tableau devient :
{| class="tableaustandard enroulable enroulé"

Exemple[modifier]

En tapant ce code :

{| class="tableaustandard enroulable enroulé"
! Entête 1
! Entête 2
|-
| Un
| A
|-
| Deux
| B
|}

L'affichage devient :

Entête 1 Entête 2
Un A
Deux B

Cette fois-ci, le tableau est enroulé par défaut, et le visiteur doit cliquer pour en voir le contenu.

Tableau avec tri[modifier]

Si votre tableau liste des statistiques, ou d'autres données sur lesquelles un classement peut servir, vous pouvez ajouter des outils de tri automatiques. Et cela utilise la même technique que pour les tableaux enroulables, tout tient dans l'ajout d'un mot-clé dans la première ligne du code de votre tableau : sortable.
{| class="tableaustandard sortable"

En tapant ce code :

{| class="tableaustandard sortable"
! Entête 1
! Entête 2
|-
| Un
| 1
|-
| Deux
| 2
|-
| Trois
| 3
|}

L'affichage devient :

Entête 1 Entête 2
Un 1
Deux 2
Trois 3

En cliquant sur une des flèches, le tableau se réorganise tout seul pour classer les lignes dans l'ordre croissant ou décroissant, alphabétique ou inversé, suivant la colonne sur laquelle le visiteur veut trier.