Syntaxe Mediawiki - How-to ?
Source: | DataSource |
---|---|
Language: | Français |
Topic: | Mediawiki |
SubTopic: | Syntax |
Last Edit By: | DochyJP |
LastEdit: | 2021-04-14 |
Document type: | User Guide |
Status: | Active |
Access: | free |
Cet documentvous présente la syntaxe wiki, c'est-à-dire la façon de mettre en forme le texte, de créer des liens, etc. propre à MediaWiki. Cette syntaxe reprend en partie celle de l'HTML. Il résume sous forme de tableaux les différentes mises en forme possibles. La colonne de droite indique les codes à saisir, et celle de gauche l'effet obtenu.
Attention, Mediawiki est installé en anglais => toutes les commandes sont à coder dans la langue sauce menthe.
Table des matières
Une table des matières est créée automatiquement si l'article comporte plus de 3 titres ou sous-titres (au moins 4).
Pour supprimer le sommaire automatique, il suffit de mettre quelque part __NOTOC__.
Pour modifier l'emplacement de la table des matières, il suffit de placer __NOTOC__ en haut de la page, puis d'insérer __TOC__ là où vous désirez voir apparaître la table.
Il n'existe pour le moment aucune façon de limiter la profondeur des tables des matières.
Mise en page
Chapitres, sections, paragraphes
Pour les titres :
Souvent, les sections ne commencent qu'au niveau 2, puisque le niveau 1 est comme le titre. |
= Nouveau chapitre = == Nouvelle section == === Nouvelle sous-section === ==== Nouveau paragraphe ==== |
Retour à la ligne
Un simple retour à la ligne n'a aucun effet.
permet de séparer les paragraphes. |
Un simple retour à la ligne n'a aucun effet. Mais une ligne vide AVEC UNE AUTRE LIGNE VIDE permet de séparer les paragraphes. |
Voilà comment il faut faire |
Voilà comment il faut faire<br/> pour aller à la ligne. |
Les listes
|
* Les listes sont bien pratiques : ** Elles permettent d'organiser les données ** Elles embellissent le document |
|
# Les listes numérotées sont également bien pratiques # Bien organisées ## Faciles à lire |
Les lignes
|
Les lignes :peuvent être ::indentées :::sur plusieurs niveaux |
Avec tout cela, il est maintenant possible de mélanger les types de listes :
|
*Une liste numérotée : :#Premier élément :#Second élément *d'autres branches à l'arborescence |
|
; Listes de définitions : listes contenant des définitions ; Terme à expliquer : explication du terme |
En utilisant des balises (tags) HTML c'est plus beau (mais c'est plus difficile à mémoriser) :
Petit truc mnémotechnique :
|
<ul> <li>Une liste numérotée :</li> <ol> <li>Premier élément</li> <li>Second élément</li> </ol> <li>d'autres branches à l'arborescence</li> </ul> |
Effets divers
SI une ligne commence par une espace ALORS elle apparaîtra exactement telle qu'elle a été saisie ; dans une police non proportionnelle ; les sauts de ligne ne seront pas automatiques ; FIN SI C'est bien utile pour : • copier/coller un texte pré-formaté ; • des descriptions d'algorithmes ; Note : vous forcez ainsi la page à être relativement large, ce qui peut être gênant à lire. |
SI (une ligne commence par une espace) ALORS elle apparaîtra exactement telle qu'elle a été saisie ; dans une police non proportionnelle; les sauts de ligne ne seront pas automatiques ; FIN SI C'est bien utile pour : • copier/coller un texte pré-formaté ; • des descriptions d'algorithmes ; |
|
<center>Le texte peut être centré.</center> |
Une ligne horizontale : au-dessus et en-dessous. |
Une ligne horizontale : au-dessus ---- et en-dessous. |
Mise en forme des caractères
Faire ressortir un mot, un peu plus, encore plus. À utiliser également dans les formules : |
''Faire ressortir un mot'', '''un peu plus''', '''''encore plus'''''. '''F''' = ''m'' '''a'''. |
Texte en couleur |
<span style="color:#FF0000;">Texte en couleur</span> |
Différentes tailles de polices : |
<small>petite taille</small> <big>grande taille</big> |
Police machine à écrire : |
<tt>termes techniques</tt> |
Vous pouvez |
<strike>barrer</strike> <u>en souligner d'autres...</u> |
Umlauts et accents : À Á Â Ã Ä Å Æ Note : depuis le passage à l'Unicode on peut aussi parfaitement écrire les caractères spéciaux directement sans aucun souci. |
À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï Ñ Ò Ó Ô Õ Œ Ö Ø Ù Ú Û Ü ß à á â ã ä å æ ç è é ê ë ì í î ï ñ ò ó ô õ œ ö ø ù ú û ü ÿ |
Ponctuations : |
¿ ¡ « » § ¶ † ‡ • |
Caractères spéciaux : |
™ © ® ¢ € ¥ £ ¤ |
Indice (subscript en anglais) : x2 et |
Indice : x<sub>2</sub> et Exposant : x<sup>2</sup> |
Caractères grecs : |
α β γ δ ε ζ η θ ι κ λ μ ν ξ π ρ σ ς τ υ φ χ ψ ω Γ Δ Θ Λ Ξ Π Σ Φ Ψ Ω |
Caractères mathématiques : ∫ ∑ ∏ √ ± ∞ |
∫ ∑ ∏ √ ± ∞ ≈ ∝ ≡ ≠ ≤ ≥ → × · ÷ ∂ ′ ″ ∇ ‰ ° ∴ ℵ ø ∈ ∋ ∩ ∪ ⊂ ⊃ ⊆ ⊇ ¬ ∧ ∨ ∃ ∀ ⇒ ⇔ |
Plus d'espace que d'habitude, sans saut de ligne : x2 ≥ 0 est vrai. |
x<sup>2</sup> ≥ 0 |
ASCII art (Commencer chaque ligne par un blanc) : ∞ -x2 ∫ e dx = √π -∞ Malgré tout, la racine carrée est très moche. |
∞ -x<sup>2</sup> ∫ e dx = √π -∞ |
Formules mathématiques compliquées : <math>\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}</math>
|
<math>\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}</math> |
Suppression de l'interprétation d'une balise : Lien → (<i>vers</i>) l'[[Aide:Contenu|Index]] Les balises <i>...</i> et [[...]] apparaissent en clair. Elles ne sont pas interpretées par le logiciel.
|
<nowiki>Lien → (<i>vers</i>) la [[Wikipédia:FAQ]]</nowiki> |
Liens et adresses internet
Les liens
Liens internes
Lien vers Accueil. |
Lien vers [[Main_Page|Accueil]]. |
page d'accueil |
[[Accueil|page d'accueil]] |
La sexualité des mouches dans le Vercors oriental. |
[[La sexualité des mouches dans le Vercors oriental]]. |
Pour référencer les pages utilisateur, il existe un raccourci pour éviter de taper deux fois le nom : |
[[User:DochyJP||]] est équivalent à [[User:DochyJP|DochyJP]] |
Il est possible de pointer directement vers un paragraphe voire un sous-paragraphe d'un article donné: il suffit de faire suivre le nom de l'article de la touche # et du titre du paragraphe ou sous paragraphe en respectant l'orthographe, majuscules comprises Le lien suivant : |
[[Manuel_de_formation_d'un_nouveau_collaborateur_du_Service_Desk#Les différentes équipes de GIAL]] |
Liens externes
Lien vers http://www.google.fr . |
Lien vers http://www.google.fr |
Suivre ce lien : [1]. |
Suivre ce lien : [http://www.google.fr]. |
Aller sur le site de Google. |
Aller sur le site de [http://www.google.fr Google]. [http://www.google.fr Google, le moteur de recherche]. |
Les points d'ancrage
Les points d'ancrage : ancre 1. ancre 2. Ces deux lignes sont des points d'ancrage vers lesquels des liens internes ou externes à cette page peuvent pointer. |
<span id="ancre_1">ancre 1.</span> <span id="ancre_2">ancre 2.</span> Ces deux points d'ancrage sont utilisés comme exemple dans la page Ancres. |
Les redirections
La redirection vers l'accueil d'une page vers une autre est possible en mettant ce texte dans la première ligne : |
#Main_Page|redirection vers l'accueil par ex |
Les adresses internet
Elles sont également appelées liens externes. Voyez aussi la page Lien.
Lien externe : Wikipédia |
Lien externe : [http://fr.wikipedia.org Wikipédia] |
Mais l'adresse internet suffit : http://fr.wikipedia.org. |
Mais l'adresse internet suffit : http://fr.wikipedia.org . |
Les images
Il n'est possible d'utiliser que des images qui ont été téléchargées vers le serveur.
Voyez Images et fichiers importés pour le chargement d'un fichier sur le serveur et pour une explication complète pour l'utilisation de l'image.
Syntaxe
[[File:filename.extension|options|caption]]
ou "options" peut être vide ou bien est composé des éléments suivants, séparés par le symbole tube (pipe) "|"
- Option du format : un des bordure et/ou sans cadre, avec cadre, miniature; si plusieurs sont présents, seul le premier est utilisé;
- Option du format : un des bordure et/ou sans cadre, avec cadre, miniature; si plusieurs sont présents, seul le premier est utilisé;
Contrôle la façon dont l'image affichée est formatée et incluse dans le reste de la page.
- Option de redimensionement : un de
- {width}px — Redimensionne l'image pour l'adapter dans la largeur maximale donnée en pixels, sans restreindre sa hauteur; (A space character between the width value and "px" is permitted.)
- x{height}px — Redimensionne l'image pour l'adapter à une hauteur maximale donnée en pixels, sans restreindre sa largeur;
- {width}x{height}px — Redimensionner l'image pour l'adapter à une largeur et une hauteur données en pixels;
- upright — Redimensionne une image pour l'adapter à des dimensions raisonnables, selon les préférences de l'utilisateur (adapté aux images dont la taille est supérieure à la largeur). Utiliser |upright=1.0| montrera l'image à la taille par défaut; |upright=2.0| la montrera au double de la taille par défaut. La taille maximale par défaut dépend du format et des dimensions de l'image interne (en fonction de son type de support)
- Option Horizontal alignment : parmi left (gauche), right (droite), center (centré), none (aucun); si plusieurs sont présents, seul le premier est utilisé; cela contrôle l'alignement horizontal (et en ligne / bloc ou styles flottants) de l'image dans un texte (pas de valeur par défaut).
- Option Vertical alignment : parmi baseline (line de base), sub (sous), super, top (haut), text-top (haut du texte), middle (milieu), bottom (bas), text-bottom (bas du texte) : cela contrôle l'alignement vertical d'une image non-flottante en ligne avec le texte avant ou après l'image, et dans le même bloc (l'alignement vertical par défaut est 'milieu' ).
- Option Link: parmi
- link={cible} — Permet de changer la cible (vers un titre de page arbitraire, ou une URL) du lien généré, activable pour l'affichage de l'image; à savoir, affichage [[File:Exemple.jpg|20px|link=http://www.wikipedia.ord]] interprété comme Exemple.jpg (lien externe), ou [[File:MediaWiki logo embroidery.PNG|40px|Exemple.PNG]] interprété comme (lien interne).
- link= (valeur vide) Affiche une image sans aucun lien activable; à savoir [[File:MediaWiki logo embroidery.PNG|20px|link=]] interprété comme .
- Autre option spécifiques :
- alt={texte alternatif} — (MediaWiki 1.14+) Définit le texte alternatif (attribut HTML alt = "..." de l'élément d'une image <img />) généré qui sera affiché soit si l'image référencée ne peut pas être téléchargé et/ou intégré, soit si le support du média nécessite l'utilisation du texte de description de remplacement (par exemple lors de l'utilisation d'un lecteur Braille ou avec des options d'accessibilité définies par l'utilisateur dans son navigateur).
- page={nombre} : Affiche le numéro de page spécifié (actuellement seulement applicable lors de l'affichage d'un fichier .djvu ou .pdf).
- class={class html} : Définit les classes (attribut HTML class="..." de l'élément <img /> généré).
- lang={language code} : Pour les fichier SVG contenant <switch> des instructions variables selon l'attribut langue système, sélectionne quelle langue pour afficher le fichier.
- Option de redimensionement : un de
Si un paramètre ne correspond à aucune de ces possibilités, il est interprété comme étant le texte de la légende de l'image. If more than one non-parameter string is present, the final non-parameter string will be used as the caption. La légende s'affiche en dessous de l'image pour les formats "thumb" et "frame", pour les autres c'est une infobulle. Dans le cas "thumb" ou "frame", la légende peut contenir des liens wiki ou autre marques de formatage. Des options supplémentaires peuvent êtres disponibles selon les extensions MediaWiki installées.
Si l'option "alt" n'est pas renseignée, et qu'une légende est présente, le texte alternatif (le champ alt de l'élément HTML img) sera créé automatiquement à partir de la légende, avec les marques de formatage automatiquement supprimées, sauf en mode vignette ou cadre car la légende est déjà lisible par les lecteurs d'écran dans ce cas.
Tableaux
Les tableaux peuvent être très utiles pour la représentation de certaines données sur Wikipédia. Si vous êtes déjà familier des codes HTML permettant de créer des tableaux, vous pouvez insérer simplement le code directement dans l'article que vous êtes en train d'éditer.
Cependant, les balises de tableaux sont parfois difficiles à éditer surtout pour quelqu'un n'étant pas à l'aise avec la codification HTML. Pour cela, des nouvelles balises développées par Magnus Manske ont été créées. Ces balises remplacent les traditionnelles balises HTML <table>, <tr>, <td>, <th> et <caption>. On peut donc se passer totalement des balises HTML ; il est même plutôt conseillé de ne plus utiliser de code HTML pour créer un tableau, bien que son utilisation soit encore possible.
L'utilisation de tableaux doit être évitée si cela est possible. En effet, l'accessibilité aux pages qui contiennent un tableau est rendue plus difficile à certaines personnes, notamment aux aveugles ou aux débiles.
Ce petit outil XL permet de transformer 19 colones sur 100 lignes en format wiki : File:Tableau XL vers tableau WIKI.xlsx
Petits exemples
Ici, deux exemples simples pour avoir un premier contact avec le codage Wiki. Notre premier exemple nous montrera le tableau le plus minimaliste qui soit, c'est à dire celui qui ne contiendrait qu'une seule cellule.
Résultat affiché | Codage Wiki | Codage HTML | |
---|---|---|---|
|
{| border="1" |cellule |} |
<table border="1"> <tr> <td>cellule</td> </tr> </table> |
Le deuxième exemple contient deux cellules. Comme vous pouvez le constater, il est possible de disposer les cellules de deux façons différentes. Soit les cellules sont placées les unes en dessous des autres, soit elles sont placées les unes à côté des autres. Mais nous y reviendrons plus en détail par la suite.
Résultat affiché | Codage Wiki | Codage HTML | ||
---|---|---|---|---|
|
{| border="1" |gauche |droite |} |
<table border="1"> <tr> <td>gauche</td> <td>droite</td> </tr> </table> | ||
|
{| border="1" |gauche || droite |} |
<table border="1"> <tr> <td>gauche</td> <td>droite</td> </tr> </table> |
La syntaxe des tableaux
Nous verrons ici les différentes balises qui peuvent apparaître dans la création d'un tableau.
table
Dans le langage HTML, l'élément table
est l'élément de base pour la création d'un tableau. En wiki, pour créer un tableau, nous procédons de la façon suivante :
{| paramètres |}
ce qui donnerait en HTML, l'encodage suivant :
<table paramètres> </table>
On voit donc bien qu'un tableau commence toujours par l'accolade ouvrante {, suivie d'un trait vertical |. La fin d'un tableau est également composée de deux caractères. Le premier est le trait vertical | et il est suivi du deuxième caractère qui est l'accolade fermante }. Le champ paramètres doit bien entendu être remplacé par différents paramètres utilisés dans les tableaux tel que la couleur de fond, la taille, s'il faut faire apparaître une bordure, etc. L'utilisation des paramètres n'est pas obligatoire et on peut donc sans problème ne rien placer à cet endroit.
td
En HTML, l'élément td
représente une cellule dans une ligne du tableau. Pour créer des cellules, la syntaxe est la suivante :
|cellule1 |cellule2 |cellule3
Une autre disposition des cellules totalement équivalente est la suivante :
|cellule1||cellule2||cellule3
Cette deuxième disposition impose qu'entre deux cellules apparaissent deux traits verticaux || car un seul trait sera interpreté différemment par le logiciel. Mais ces deux dispositions donnent le même code en HTML qui est le suivant :
<td>cellule1</td><td>cellule2</td><td>cellule3</td>
Comme pour le tableau en lui-même, chacune des cellules d'un tableau peut contenir des paramètres. Pour cela, le contenu d'une cellule sera précédé des paramètres de la façon suivante :
|paramètres|cellule1 |paramètres|cellule2 |paramètres|cellule3
ou encore, suivant l'autre disposition :
|paramètres|cellule1||paramètres|cellule2||paramètres|cellule3
mais quelle que soit la disposition utilisée, le code HTML sera le suivant :
<td paramètres>cellule1</td><td paramètres>cellule2</td><td paramètres>cellule3</td>
tr
Ce sont les balises tr
qui permettent de passer à une nouvelle ligne dans le tableau. Leur utilisation est très simple, lorsque vous souhaitez passer à une nouvelle ligne, il suffit de faire :
|-
et comme le nombre de tiret - n'a pas de limite maximale, on peut très bien utiliser :
|-----------------------------------------------------
et nous obtenons en HTML :
<tr> ... </tr>
Un grand avantage du codage wiki est qu'il se charge entièrement de la fermeture des balises tr
ainsi que de leur ouverture si cette ouverture est nécessaire. Par exemple, si on reprend le tout premier tableau que nous avons créé, celui contenant une seule cellule, nous n'utilisons pas |- dans notre encodage et pourtant le code source HTML contient bien une balise tr
.
Comme pour les autres balises, il est bien sûr possible d'utiliser des paramètres :
|- paramètres
ce qui donne en HTML :
<tr paramètres> ... </tr>
th
Les balises th
sont très semblables aux balises td
dans le sens où leur utilisation est totalement identique, seul la syntaxe change. Cependant il y a bien une différence notable entre ces deux balises qui intervient au niveau visuel. La balise th
est généralement utilisée pour spécifier qu'une cellule représente un titre. Et elle peut, à cet effet, être utilisée partout où vous estimez que la cellule représente un titre. Visuellement, cela se voit car le texte de la cellule est en gras.
La syntaxe est différente et là où on utilisait un trait vertical pour les cellules, nous utiliserons un point d'exclamation !
!titre1 !titre2 !titre3
ou suivant l'autre disposition :
!titre1!!titre2!!titre3
par contre, entre les paramètres et le contenu de la cellule, nous utiliserons toujours le trait vertical |
!paramètres|titre1!!paramètres|titre2!!paramètres|titre3
et nous obtenons alors en HTML :
<th paramètres>titre1</th><th paramètres>titre2</th><th paramètres>titre3</th>
Voyons ce que nous obtenons sur un exemple. Si on souhaite que dans notre tableau, la première ligne soit interpretée comme étant une ligne de titres :
Résultat affiché | Codage Wiki | Codage HTML | ||||
---|---|---|---|---|---|---|
|
{| border="1" ! Titre Colonne 1 !! Titre Colonne 2 |- |cellule1 |cellule2 |} |
<table border="1"> <tr> <th>Titre Colonne 1</th> <th>Titre Colonne 2</th> </tr> <tr> <td>cellule1</td> <td>cellule2</td> </tr> </table> |
Dans l'exemple qui suit, bien que la cellule de la seconde colonne ne soit pas balisée comme un titre (nous utilisons les deux traits || au lieu de !!), le logiciel la considère malgré tout comme telle :
Résultat affiché | Codage Wiki | Codage HTML | ||
---|---|---|---|---|
|
{| border="1" ! Titre Colonne 1 || Colonne 2 |} |
<table border="1"> <tr> <th>Titre Colonne 1</th> <th>Colonne 2</th> </tr> </table> |
Pour éviter ce problème, nous devons faire passer la deuxième colonne à la ligne comme ceci :
Résultat affiché | Codage Wiki | Codage HTML | ||
---|---|---|---|---|
|
{| border="1" ! Titre Colonne 1 | Colonne 2 |} |
<table border="1"> <tr> <th>Titre Colonne 1</th> <td>Colonne 2</td> </tr> </table> |
L'élément caption
représente une légende. C'est un petit texte qui est placé au-dessus du tableau qui permet de préciser ce qui se trouve dans le tableau. Voici comment introduire une légende en Wiki :
|+ légende
qui donnera en HTML
<caption>légende</caption>
encore une fois, il est possible d'utiliser des paramètres de la façon suivante :
|+ paramètres|légende
qui donne alors
<caption paramètres>légende</caption>
Il n'est autorisé de placer qu'une seule légende par tableau. Cependant s'il en existe plusieurs, seule la première sera prise en compte. Voici le résultat que l'on obtient :
Résultat affiché | Codage Wiki | Codage HTML | ||
---|---|---|---|---|
|
{| border="1" |+ légende | Colonne 1 | Colonne 2 |} |
<table border="1"> <caption>légende</caption> <tr> <td>Colonne 1</td> <td>Colonne 2</td> </tr> </table> |
Exemple récapitulatif
Maintenant que nous avons vu les différentes balises qui sont supportées par le codage Wiki, nous allons vous montrer un exemple récapitulatif dans lequel tout ce que nous venons de voir apparaîtra.
Résultat affiché | Codage Wiki | Codage HTML | ||||||
---|---|---|---|---|---|---|---|---|
|
{| border="1" |+ légende ! ! Titre 1 !! Titre 2 |- ! Titre ligne | Cellule 1 | Cellule 2 |} |
<table border="1"> <caption>légende</caption> <tr> <th></th> <th>Titre 1</th> <th>Titre 2</th> </tr> <tr> <th>Titre ligne</th> <td>Cellule 1</td> <td>Cellule 2</td> </tr> </table> |
Tableaux imbriqués
Lorsque vous créez un tableau, vous pouvez y imbriquer un autre tableau. Au lieu de placer du texte dans une cellule, il suffit d'y placer un tableau comme le montre l'exemple suivant :
Résultat affiché | Codage Wiki | Codage HTML | ||||||||
---|---|---|---|---|---|---|---|---|---|---|
|
{| border="1" | Gauche | {| border="1" |tableau imbriqué |autre cellule |} | Droite |- | Cellule 1 | Cellule 2 | Cellule 3 |} |
<table border="1"> <tr> <td>Gauche</td> <td> <table border="1"> <tr> <td>tableau imbriqué</td> <td>autre cellule</td> </tr> </table> </td> <td>Droite</td> </tr> <tr> <td>Cellule 1</td> <td>Cellule 2</td> <td>Cellule 3</td> </tr> </table> |
Les paramètres
Jusqu'à présent, nous avons vu la syntaxe pour créer des tableaux. Pour chacune des balises, nous avons précisé que l'on pouvait ajouter des paramètres. Ces différents paramètres seront étudiés dans cette section. Ils permettent notamment de spécifier le positionnement du tableau (gauche, milieu, droit), des couleurs à utiliser et bien d'autres choses encore.
border =
Ce paramètre que nous avons déjà utilisé dans nos différents tableaux permet de spécifier la taille de la bordure du tableau. Nous pouvons décider de ne pas placer de bordure en mettant une taille de 0.
border="x"
où x est donc la taille de la bordure.
Résultat affiché | Codage Wiki | Codage HTML | ||
---|---|---|---|---|
|
{| border="0" |sans bordure 1 |sans bordure 2 |} |
<table border="0"> <tr> <td>sans bordure 1</td> <td>sans bordure 2</td> </tr> </table> | ||
|
{| border="1" |bordure normale 1 |bordure normale 2 |} |
<table border="1"> <tr> <td>bordure normale 1</td> <td>bordure normale 2</td> </tr> </table> | ||
|
{| border="10" |grosse bordure 1 |grosse bordure 2 |} |
<table border="10"> <tr> <td>grosse bordure 1</td> <td>grosse bordure 2</td> </tr> </table> |
rowspan et colspan
Ces deux paramètres permettent de fusionner des cellules. Ils s'utilisent de la façon suivante :
colspan="x" rowspan="x"
où x représente le nombre de cellules fusionnées. Voyons cela sur un exemple dans lequel on va fusionner deux colonnes :
Résultat affiché | Codage Wiki | Codage HTML | ||||||
---|---|---|---|---|---|---|---|---|
|
{| border="1" | Simple | colspan="2" | Fusionnée |- | cellule 1 | cellule 2 | cellule 3 |} |
<table border="1"> <tr> <td>Simple</td> <td colspan="2">Fusionnée</td> </tr> <tr> <td>Cellule 1</td> <td>Cellule 2</td> <td>Cellule 3</td> </tr> </table> |
Et voyons maintenant comment fusionner des lignes :
Résultat affiché | Codage Wiki | Codage HTML | ||||||
---|---|---|---|---|---|---|---|---|
|
{| border="1" | Première | Deuxième |- | Gauche 1 | rowspan="3" | Droite |- | Gauche 2 |- | Gauche 3 |} |
<table border="1"> <tr> <td>Première</td> <td>Deuxième</td> </tr> <tr> <td>Gauche 1</td> <td rowspan="3">Droite</td> </tr> <tr> <td>Gauche 2</td> </tr> <tr> <td>Gauche 3</td> </tr> </table> |
On voit donc avec cet exemple que l'on peut aisément fusionner des cellules que ce soit au niveau des colonnes ou au niveau des lignes. Le nombre de cellules fusionnées n'est pas limité. Et enfin, il est tout à fait possible de mélanger ces deux paramètres.
align et valign
Jusqu'à présent, tous nos tableaux étaient positionnés à gauche. Et le contenu de chacune des cellules était également positionné à gauche. Nous allons maintenant voir comment positionner aussi bien le tableau que le contenu des cellules. Un tableau ne peut-être aligné que suivant l'axe horizontal, c'est-à-dire à gauche, à droite ou au milieu. Alors que pour le contenu d'une cellule, on peut aussi décider de le positionner en haut, en bas ou au milieu de la cellule.
Pour l'alignement horizontal, il faut utiliser le paramètre align
alors que pour l'alignement vertical, il faut utiliser valign
:
align="left" align="center" align="right"
valign="top" valign="center" valign="bottom"
Voyons maintenant un exemple de positionnement d'un tableau :
Résultat affiché | Codage Wiki | Codage HTML | |
---|---|---|---|
|
{| align="left" border="1" |à gauche |} |
<table align="left" border="1"> <tr> <td>à gauche</td> </tr> </table> | |
|
{| align="center" border="1" |au centre |} |
<table align="center" border="1"> <tr> <td>au centre</td> </tr> </table> | |
|
{| align="right" border="1" |à droite |} |
<table align="right" border="1"> <tr> <td>à droite</td> </tr> </table> |
Passons au positionnement horizontal du texte dans une cellule. Les trois positions que nous montrons dans l'exemple qui suit sont donc gauche, milieu, droite.
Résultat affiché | Codage Wiki | Codage HTML | ||||
---|---|---|---|---|---|---|
|
{| border="1" | Positionnement |- | align="left" | g |- | align="center" | c |- | align="right" | d |} |
<table border="1"> <tr> <td>Positionnement</td> </tr> <tr> <td align="left">g</td> </tr> <tr> <td align="center">c</td> </tr> <tr> <td align="right">r</td> </tr> </table> |
Pour chacune des cellules, il est également possible de positionner le contenu verticalement. Dans l'exemple qui suit, nous avons créé une cellule (celle de gauche) avec une taille de 150 pixels pour que l'on puisse bien voir comment se positionne le texte des autres cellules.
Résultat affiché | Codage Wiki | Codage HTML | ||||
---|---|---|---|---|---|---|
|
{| border="1" | height="150" | Position | valign="top" | haut | valign="center" | milieu | valign="bottom" | bas |} |
<table border="1"> <tr> <td height="150">Position</td> <td valign="top">haut</td> <td valign="center">milieu</td> <td valign="bottom">bas</td> </tr> </table> |
cellspacing et cellpadding
Il est possible de changer l'espacement entre les cellules grâce au paramètre cellspacing
. Et il est possible de spécifier l'espacement entre le bord d'une cellule et son contenu grâce au paramètre cellpadding
. Leur utilisation est la suivante :
cellspacing="x"
cellpadding="x"
Commençons par un exemple avec le paramètre cellspacing
:
Résultat affiché | Codage Wiki | Codage HTML | ||||
---|---|---|---|---|---|---|
|
{| border="1" cellspacing="5" |cellule 1 |cellule 2 |- |cellule 3 |cellule 4 |} |
<table border="1" cellspacing="5"> <tr> <td>cellule 1</td> <td>cellule 2</td> </tr> <tr> <td>cellule 3</td> <td>cellule 4</td> </tr> </table> | ||||
|
{| border="1" cellspacing="20" |cellule 1 |cellule 2 |- |cellule 3 |cellule 4 |} |
<table border="1" cellspacing="20"> <tr> <td>cellule 1</td> <td>cellule 2</td> </tr> <tr> <td>cellule 3</td> <td>cellule 4</td> </tr> </table> |
et alors le paramètre cellpadding
:
Résultat affiché | Codage Wiki | Codage HTML | ||||
---|---|---|---|---|---|---|
|
{| border="1" cellpadding="5" |cellule 1 |cellule 2 |- |cellule 3 |cellule 4 |} |
<table border="1" cellpadding="5"> <tr> <td>cellule 1</td> <td>cellule 2</td> </tr> <tr> <td>cellule 3</td> <td>cellule 4</td> </tr> </table> | ||||
|
{| border="1" cellpadding="20" |cellule 1 |cellule 2 |- |cellule 3 |cellule 4 |} |
<table border="1" cellpadding="20"> <tr> <td>cellule 1</td> <td>cellule 2</td> </tr> <tr> <td>cellule 3</td> <td>cellule 4</td> </tr> </table> |
width et height
Grâce aux paramètres width
et height
, on peut spécifier la largeur et la hauteur aussi bien du tableau en lui même que pour chacune des cellules du tableau. Lorsque l'on précise la taille, on peut préciser une valeur absolue en pixels ou bien on peut également préciser une taille en pourcentage. Dans les deux cas, cela représente une taille minimale, cependant si le contenu du tableau est trop gros, ce tableau adaptera sa taille au contenu.
Le premier exemple montre l'utilisation d'une taille fixe. Le premier cas utilise une largeur de 10 pixels, cependant la largeur du contenu du tableau étant plus grande, il s'adapte donc à cette taille. Le second cas utilise une taille de 100 pixels ; ici nous n'avons pas de problème car 100 pixels est bien plus grand que la largeur occupée par le contenu du tableau, celui-ci a donc bien une largeur de 100 pixels. Et enfin le troisième exemple utilise une largeur de 200 pixels.
Résultat affiché | Codage Wiki | Codage HTML | |
---|---|---|---|
|
{| border="1" width="10" |cellule |} |
<table border="1" width="10"> <tr> <td>cellule</td> </tr> </table> | |
|
{| border="1" width="100" |cellule |} |
<table border="1" width="100"> <tr> <td>cellule</td> </tr> </table> | |
|
{| border="1" width="200" |cellule |} |
<table border="1" width="200"> <tr> <td>cellule</td> </tr> </table> |
Voyons maintenant l'utilisation d'une taille proportionnelle. Dans le premier cas, on impose au tableau d'occuper un maximum de 33% de la largeur disponible. Dans le deuxième, puis le troisième cas, le tableau doit respectivement occuper un maximum de 50%, puis de 100%, de l'espace disponible.
Résultat affiché | Codage Wiki | Codage HTML | |
---|---|---|---|
|
{| border="1" width="33%" |cellule |} |
<table border="1" width="33%"> <tr> <td>cellule</td> </tr> </table> | |
|
{| border="1" width="50%" |cellule |} |
<table border="1" width="50%"> <tr> <td>cellule</td> </tr> </table> | |
|
{| border="1" width="100%" |cellule |} |
<table border="1" width="100%"> <tr> <td>cellule</td> </tr> </table> |
Pour le paramètre height
, l'utilisation est la même que pour width
mais cette fois-ci on changera alors la hauteur du tableau. Ces deux paramètres peuvent également être utilisés pour chacune des cellules. Voyons un exemple avec les cellules :
Résultat affiché | Codage Wiki | Codage HTML | ||||||
---|---|---|---|---|---|---|---|---|
|
{| border="1" width="100%" | colspan="3" | Tableau 1 |- | width="33%" | 1/3 cellule 1 | width="33%" | 1/3 cellule 2 | width="33%" | 1/3 cellule 3 |} |
<table border="1" width="100%"> <tr> <td colspan="3">Tableau 1</td> </tr> <tr> <td width="33%">1/3 cellule 1</td> <td width="33%">1/3 cellule 2</td> <td width="33%">1/3 cellule 3</td> </tr> </table> | ||||||
|
{| border="1" width="100%" | colspan="3" | Tableau 2 |- | width="50%" | 1/2 cellule 1 | width="25%" | 1/4 cellule 2 | width="25%" | 1/4 cellule 3 |} |
<table border="1" width="100%"> <tr> <td colspan="3">Tableau 2</td> </tr> <tr> <td width="50%">1/2 cellule 1</td> <td width="25%">1/4 cellule 2</td> <td width="25%">1/4 cellule 3</td> </tr> </table> |
bgcolor
Il est possible de changer la couleur de fond d'une cellule. Pour cela, il faut utiliser le paramètre bgcolor
de la façon suivante :
bgcolor="#hex"
Pour spécifier une couleur, il faut donc utiliser le caractère # suivi du code couleur en hexadécimal. Reportez-vous à la page Aide:couleurs pour avoir une liste de couleurs avec leur valeur hexadécimale. Pour bien illustrer cela, regardons l'exemple qui suit :
Résultat affiché | Codage Wiki | Codage HTML | |||
---|---|---|---|---|---|
|
{| border="1" | bgcolor="#FF0000" | rouge | bgcolor="#00FF00" | vert | bgcolor="#0000FF" | bleu |} |
<table border="1"> <tr> <td bgcolor="#FF0000">rouge</td> <td bgcolor="#00FF00">vert</td> <td bgcolor="#0000FF">bleu</td> </tr> </table> |
style
Nous arrivons au dernier des paramètres que l'on peut utiliser dans des tableaux : style
. Ce paramètre permet de changer tout l'aspect graphique. Il peut aussi bien être utilisé pour le tableau que pour une cellule unique. Voici un exemple d'utilisation du paramètre style, nous allons changer la couleur de fond du tableau et choisir la couleur verte :
Résultat affiché | Codage Wiki | Codage HTML | |||
---|---|---|---|---|---|
|
{| border="1" style="background-color:#CCFFCC" | cellule 1 |- | cellule 2 |- | cellule 3 |} |
<table border="1" style="background-color:#CCFFCC"> <tr> <td>cellule 1</td> </tr> <tr> <td>cellule 2</td> </tr> <tr> <td>cellule 3</td> </tr> </table> |
Remarques
Quand les tableaux sont-ils appropriés ?
Les tableaux sont parfaits pour organiser toute information qui sera plus clairement présentée dans un format lignes/colonnes. Ce qui inclut :
- Tableaux mathématiques
- Tables de multiplication
- Tables de division
- Tableaux de recherche
- Listes d'informations
- Mots équivalents dans deux ou plusieurs langues
- Personnalités, date de naissance, fonction
- Artiste, disque, année et maison d'édition
Très souvent, une liste est plus lisible laissée en tant que liste. Certains articles comportent des listes excessivement longues très difficiles à éditer si elles se retrouvent sous forme de tableaux. Avant de transformer une liste en tableau, essayez de vous figurer l'aspect sous forme de tableau (lignes et colonnes) afin d'être sûr de son utilité. Si c'est le cas, alors l'option du tableau est certainement le meilleur choix.
Quand les tableaux sont-ils inappropriés ?
Les tableaux ne doivent pas être utilisés uniquement pour la présentation. Si l'information que vous éditez n'est pas de nature tabulaire, elle ne devra alors pas être mise en tableau. Évitez d'utiliser les tableaux pour mettre une légende sous une illustration, ordonner un groupe de liens ou autres cas strictement visuels. Cela rend l'article trop difficile à éditer pour d'autres Wikipédiens et les tableaux ne sont pas vraiment faits pour cela.
Liste très longues ou listes très courtes
Si une liste est vraiment très longue ou au contraire très simple, préférez l'usage des formats de listes standards de Wikipédia. Les listes longues seront difficiles à maintenir si elles se retrouvent à l'intérieur de tableaux et les listes courtes sont réellement trop simples pour nécessiter un formatage en tableau. Voici un petit exemple à ne pas suivre :
1980 Vague de pluie 1988 Nom d'un chat ! 1994 La vie, la pomme 1994 Le ciel est vert
choisissez plutôt une liste classique :
- 1980 : Vague de pluie
- 1988 : Nom d'un chat !
- 1994 : La vie, la pomme
- 1994 : Le ciel est vert
Légende d'illustration
Souvent, les illustrations d'un article sont placées dans un semblant de tableau. Du fait que le tableau peut être flottant et placé à gauche ou à droite de l'écran, il paraît facile et pratique d'utiliser un tableau unicellulaire pour placer l'image à un endroit précis de l'écran. Cette solution était nécessaire pour les anciens navigateurs, particulièrement ceux qui ne supportaient pas les feuilles de style en cascade pour l'affichage de telles images. Aujourd'hui, la plupart des navigateurs fonctionnent parfaitement avec ces feuilles de style. Aussi, la façon recommandée d'afficher les images est d'utiliser les balises nommées div
.
Voici un petit aperçu à ne pas faire :
{| align="right" border="0" cellpadding="0" | [[File:Blueberries.PNG]] |}
mais procédez de la façon suivante qui est tout à fait correcte :
[[File:Blueberries.PNG|right|]]
Dans ces deux cas, le résultat sera le même. L'illustration sera flottante à droite de l'écran et le texte environnant habillera l'illustration. Voici ce que cela donne dans votre navigateur (avec du texte ajouté) :
La myrtille (du latin myrtus, du grec murtos : myrte, symbole de l'amour ou de la gloire) est l'espèce Vaccinium myrtillus, airelle également connue sous les dénominations de airelle myrtille, arbrêtier, gueule noire, mauret, brimbelle ou raisin des bois. Au Canada, on l'appelle bleuet et sa culture est très importante, notamment celle des fruits sauvages. Le nom myrtille désigne aussi bien le végétal que son fruit, mais le terme de myrtillier est cependant usité.
La myrtille est un vigoureux sous-arbrisseau vivace et rampant, de 20 à 60 cm, que l'on trouve en Eurasie et en Amérique du Nord et qui forme des fourrés nains en dressant des rameaux serrés aux tiges vertes à section triangulaire. En France, elle est commune en montagne, surtout dans la moitié Nord de la France. Elle croît entre 400 à 2500 m d'altitude dans les forêts de conifères, les bois clairs, les landes et les tourbières, associée aux plantes acidophiles.
Dans le langage des fleurs, la myrtille signifie que l'on recherche la solitude.
Problèmes éventuels
Les tableaux peuvent provoquer d'autres difficultés, surtout lorsqu'ils ne sont pas correctement utilisés. Voici quelques cas que vous pourrez rencontrer lors de l'usage de tableaux dans vos articles :
- Les tableaux peuvent être une difficulté pour certains éditeurs, spécialement pour les nouveaux Wikipédiens. Les nouveaux éditeurs peuvent être effrayés lorsqu'ils cliquent sur « Modifier cette page » et qu'ils découvrent un gros pavé inintelligible (pour eux) de codes HTML. Essayez de conserver des tableaux simples et respectant la codification. Vous pouvez également ajouter des commentaires (qui n'apparaîtront pas dans la page normale) du genre « <!-- Pour éditer le texte de cet article, dépassez le tableau. --> » afin de rassurer les éditeurs.
- Il est souvent difficile, même pour des auteurs expérimentés en HTML, d'être sûr de l'aspect qu'aura le tableau dans tous (ou beaucoup) de navigateurs. Même la plus petite erreur typographique peut avoir des conséquences catastrophiques sur l'affichage du tableau. Même si vous êtes confiant dans votre aptitude à éviter ce genre de problème, il se peut que ce ne soit pas le cas de futurs éditeurs. Encore une fois, essayez d'élaborer des tableaux simples et bien écrit afin de minimiser les risques.
- Les gros tableaux contenant beaucoup d'informations peuvent dépasser le bord droit de l'écran sur de basses résolutions d'affichage. Cela peut parfois être acceptable, spécialement si le lecteur y a été préparé (notamment lorsque l'on sait par avance qu'un tableau, comme la Table des isotopes (complète), est volontairement très grand). Si vous devez, pour votre article, créer un tableau vraiment très grand, vous devrez alors considérer qu'il y aura lieu d'en créer un autre plus simple, plus petit, pour les utilisateurs qui ne pourront pas visualiser la version longue.
- Si vous insérez du texte à chasse fixe dans un tableau (en utilisant les balises HTML
code
,pre
outt
, par exemple), cela forcera la page à être plus large que nécessaire. Tant que cela est possible, évitez l'utilisation de tels textes dans vos tableaux, ainsi le texte sera adapté naturellement. Un problème identique survient lors de l'insertion d'images dans un tableau (car les images sont généralement contraintes à une taille fixe). - Des cellules contenant une grosse quantité d'informations peuvent causer des problèmes d'affichage dans certains navigateurs. En particulier, des cellules contenant un grand paragraphe risquent de brouiller l'affichage de navigateurs en mode console comme Lynx ou Links. De manière générale, tant que faire se peut, tentez de limiter la quantité de texte à l'intérieur d'un tableau.
synthèse / aide-mémoire
fonction | code | note |
---|---|---|
s t r u c t u re | ||
délimitation du tableau | {| tableau |} |
|
tableau paramétré | {| params tableau |} |
|
légende (caption) | |- légende | |
légende paramétrée | |- params | légende | à placer en début de ligne |
balise de nouvelle ligne | |- | à placer en début de ligne ; sans cellule |
nouvelle ligne paramétrée | |- params | |
cellule titre | !titre | style gras & centré par défaut |
cellule titre paramétrée | !params|titre | |
ligne titres (en-tête) | !titre1!!titre2!!titre3 | |
cellule | |cell | |
cellule paramétrée | |params|cell | |
ligne | !cell1||cell2||cell3 | |
f o r m a t | ||
largeur globale | width="n%" | fonction de la fenêtre du navigateur |
cadre & grille | border="n" | épaisseur seulement pour cadre |
cadre seulement | style="border:n solid couleur" | couleur hexa (cf + bas second tableau) |
écart entre cellules | cellspacing="n" | cadre de cellule si n>0 (cf ci-dessous) |
cadre seulement (alternative) | border="n" cellspacing="0" | demande écart nul entre cellules |
tampon intérieur cellule | cellpadding="n" | entre cadre & texte |
étendue de cellule H ou V | colspan="n" rowspan="n" | lire : cellule couvre n colonnes ou n lignes !!! |
flottement & positionnement gauche/droite du tableau | align="côté" | le texte extérieur au tableau passe sur le côté |
centrage du tableau | style="margin: 1em auto 1em auto" | c'est une astuce --- le texte extérieur ne passe pas sur les côtés |
titre du tableau (légende en haut) | +titre | titre collé-centré-gras |
en-têtes | !en-tête | pour colonne & ligne |
alignement vertical ligne ou cellule | valign="top" | pas pour tableau entier (?) |
s t y l e | ||
format global params de style | style = "param:val; param:val; ...;" | pour tableau, ligne, cellule attention : points-virgules collés !!! |
hauteur & largeur cellules | style="height:100px; width:100px;" | on peut aussi mesurer en %age |
alignement du texte | style="text-align:center" | |
code couleur | 6 chiffres hexa :#rrvvbb | ex : #789abc |
couleur de fond | style="background:couleur" | |
couleur de texte | style="color:couleur" | |
style texte | style="font-style:italic; font-size:150%;" | |
alignement texte (alternative) | align="left" | |
couleur de fond (alternative) | bgcolor="couleur" | |
couleur de texte (alternative) | <span style="color:couleur">texte</span> | codage (x)html |
Commentaire
Il est possible d'ajouter des commentaires dans la page, qui n'apparaîtront pas dans le rendu de la page, mais seulement en mode édition.
<!-- Note : Cette page est en cours de rédaction, veuillez patienter avant de l'éditer. -->
Catégories
Pas besoin de coder les catégories, il suffit de la/les sélectionner dans la liste déroulante.