Aide:Insérer un tableau/Interactions - Historique des versions

Red Bull Salzbourg : pluriel et accent circonflexe

2021-01-06T02:34:31Z

pluriel et accent circonflexe

← Version précédente		Version du 6 janvier 2021 à 02:34
Ligne 1 :		Ligne 1 :
	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'~~autre~~ 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.		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.

	__NOTOC__		__NOTOC__
Ligne 41 :		Ligne 41 :
	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.		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é''', à ~~coté~~ du '''enroulable''' précédent. Votre déclaration de tableau devient :<br/>		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 :<br/>
	<code>{\| class="tableaustandard enroulable enroulé"</code>		<code>{\| class="tableaustandard enroulable enroulé"</code>

X-Fusion le 25 avril 2019 à 21:56

2019-04-25T21:56:15Z

← Version précédente		Version du 25 avril 2019 à 21:56
Ligne 12 :		Ligne 12 :

	En tapant ce code :		En tapant ce code :
	<pre ~~class="tags" style="background:#f9f9f9; text-align:left; margin-left:1em;"~~>		<pre>
	{\| class="tableaustandard enroulable"		{\| class="tableaustandard enroulable"
	! Entête 1		! Entête 1
Ligne 47 :		Ligne 47 :

	En tapant ce code :		En tapant ce code :
	<pre ~~class="tags" style="background:#f9f9f9; text-align:left; margin-left:1em;"~~>		<pre>
	{\| class="tableaustandard enroulable enroulé"		{\| class="tableaustandard enroulable enroulé"
	! Entête 1		! Entête 1
Ligne 78 :		Ligne 78 :

	En tapant ce code :		En tapant ce code :
	<pre ~~class="tags" style="background:#f9f9f9; text-align:left; margin-left:1em;"~~>		<pre>
	{\| class="tableaustandard sortable"		{\| class="tableaustandard sortable"
	! Entête 1		! Entête 1

Pierreraté : Corrections

2018-09-23T16:22:24Z

Corrections

← Version précédente		Version du 23 septembre 2018 à 16:22
Ligne 1 :		Ligne 1 :
	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 ~~des~~ les enrouler/dérouler, tandis que d'autre laissent apparaître des flèches cliquables dans leur entête pour influencer l'ordre de tri des lignes. Ces interactions s'~~ajoute~~ facilement et tiennent souvent en un mot-clé (une "classe") à ajouter à votre code.		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'autre 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.

	__NOTOC__		__NOTOC__

X-Fusion : mise à jour

2016-04-29T20:04:33Z

mise à jour

← Version précédente		Version du 29 avril 2016 à 20:04
Ligne 6 :		Ligne 6 :
	<code>{\| class="tableaustandard"</code>		<code>{\| class="tableaustandard"</code>

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

	===Exemple===		===Exemple===

	En tapant ce code :		En tapant ce code :
	<~~div~~ class="tags" style="background:#f9f9f9; text-align:left; margin-left:1em;">		<pre class="tags" style="background:#f9f9f9; text-align:left; margin-left:1em;">
	~~<code>~~{\| class="tableaustandard ~~collapsible~~"~~</code><br/>~~		{\| class="tableaustandard enroulable"
	~~<code>~~! Entête 1~~</code><br/>~~		! Entête 1
	~~<code>~~! Entête 2~~</code><br/>~~		! Entête 2
	~~<code>~~\|-~~</code><br/>~~		\|-
	~~<code>~~\| Un~~</code><br/>~~		\| Un
	~~<code>~~\| A~~</code><br/>~~		\| A
	~~<code>~~\|-~~</code><br/>~~		\|-
	~~<code>~~\| Deux~~</code><br/>~~		\| Deux
	~~<code>~~\| B~~</code><br/>~~		\| B
	~~<code>~~\|}~~</code>~~		\|}
	</~~div~~>		</pre>

	L'affichage devient :		L'affichage devient :
	{\| class="tableaustandard ~~collapsible~~"		{\| class="tableaustandard enroulable"
	! Entête 1		! Entête 1
	! Entête 2		! Entête 2
Ligne 41 :		Ligne 41 :
	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.		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, '''~~collapsed~~''', à coté du '''~~collapsible~~''' précédent. Votre déclaration de tableau devient :<br/>		Là encore, tout se déclenche via l'ajout d'un nouveau mot-clé supplémentaire, '''enroulé''', à coté du '''enroulable''' précédent. Votre déclaration de tableau devient :<br/>
	<code>{\| class="tableaustandard ~~collapsible collapsed~~"</code>		<code>{\| class="tableaustandard enroulable enroulé"</code>

	===Exemple===		===Exemple===

	En tapant ce code :		En tapant ce code :
	<~~div~~ class="tags" style="background:#f9f9f9; text-align:left; margin-left:1em;">		<pre class="tags" style="background:#f9f9f9; text-align:left; margin-left:1em;">
	~~<code>~~{\| class="tableaustandard ~~collapsible collapsed~~"~~</code><br/>~~		{\| class="tableaustandard enroulable enroulé"
	~~<code>~~! Entête 1~~</code><br/>~~		! Entête 1
	~~<code>~~! Entête 2~~</code><br/>~~		! Entête 2
	~~<code>~~\|-~~</code><br/>~~		\|-
	~~<code>~~\| Un~~</code><br/>~~		\| Un
	~~<code>~~\| A~~</code><br/>~~		\| A
	~~<code>~~\|-~~</code><br/>~~		\|-
	~~<code>~~\| Deux~~</code><br/>~~		\| Deux
	~~<code>~~\| B~~</code><br/>~~		\| B
	~~<code>~~\|}~~</code>~~		\|}
	</~~div~~>		</pre>

	L'affichage devient :		L'affichage devient :
	{\| class="tableaustandard ~~collapsible collapsed~~"		{\| class="tableaustandard enroulable enroulé"
	! Entête 1		! Entête 1
	! Entête 2		! Entête 2
Ligne 72 :		Ligne 72 :
	\|}		\|}
	Cette fois-ci, le tableau est enroulé par défaut, et le visiteur doit cliquer pour en voir le contenu.		Cette fois-ci, le tableau est enroulé par défaut, et le visiteur doit cliquer pour en voir le contenu.

	Note : inclure un tableau enroulé dans un tableau enroulé n'aura pas l'effet attendu. Pour consulter cet exemple dans une page qui permet son fonctionnement : [[Aide:Insérer_un_tableau/Interactions#Tableau_enroulable_enroul.C3.A9_par_d.C3.A9faut]]

	== Tableau avec tri ==		== Tableau avec tri ==
Ligne 80 :		Ligne 78 :

	En tapant ce code :		En tapant ce code :
	<~~div~~ class="tags" style="background:#f9f9f9; text-align:left; margin-left:1em;">		<pre class="tags" style="background:#f9f9f9; text-align:left; margin-left:1em;">
	~~<code>~~{\| class="tableaustandard sortable"~~</code><br/>~~		{\| class="tableaustandard sortable"
	~~<code>~~! Entête 1~~</code><br/>~~		! Entête 1
	~~<code>~~! Entête 2~~</code><br/>~~		! Entête 2
	~~<code>~~\|-~~</code><br/>~~		\|-
	~~<code>~~\| Un~~</code><br/>~~		\| Un
	~~<code>~~\| 1~~</code><br/>~~		\| 1
	~~<code>~~\|-~~</code><br/>~~		\|-
	~~<code>~~\| Deux~~</code><br/>~~		\| Deux
	~~<code>~~\| 2~~</code><br/>~~		\| 2
	~~<code>~~\|-~~</code><br/>~~		\|-
	~~<code>~~\| Trois~~</code><br/>~~		\| Trois
	~~<code>~~\| 3~~</code><br/>~~		\| 3
	~~<code>~~\|}~~</code>~~		\|}
	</~~div~~>		</pre>

	L'affichage devient :		L'affichage devient :

Mewtwo Ex le 22 avril 2015 à 23:34

2015-04-22T23:34:19Z

← Version précédente		Version du 22 avril 2015 à 23:34
Ligne 3 :		Ligne 3 :
	__NOTOC__		__NOTOC__
	== Tableau enroulable ==		== Tableau enroulable ==
	En lisant les sections précédentes, vous avez pu découvrir que le tableau standard possède ~~un entête~~ de la forme :<br/>		En lisant les sections précédentes, vous avez pu découvrir que le tableau standard possède une déclaration de la forme :<br/>
	<code>{\| class="tableaustandard"</code>		<code>{\| class="tableaustandard"</code>

Ligne 36 :		Ligne 36 :
	\| B		\| 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.		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 ==		== Tableau enroulable enroulé par défaut ==
	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.		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, '''collapsed''', à coté du '''collapsible''' précédent. Votre ~~entête~~ de tableau devient :<br/>		Là encore, tout se déclenche via l'ajout d'un nouveau mot-clé supplémentaire, '''collapsed''', à coté du '''collapsible''' précédent. Votre déclaration de tableau devient :<br/>
	<code>{\| class="tableaustandard collapsible collapsed"</code>		<code>{\| class="tableaustandard collapsible collapsed"</code>

Mewtwo Ex : /* Tableau enroulable enroulé par défaut */

2015-04-22T22:57:42Z

Tableau enroulable enroulé par défaut

← Version précédente		Version du 22 avril 2015 à 22:57
Ligne 64 :		Ligne 64 :
	! Entête 1		! Entête 1
	! Entête 2		! Entête 2
	\|- ~~style="display:none"~~		\|-
	\| Un		\| Un
	\| A		\| A
	\|- ~~style="display:none"~~		\|-
	\| Deux		\| Deux
	\| B		\| B
	\|}		\|}
	Cette fois-ci, le tableau est enroulé par défaut, et le visiteur doit cliquer pour en voir le contenu.		Cette fois-ci, le tableau est enroulé par défaut, et le visiteur doit cliquer pour en voir le contenu.

			Note : inclure un tableau enroulé dans un tableau enroulé n'aura pas l'effet attendu. Pour consulter cet exemple dans une page qui permet son fonctionnement : [[Aide:Insérer_un_tableau/Interactions#Tableau_enroulable_enroul.C3.A9_par_d.C3.A9faut]]

	== Tableau avec tri ==		== Tableau avec tri ==

Mewtwo Ex : /* Exemple */

2015-04-22T22:53:20Z

Exemple

← Version précédente		Version du 22 avril 2015 à 22:53
Ligne 64 :		Ligne 64 :
	! Entête 1		! Entête 1
	! Entête 2		! Entête 2
	\|-		\|- style="display:none"
	\| Un		\| Un
	\| A		\| A
	\|-		\|- style="display:none"
	\| Deux		\| Deux
	\| B		\| B

Mewtwo Ex : Page créée avec « 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 des les enro... »

2015-04-22T22:48:33Z

Page créée avec « 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 des les enro... »

Nouvelle page

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 des les enrouler/dérouler, tandis que d'autre laissent apparaître des flèches cliquables dans leur entête pour influencer l'ordre de tri des lignes. Ces interactions s'ajoute facilement et tiennent souvent en un mot-clé (une "classe") à ajouter à votre code.

__NOTOC__
== Tableau enroulable ==
En lisant les sections précédentes, vous avez pu découvrir que le tableau standard possède un entête de la forme : 
<code>{| class="tableaustandard"</code>

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

===Exemple===

En tapant ce code :
<div class="tags" style="background:#f9f9f9; text-align:left; margin-left:1em;">
<code>{| class="tableaustandard collapsible"</code> 
<code>! Entête 1</code> 
<code>! Entête 2</code> 
<code>|-</code> 
<code>| Un</code> 
<code>| A</code> 
<code>|-</code> 
<code>| Deux</code> 
<code>| B</code> 
<code>|}</code>
</div>

L'affichage devient :
{| class="tableaustandard collapsible"
! 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.

== Tableau enroulable enroulé par défaut ==
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, '''collapsed''', à coté du '''collapsible''' précédent. Votre entête de tableau devient : 
<code>{| class="tableaustandard collapsible collapsed"</code>

===Exemple===

En tapant ce code :
<div class="tags" style="background:#f9f9f9; text-align:left; margin-left:1em;">
<code>{| class="tableaustandard collapsible collapsed"</code> 
<code>! Entête 1</code> 
<code>! Entête 2</code> 
<code>|-</code> 
<code>| Un</code> 
<code>| A</code> 
<code>|-</code> 
<code>| Deux</code> 
<code>| B</code> 
<code>|}</code>
</div>

L'affichage devient :
{| class="tableaustandard collapsible collapsed"
! 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 ==
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'''. 
<code>{| class="tableaustandard sortable"</code>

En tapant ce code :
<div class="tags" style="background:#f9f9f9; text-align:left; margin-left:1em;">
<code>{| class="tableaustandard sortable"</code> 
<code>! Entête 1</code> 
<code>! Entête 2</code> 
<code>|-</code> 
<code>| Un</code> 
<code>| 1</code> 
<code>|-</code> 
<code>| Deux</code> 
<code>| 2</code> 
<code>|-</code> 
<code>| Trois</code> 
<code>| 3</code> 
<code>|}</code>
</div>

L'affichage devient :
{| class="tableaustandard sortable"
! 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.

Aide:Insérer un tableau/Interactions - Historique des versions

Red Bull Salzbourg : pluriel et accent circonflexe

X-Fusion le 25 avril 2019 à 21:56

Pierreraté : Corrections

X-Fusion : mise à jour