Aide:Insérer un tableau

Cette page d'aide a été rédigée de manière à contenir le plus petit nombre de liens bleus possible, afin de faciliter sa lecture.

---

Les bases

Premiers pas —

Rédiger un article —

Ajouter une image —

Insérer un tableau —

Discuter

Revenir au sommaire de l'aide

Les tableaux permettent d'organiser vos informations, n'hésitez pas à les utiliser !

Les tableaux sont un atout précieux pour Poképédia. Ils permettent d'organiser les données, de trouver plus vite l'information recherchée, et même d'enjoliver l'article !
Cependant, mettre en place un tableau n'est pas forcément simple au premier abord, et nécessite un petit temps d'apprentissage. Cette page vous apprendra donc les bases indispensables, ainsi que différentes astuces pour donner à vos lignes, colonnes et cellules la forme que vous voulez.

Cette page a un contenu un peu plus complexe que les autres, n'hésitez pas à revenir régulièrement pour la consulter en cas de doute.
Vous pouvez essayer tout ce que vous apprenez ici sur le bac à sable.

Cliquez sur « Afficher » à droite de chaque section pour consulter chacune d'entre elles.

1 - Indications : « Quand insérer un tableau ? » « Quand puis-je créer un tableau ? » Des informations rangées permettent d'y gagner en clarté. Les tableaux sont parfaitement adaptés à la situation lorsque vous devez mettre en place une liste longue et répétitive d'informations. Cela permet à l'article de gagner en clarté et en lisibilité, et souvent de trouver plus rapidement l'information recherchée. Voici quelques articles où l'organisation en tableau est toute indiquée : Liste des attaques Liste des épisodes du dessin animé De nombreux articles concernant les routes dans les jeux-vidéo contiennent un listing des Pokémon pouvant y être capturés. Il en va de même pour les objets pouvant être achetés dans les boutiques, les Pokémon apparaissant dans un épisode du dessin animé, les attaques apprises par un Pokémon en fonction de son niveau, et bien d'autres choses encore. Les situations où un tableau est inutile Les listes courtes Quand vous faites face à une liste plutôt courte (inférieure à 5 ou 6 entrées), il n'est pas systématiquement nécessaire de créer un tableau. Cela rend l'article plus complexe à éditer pour un autre contributeur, alors que l'ensemble des informations listées est limité. Par exemple, il vaut mieux voir ceci dans un article : On compte trois types de Balls « classiques » : La Poké Ball La Super Ball L'Hyper Ball Que cela : Les types de Balls « classiques » Poké Ball Super Ball Hyper Ball L'illustration d'un article On considère généralement qu'une image doit être intégrée dans une miniature, un modèle ou une galerie si elle est présente dans un but purement illustratif. Consultez la section 4 de la page concernant les images pour comprendre comment les intégrer à un article.

2 - Construire un tableau : les bases Le code de base pour un tableau On crée le tableau avec : {| class="tableaustandard" On peut indiquer le titre du tableau avec : |+ On indique une cellule d'entête avec : ! On indique une cellule normale avec : | On sépare chaque ligne du tableau avec : |- IMPORTANT : On ferme le tableau avec : |} N'oubliez pas Les cellules d'entêtes affichent automatiquement le texte en gras sur un fond bleuté. Ne créez pas de tableaux composés uniquement de cellules d'entêtes. Pensez toujours à fermer vos tableaux ! Le simple oubli de ce code peut parfois causer des résultats catastrophiques sur l'apparence d'un article. Un exemple de tableau simple Voici un tableau simple Cellule d'entête 1 Cellule d'entête 2 Cellule d'entête 3 Information 1A Information 2A Information 3A Information 1B Information 2B Information 1C Information 3B Le code pour créer ce tableau est celui-ci : {| class="tableaustandard" |+ Voici un tableau simple |- ! Cellule d'entête 1 ! Cellule d'entête 2 ! Cellule d'entête 3 |- | Information 1A | Information 2A | Information 3A |- | Information 1B | Information 2B | |- | Information 1C | | Information 3B |} Vous pouvez constater que les lignes où des informations n'ont pas été écrites donnent des cases vides. Vous pouvez copier ce code ou vous en inspirer pour faire vos essais sur le bac à sable.

3 - Aller plus loin : Mise en forme du tableau Pour créer un tableau complexe, il faut connaitre certains codes. Cette dernière partie nous permettra de voir en détails plusieurs codes particuliers, qui seront utilisés pour définir l'agencement de tableaux plus complexes. N'hésitez pas à revenir souvent ici pour vous remémorer les différents codes et leurs fonctions. Alignement d'un tableau Un tableau peut être aligné en inscrivant le code align="xxx" sur la ligne d'ouverture d'un tableau ( {| ). Ainsi, en tapant : align="left", le tableau est aligné sur la gauche du texte ; align="center", le tableau est aligné au centre ; align="right", le tableau est aligné à droite. Exemple Voici mon tableau Qui a été aligné à droite du texte. Comme je l'ai demandé ! Le tableau apparaissant sur la droite a été obtenu en tapant ce code : {| class="tableaustandard" align="right" |+ Voici mon tableau |- | Qui a été aligné à droite du texte. |- | Comme je l'ai demandé ! |} Définir la présentation des cellules Les cases d'un tableau sont nommées « cellules ». Il est possible de définir de nombreuses choses concernant la présentation de ces cellules grâce au code style="xxx". Le tableau ci-dessous présente un bref récapitulatif des possibilités offertes par ce code. Ces possibilités sont cumulables pour la plupart d'entre elles, il suffit de les intégrer entre les guillemets en les séparant les unes des autres par un point-virgule ( ; ). En tapant : J'obtiens : Bon à savoir style="text-align:right" | Mon texte à droite Mon texte à droite Par défaut, le texte dans une cellule apparaît aligné à gauche. Les codes d'alignement sont left (gauche), center (centre) et right (droite). style="vertical-align:middle" | Si ma cellule est large en hauteur, mon texte est aligné au centre. Si ma cellule est large en hauteur, mon texte est aligné au centre. Par défaut, le texte dans une cellule large apparaît aligné en haut. Les codes d'alignement en hauteur sont top (haut), middle (milieu) et bottom (bas). style="color:blue" | Mon texte en bleu Mon texte en bleu La liste intégrale des noms de couleurs HTML se trouve ici. Vous pouvez aussi définir une couleur par son code hexadécimal. style="background:#7CAAC7" | Ma cellule a pour fond la couleur définie Ma cellule a pour fond la couleur définie Exemple En tapant ce code : {| class="tableaustandard" |+ Un tableau à deux cellules |- | Sans "style", cette cellule garde ses valeurs par défaut. |- | style="text-align:center; color:white; background:#D5AA5D" | Ici, j'obtiens un texte blanc,<br>aligné au centre et sur fond orangé. |} On obtient ceci : Un tableau à deux cellules Sans "style", cette cellule garde ses valeurs par défaut. Ici, j'obtiens un texte blanc, aligné au centre et sur fond orangé.

4 - Encore plus loin : Taille et proportions width et height Toujours en utilisant style="xxx", il est possible de définir la largeur ( "width" ) et la hauteur ( "height" ) d'une cellule. Vous pouvez vous y prendre de deux façons différentes. Donner une valeur fixe en pixels. Par exemple : « style="height:300px;" | » vous permettra d'obtenir un tableau ou une cellule de 300 pixels de hauteur. Attention : évitez d'abuser de ce code pour les cellules, et fixez-vous une limite de 500 pixels de largeur maximum pour une case. Donner une valeur proportionnelle en pourcentage. Par exemple : « style="width:60%;" | » vous permettra d'obtenir un tableau ou une cellule occupant 60% de l'espace disponible. Conseillé : utiliser une taille proportionnelle permet d'obtenir un tableau qui supporte mieux les redimensionnements. Exemple (Changez la taille de votre fenêtre pour comprendre ce code.) En tapant ce code : {| class="tableaustandard" style="width:40%" |+ Un tableau proportionnel avec des cellules de taille définie |- | Ce tableau occupe 40% de l'espace disponible en largeur. Sa largeur changera en fonction de la résolution de l'utilisateur ou de la taille de sa fenêtre. |- | style="height:120px"| Cette cellule a 120 pixels de hauteur. Sa hauteur ne changera jamais. |} On obtient ceci : Un tableau proportionnel avec des cellules de taille définie Ce tableau occupe 40% de l'espace disponible en largeur. Sa largeur changera en fonction de la résolution de l'utilisateur ou de la taille de sa fenêtre. Cette cellule a 120 pixels de hauteur. Sa hauteur ne changera jamais. Fusionner les cellules Pour finir, vous apprendrez dans cette section comment faire en sorte que certaines de vos cellules soient plus grandes que d'autres sans déformer votre tableau. Ce type d'opération se nomme une fusion, et peut avoir lieu à l'horizontale ou à la verticale. Fusion horizontale Appelée aussi fusion en colonnes, il s'agit de la plus simple à mettre en place. Il suffit en effet d'utiliser le code colspan="n", et de remplacer « n » par un nombre. Exemple En tapant ce code : {| class="tableaustandard" |+ Un tableau avec des fusions horizontales |- | Colonne 1 | Colonne 2 | Colonne 3 |- | colspan="2" | Cette cellule fusionne 2 colonnes. | |- | colspan="3" | Cette cellule fusionne 3 colonnes. |} On obtient ceci : Un tableau avec des fusions horizontales Colonne 1 Colonne 2 Colonne 3 Cette cellule fusionne 2 colonnes. Cette cellule fusionne 3 colonnes. Fusion verticale Appelée aussi fusion de lignes, sa mise en place est un peu plus complexe. Il faut utiliser le code rowspan="n", et remplacer « n » par un nombre, en tenant compte de la position de la case à fusionner. Exemple En tapant ce code : {| class="tableaustandard" |+ Un tableau avec une fusion verticale |- | rowspan="3" | [[Image:Triopikeur.png|80px]] Cette cellule fusionne 3 lignes. | Ligne 1 |- | Ligne 2 |- | Ligne 3 |} On obtient ceci : Un tableau avec une fusion verticale Cette cellule fusionne 3 lignes. Ligne 1 Ligne 2 Ligne 3

5 - Interactions avec le lecteur 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 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 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 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 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 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.

---

L'aide concernant les tableaux prend fin ici. Cette page ne propose bien sûr qu'une initiation partielle et simplifiée, afin de ne pas vous perdre dans un trop grand nombre d'informations.

Au fur et à mesure de votre fréquentation du site, vous aurez l'occasion d'apprendre de nouveaux petits « trucs » concernant les tableaux.
Merci d'avoir pris le temps de lire cette page. Vous pouvez maintenant revenir au sommaire de l'aide, lire une autre page « Premiers pas », ou reprendre votre activité sur le site.

Revenir au sommaire de l'Aide