De Poképédia.
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 « Dérouler » à 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é à 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 :
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 apprise 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 faîtes 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 :
Que cela :
| Les types de Pokéball « 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="wikitable"
- 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 grisé. 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 :
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 :
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 offerte 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 apparait aligné à gauche.
|
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 apparait 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 :
J'obtiens 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 :
J'obtiens 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 grande que d'autres sans déformer votre tableau. Ce type d'opération se nomme une fusion, et peut avoir lieu à l'horizontale où à 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 :
J'obtiens 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 :
J'obtiens ceci :
Un tableau avec une fusion verticale
 Cette cellule fusionne 3 lignes.
|
Ligne 1
|
| Ligne 2
|
| Ligne 3
|
|
|
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
