Aide:Tableaux
Voir d'abord les pages d'aide de Wikimedia, Médiawiki et Wikipedia. Comme elles sont complexes, nous en récapitulons ici l'essentiel. Un conseil : quand vous trouvez quelque chose d'intéressant sur une page, notez-en immédiatement l'adresse ; sinon, vous avez toute chance de ne jamais la retrouver, tant l'arborescence des pages est touffue !
Outre ses usages classiques, la syntaxe tableau est utile pour :
- forcer une image à être en face d'une longue légende ou d'un commentaire. L'image est alors une cellule et le commentaire l'autre cellule de la même ligne.
- obtenir du texte en plusieurs colonnes.
Outre les tableaux de base, on peut aussi utiliser des tableaux préformatés, par exemple en ouvrant le tableau par : {| class="wikitable" Si l'on veut ajouter des paramètres, il faut alors le faire avec des CSS.
Sommaire
Syntaxe de base
- Un tableau s’ouvre avec le code : {|.
- Un tableau se ferme avec le code : |}.
- Une nouvelle ligne est créée dans un tableau avec le code : |-.
- Une nouvelle cellule est créée dans un tableau avec le code : | si le contenu des cellules est disposé verticalement) ; ou bien : || s'il est disposé horizontalement.
- Le titre ou légende (facultatif) du tableau est défini par : |+. Le titre s'écrit immédiatement après ces caractères, et il ne faut pas le faire suivre du code de nouvelle ligne. Le titre vient se placer au-dessus du tableau par défaut. Si on veut le voir en-dessous, il faut ajouter le paramètre align="bottom".
Paramètres ou attributs
- width="x%" ou width="100px" définit la largeur d'un tableau, d'une colonne ou d'une cellule. L'expression en % est préférable car elle s'adapte aux écrans. Pour un tableau, le pourcentage s'applique à la largeur disponible. Pour une colonne, il fait référence à la largeur du tableau ; on peut ainsi avoir une colonne à 30% et une deuxième à 70% dans un tableau à 50%.
Cette fonction est importante quand on souhaite que plusieurs tableaux consécutifs aient la même largeur.
- border="0" donne aucun bord
- border="1" donne un bord en trait double
- colspan="x" fusionne x cellules horizontalement sur x colonnes de la même ligne. On doit le placer dans la cellule la plus à gauche.
- rowspan="x" fusionne x cellules verticalement sur x lignes de la même colonne. On doit le placer dans la cellule en haut.
Avec ces deux paramètres, on ne met pas de cellules vides dans les cellules qui disparaissent par fusion.
Les paramètres align et valign peuvent s'appliquer à un tableau, une ligne ou une cellule. Il n'y a apparemment pas de fonction qui permette d'attribuer un format à une colonne.
- align="left" aligne le tableau ou le texte horizontalement à gauche.
- align="center" aligne le tableau ou le texte horizontalement au centre.
- align="right" aligne le tableau ou le texte horizontalement à droite. Quand cette option est utilisée, le texte situé en-dessous du tableau vient se mettre à sa gauche.
- valign="top" aligne verticalement le texte en haut.
- valign="middle" aligne verticalement le texte au milieu. C'est en fait la position par défaut.
- valign="bottom" aligne verticalement le texte en bas.
- cellspacing="n" modifie l'espacement (en pixels uniquement) entre les cellules, ou entre une cellule et le bord extérieur du tableau.
- cellpadding="n" modifie l'espacement (en pixels uniquement) entre le bord extérieur d'une cellule et son contenu.
- bgcolor="#hex" définit la couleur de fond. Cette syntaxe n'est plus conseillée ("deprecated").
- scope=col width="50%" applique à toute la colonne le format indiqué.
On peut combiner plusieurs paramètres en les séparant par une espace.
Style
Style utilise les paramètres des CSS (Cascading Style Sheets ou Feuilles de style en cascade). Les CSS sont une couche supplémentaire de l'HTML, mise en œuvre environ depuis 2009, et reconnues par Mediawiki. Si vous avez un système d'exploitation ou une version de navigateur antérieurs, ces paramètres risquent de ne pas être reconnus. Une liste se trouve sur le Site du zéro ; l'auteur dit lui-même que sa liste n'est pas exhaustive, puisqu'il existe plus de deux cents paramètres !
Les mesures de largeur peuvent s'exprimer en pixels : px ou en cadratins : em (C'est une unité utilisée dans les feuilles de style en cascade (CSS) qui est proportionnelle à la taille de la police présente dans le bloc correspondant à la déclaration du style. Wikipedia).
Le paramètre Style peut inclure lui-même plusieurs paramètres. Il permet de spécifier la mise en forme d'un tableau, d'une ligne ou d'une cellule de manière très fine. Sa syntaxe générale est :
style = "paramètre:valeur; paramètre:valeur; ...;" On remarquera que les points-virgules doivent être collés au paramètre précédent, et que le dernier paramètre est suivi par un point-virgule. Par ailleurs, il n'y a pas de guillemets en-dehors des guillemets qui encadrent tout le style.
Attention : les noms des paramètres internes à Style peuvent différer de ceux des paramètres "libres".
- style="width:100px;" largeur de 100 pixels. S'applique au tableau entier si on le met à la première ligne.
- style="width: 50%;" largeur de la moitié de la page
- style="height:100px;" hauteur de 100 pixels
- style="text-align:center;" texte aligné au centre (style="center;" semble donner le même résultat).
- style="background-color:code-couleur;" définit la couleur de fond
- style="color:code-couleur;" définit la couleur du texte
- style="font-style:italic;" met le texte en italique
- style="font-size:150%;" augmente la taille du texte à 150%
- style="vertical-align:top;" aligne le texte en haut de la cellule
- style="border:1px solid black;" donne un bord noir continu.
- style="border:1px dotted black;" donne un bord noir en pointillés.
- style="border:1px dashed black;" donne un bord noir en tirets.
- style="border:5px double black;" donne un bord noir double.
- style="border-right: solid 1px black;" place un bord noir continu uniquement à droite.
- style="border-left: solid 1px black;" place un bord noir continu uniquement à gauche.
- style="border-top:1px solid red;" place un bord rouge continu uniquement en haut.
- style="border-bottom:3px solid gray;" place un bord gris continu uniquement en bas.
- style="border-radius:1em;" donne des coins arrondis de rayon = 1 cadratin. Attention : leur affichage ne fonctionne pas sur certaines versions d'OS ou de navigateur.
- style="float: left; margin: 10px;" place le tableau à gauche et met un cadre vide large de 10 pixels.
- style="float: right;"
- style="float: center;" Attention : avec float, le texte suivant le tableau vient se mettre autour.
- style="margin-left: auto; margin-right: auto;" Avec margin-left et right, le tableau est centré horizontalement sur la page.
Exemples
| Résultat affiché | Codage wiki | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
|
{| style="border:6px double green; border-radius:0.5em;"
| Tableau réalisé || avec 2 commandes de styles
|-
| border:6px double green || crée un bord double vert de 6 pixels
|-
| border-radius:0.5em || crée l'arrondi
|-
| et ||align="center" | 1 cellule centrée
|}
| ||||||||||
|
{| style="border:3px solid #901040; border-radius:1em; padding:2em;"
| Tableau réalisé || avec '''3''' commandes de styles
|-
| border:3px solid #901040 || crée un bord continu violet de 3 pixels
|-
| border-radius:2em || crée l'arrondi
|-
| padding:1em || espace d'1 cadratin entre le bord et le contenu
|-
| et ||align="right" | 1 cellule alignée à droite
|}
| ||||||||||
|
{| style="float: left; margin: 10px; background-color:B2FFFF;border:6px double red; border-radius:0.5em;"
|+ '''Tableau'''
|----
| Cellule 1
| Cellule 2
|----
| Cellule 3
| Cellule 4
|}Le tableau est placé à gauche, le texte à droite, avec une marge de 10 pixels entre le tableau et le texte.
|
On peut tout combiner ainsi :
style="border-top:1px solid #FF0000; border-right:1px solid red; border-bottom:2px solid red; border-left:1px solid red;"
On peut choisir l'épaisseur du trait en faisant varier le nombre de pixels : 1px, 2px...
- style="border-spacing: 10px;" met un espacement de 10 pixels entre les cellules.
- style="padding: 10px;" met un espacement de 10 pixels entre le bord extérieur d'une cellule et son contenu.
- style="padding:0.5em;" met un espacement d'un demi-cadratin entre le bord extérieur d'une cellule et son contenu
- style="margin: npx;" modifie l'espacement entre le bord du tableau et le texte contenant le tableau (ce style n’a pas d’effet sur le contenu des cellules)
- style="margin: 1em auto 1em auto" permet d'avoir un tableau centré sans texte à côté (à vérifier).
| Résultat affiché | Codage wiki | ||||
|---|---|---|---|---|---|
Sans |
{| border="1" align="left" style="margin:0px;"
|Cellule 1
|Cellule 2
|-
|Cellule 3
|Cellule 4
|}
| ||||
Avec une |
{| border="1" align="left" style="margin-right:20px;"
|Cellule 1
|Cellule 2
|-
|Cellule 3
|Cellule 4
|}
| ||||
Comme tu le supposais |
{| border="1" align="left" style="margin: 1em auto 1em auto;"
|Cellule 1
|Cellule 2
|-
|Cellule 3
|Cellule 4
|}
|
Exemple de tableau sans cadre avec un trait vertical au milieu
(voir pages de Cazin, Trabut...)
| un deux |
quatre cinq |
{|
| style="padding:0.5em; width:120px; text-align:left; vertical-align:top; border-right: solid 1px black;" | un <br \>
deux <br \>
trois
| style="padding:0.5em; width:120px; text-align:left; vertical-align:top;" | quatre<br \>
cinq<br \>
six<br \>
|}
Trier un tableau
Les tableaux peuvent être triés en utilisant la classe "sortable".
| Résultat affiché | Codage wiki | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
|
{|class="sortable"
!Nom vernaculaire
!Nom scientifique
|-
|Lierre terrestre || ''Glechoma hederacea''
|-
|Lamier jaune || ''Lamium galeobdolon''
|-
|Thym à têtes|| ''Thymus capitatus''
|-
|Ivette musquée || ''Ajuga iva''
|}
|
Transformer un tableau Excel ou Word en tableau wiki
L'aide de Mediawiki indique le site Excel2wiki qui permettrait de transformer automatiquement un tableau Excel (et OpenOffice ?) en tableau Mediawiki.
Sous Mediawiki, on peut facilement insérer la structure d'un tableau en cliquant sur le bouton "tableau" à droite du bandeau d'outils. Mais il faut alors remplir toutes les cellules à la main, ce qui est fastidieux pour de longs tableaux.
En utilisant astucieusement la fonction recherche-remplacement de Word, on peut automatiser cette tâche. Voici la solution que j'ai trouvée (il y en a peut-être de meilleures) :
- copier un tableau Word et le coller en "collage spécial, texte non mis en forme". Les colonnes sont alors séparées par des tabulations, et les lignes par des retours de paragraphe.
- Faire une recherche-remplacement de toutes les tabulations par " || "
- Faire une recherche-remplacement de toutes les marques de paragraphe par "^p|- | ".
- Eliminer les scories en haut et en bas, et ajouter les caractères nécessaires ({| class="wikitable") en haut et (|}) en bas.
Si des colonnes doivent être formatées en italique, ou constituer des liens, il faut bien réfléchir à la manière d'ajouter les balises. On peut séparer les colonnes par copier-coller, formater colonne par colonne, et ensuite reconstituer un tableau sous Word en recollant les colonnes.
Note : Pour coller des caractères spéciaux dans la fenêtre remplacer de Word, il faut utiliser les touches cmd-V.
Feuilles de style en cascade (CSS)
Les Cascading Style Sheets est un language de page de style utilisé pour décrire l'apparence d'une page. Il permet le formatage souple d'une page et devrait être utilisé à la place des tableaux chaque fois que c'est possible, parce qu'il peut être manipulé par le lecteur ou annulé par un auteur si votre css est encapsulé dans une autre page via un modèle. (source : Help:Cascading style sheets).
L'adresse du CSS pour tout le wiki Pl@ntUse est MediaWiki:Common.css. Il a fallu le modifier pour créer le modèle d'infobox PROTA Starbox.
Exemples de tableaux utilisés sur Pl@ntUse
Cazin
|
blabla |
blabla |
Fouqué
S'applique aux longues citations, que l'on veut bien distinguer du reste du texte.
Mettre au début : {| class="wikitable" style="width:100%;"
| ORIGINE. Forêts du sud Brésil (Rio Grande do Sul), du Paraguay occidental, de l'Uruguay et du nord-est de l'Argentine.
DESCRIPTION. Arbuste ou petit arbre buissonnant de 3 à 6 m de haut, au moins aussi large que haut, à jeunes rameaux, dessous des feuilles, calices et corolles tomenteux gris-argenté. Feuilles opposées, simples, entières, courtement pétiolées (environ 4 mm), elliptiques ou ovales-oblongues, de 3 à 7 cm de long et de 1,5 à 4 cm de large (L/1 = 1,7 à 2), chartacées, vertes claires, brillantes dessus, tomenteuses gris argenté dessous, nervure médiane plane dessus, saillante dessous. PRODUCTION. La plante, issue de graine, demande de 3 à 5 ans pour entrer en rapport. L'écart entre la floraison et la récolte est de 5 mois. (Fouqué, 1972) |
Alternative
{{Citation encadré |texte=blabla |auteur =Untel }}
donne :
blabla
