Aide:Tables

De Magazine fedora-fr
Aller à : navigation, rechercher
Fichier:Note tip.png Utilisation des Tables
N'utilisez les tables que si vous en avez absolument besoin. Elles compliquent l'édition et alourdissent les pages.

Résumé des balises

{| début de table
|+ légende, optionnel, une seule par table entre le début de la table et la première ligne.
|- ligne, optionnel pour la première ligne le moteur de wiki s'en chargera pour vous.
! en tête de table, cellule optionnelle. Les en têtes consécutifs peuvent être ajoutés sur la même ligne en les séparant par un double point d'exclamation (!!), ou chacun sur une nouvelle ligne débutant par un simple point d'exclamation (!).
| données, cellule requise ! Les cellules consécutives peuvent être ajoutées sur la même ligne séparées par un double pipe (||), ou chacune sur une nouvelle ligne débutant par un simple pipe (||).
|} fin de la table.
  • Les balises ci-dessus doivent débuter une nouvelle ligne, excepté les doubles pipes (||) et points d'exclamation (!!) pour l'ajout de cellules consécutives sur une même ligne.
  • Attributs XHTML. Chaque balise, sauf la fin de table, accepte optionnelement un ou plusieurs attributs XHTML. Les attributs doivent être sur la même ligne que la balise. Séparez les attributs les uns des autres par un simple espace.
    • Les cellules et légende (| ou ||, ! ou !! et |+) possèdent un contenu. Il faut donc séparer les attributs du contenu par un simple pipe (|). Le contenu des cellules peut suivre sur la même ligne ou sur les lignes suivantes.
    • Les balises de table et de ligne ({| et |-) ne contiennent pas directement de contenu. N'ajoutez pas de pipe (|) après les attributs. Si vous ajoutez par mégarde un pipe après les attributs pour la balise de table ou de ligne, le parseur le supprimera ainsi que l'attribut final s'il était rattaché au pipe erroné !
  • Le contenu peut (a) suivre la marque de cellule sur la même ligne après les attributs XHTML optionnels ou (b) se trouver sur les lignes qui suivent la marque de cellule. Le contenu qui utilise des balises wiki qui doivent elles mêmes débuter sur une nouvelle ligne, comme les listes, les en têtes, ou les tables imbriquées doivent bien entendu être sur leur propre nouvelle ligne.

Table simple

Ordinaire

La table suivante manque de bordures et d'un espacement correct mais montre la structure de table wiki la plus simpliste.

Orange Pomme
Pain Tarte
Beurre Crème glacée
{|
|Orange
|Pomme
|-
|Pain
|Tarte
|-
|Beurre
|Crème glacée
|}

Alternative

Pour que le balisage wiki ressemble plus à une table, les cellules peuvent être listées sur une seule ligne séparées par un double pipe (||). Cela ne convient pas aux cellules au long contenu comme les paragraphes. C'est utile pour des contenus courts par contre, comme notre table d'exemple.

Des espaces additionnels peuvent être ajoutés dans le balisage wiki, comme dans l'exemple ci-dessous, afin de rendre le balisage wiki plus clair mais sans affecter le rendu de la table.

Des attributs HTML peuvent être ajoutés en suivant les autres exemples de cette page mais sont omis de cet exemple pour la clarifier.

Orange Pomme plus
Pain Tarte plus
Beurre Crème glacée et plus
{|
|  Orange    ||   Pomme   ||   plus
|-
|   Pain    ||   Tarte     ||   plus
|-
|   Beurre   || Crème glacée ||  et plus
|}

Avec attributs HTML

Il est possible d'ajouter des attributs HTML pour améliorer le rendu de la table.

border="1"

Orange Pomme
Pain Tarte
Beurre Crème glacée
{| border="1"
|Orange
|Pomme
|-
|Pain
|Tarte
|-
|Beurre
|Crème glacée
|}

align="center" border="1"

Orange Pomme
Pain Tarte
Beurre Crème glacée
{| align="center" border="1"
|Orange
|Pomme
|-
|Pain
|Tarte
|-
|Beurre
|Crème glacée
|}

align="right" border="1"

Vous pouvez ajouter des attributs à des cellules individuelles. Beaucoup d'exemples peuvent meix ressortir alignés à droite :

Orange Pomme 12 333,00
Pain Tarte 500,00
Beurre Crème glacée 1,00
{| border="1"
|Orange
|Pomme
|align="right"|12 333,00
|-
|Pain
|Tarte
|align="right"|500,00
|-
|Beurre
|Crème glacée
|align="right"|1,00
|}

Vous pouvez ajouter des attributs sur des lignes individuelles également.

Orange Pomme 12 333,00
Pain Tarte 500,00
Beurre Crème glacée 1,00
{| border="1"
|Orange
|Pomme
|align="right"|12 333,00
|-
|Pain
|Tarte
|align="right"|500,00
|- style="font-style:italic;color:green;"
|Beurre
|Crème glacée
|align="right"|1,00
|}

cellspacing="0" border="1"

Orange Pomme
Pain Tarte
Beurre Crème glacée
{| cellspacing="0" border="1"
|Orange
|Pomme
|-
|Pain
|Tarte
|-
|Beurre
|Crème glacée
|}

cellpadding="20" cellspacing="0" border="1"

Orange Pomme
Pain Tarte
Beurre Crème glacée
{| cellpadding="20" cellspacing="0" border="1"
|Orange
|Pomme
|-
|Pain
|Tarte
|-
|Beurre
|Crème glacée
|}

Avec attributs HTML et styles CSS

Des styles CSS peuvent être ajoutés avec ou sans autres attributs HTML.

style="color:green;background-color:#ffffcc;" cellpadding="20" cellspacing="0" border="1"

Orange Pomme
Pain Tarte
Beurre Crème glacée
{| style="color:green;background-color:#ffffcc;" cellpadding="20" cellspacing="0" border="1"
|Orange
|Pomme
|-
|Pain
|Tarte
|-
|Beurre
|Crème glacée
|}

Table avec en-têtes TH

Des éléments TH (en-têtes de tables HTML) peuvent être créés en utilisant ! au lieu de |. Les en-têtes sont généralement par défaut en gras et centrés.

En-têtes en haut

Chaque colonne

Yummy Yummier
Orange Apple
Bread Pie
Butter Ice cream
{| border="1" cellpadding="20" cellspacing="0"
!Yummy
!Yummier
|-
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream 
|}

Colspan="2"

Yummies
Orange Apple
Bread Pie
Butter Ice cream
{| border="1" cellpadding="20" cellspacing="0"
! colspan="2"|Yummies
|-
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream 
|}

En-têtes de côté

Défaut

Fruit Orange Apple
Dish Bread Pie
Complement Butter Ice cream
{| border="1" cellpadding="20" cellspacing="0"
!Fruit
|Orange
|Apple
|-
!Dish
|Bread
|Pie
|-
!Complement
|Butter
|Ice cream 
|}

Justifié à droite

Des en-têtes de côté justifiés à droite peuvent être créés comme suit :

Fruit Orange Apple
Dish Bread Pie
Complement Butter Ice cream
{| border="1" cellpadding="20" cellspacing="0"
!align="right" |Fruit
|Orange
|Apple
|-
!align="right" |Dish
|Bread
|Pie
|-
!align="right" |Complement
|Butter
|Ice cream 
|}

Légende

Une légende de table' peut être ajoutée sur n'importe quelle table comme suit :

Food complements
Orange Apple
Bread Pie
Butter Ice cream
{| border="1" cellpadding="20" cellspacing="0"
|+Food complements
|-
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream 
|}

Des attributs peuvent être ajoutés à la légende comme suit :

Food complements
Orange Apple
Bread Pie
Butter Ice cream
{| border="1" cellpadding="20" cellspacing="0"
|+align="bottom" style="color:#e76700;"|''Food complements''
|-
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream 
|}

Tables avec en-têtes H1, H2, H3 etc...

Des en têtes HTML (h1, h2, h4, ...) peuvent être créés avec le balisage wiki standard avec les signe ==égauux== et doivent être sur leur propre ligne pour fonctionner.

Prévisualisez la table complète. Si vous cliquez sur le lien d'édition pour un titre à l'intérieur d'une table, et effectuez une prévisualisation, la table parente apparaîtra erronée puisque des parties y seront manquantes.

COnservez la hiérarchie des ttres avec le reste de la page, afin que le sommaire en haut de page fonctionne correctement.

Yummiest

Orange Apple
Bread Pie
Butter Ice cream
{| border="1" cellpadding="20" cellspacing="0"
|colspan="2"|
===Yummiest===
|-
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream 
|}