Les tableaux sur CCM

Voilà comment réaliser un tableau dans la faq et les dossiers de CCM :

La syntaxe

Pour créer un tableau

• {| ouvre le tableau,
• |+ permet de donner un titre au tableau
• | défini une cellule,
• |- défini une nouvelle ligne
• |} ferme le tableau,

Pour mettre les textes en couleur :

• {{red|texte_du_titre_en_rouge}}

Pour la syntaxe des cellules :

• ! mets du gras sur le texte de la cellule
• align="right"en définition de tableau (à coté de {|), , aligne le tableau à droite de la page (tout le tableau)
• align="right"| colonne 2 , aligne à droite le texte de la cellule
• valign="top" | Haut, place le texte en haut de la cellule
• width="440" force la largeur du tableau (en définition de tableau - à coté de {| )
• width="200"| colonne 3, force la largeur d'une colonne
• height="200", définit la hauteur de la cellule,
• rowspan="2"|texte de la cellule : faire une cellule sur plusieurs lignes
• colspan="2"| fusionne sur plusieurs colonne(2 dans l'exemple)
• bgcolor="#FF0000" met un fond coloré.

Disposition des attributs

Les différents attributs se placent cote à cote sans espace :
gras, en haut, à droite sur fond rouge s'écrit:

|!align="right"valign="top"bgcolor="#FF0000"

Puis vient le texte de la cellule :

|!align="right"valign="top"bgcolor="#FF0000"|texte_cellule

Pour avoir en plus le texte en couleur :

|!align="right"valign="top"bgcolor="#FF0000"|{{green|texte_cellule}}

Exemple simple

Syntaxe :

{| 
|ligne1, colonne 1
|ligne 1, colonne 2
|- 
|ligne 2, colonne 1
|ligne 2, colonne 2
|}

Résultat :

La syntaxe pour les cadres

A positionner à coté de {|

• border="3"
• style="border: 2px dotted black;"
• style="border: 2px dashed black;"
• style="border: 2px solid black;"
• style="border: 5px double black;"

Exemple

Syntaxe :

{|style="border: 2px dashed black;"width="320"
|!Titre 1
|!Titre 2 
|-
|align="right" |ligne1, colonne 1
|ligne 1, colonne 2
|- 
|ligne 2, colonne 1
|ligne 2, colonne 2
|}

Résultat :

La syntaxe pour les alignements :

Align

Syntaxe :

{| 
| Positionnement
|-
| align="left" | g
|-
| align="center" | c
|-
| align="right" | d
|}

Résultat :

Valign

Syntaxe :
height définit la hauteur de la cellule

{| 
| height="150" | Position
| valign="top" | Haut
| valign="middle" | Milieu
| valign="bottom" | Bas
|}

Résultat :

Exemples

Syntaxe :

{|border="3"
|-
|!{{blue|Titre en Bleu}}
|!{{red|Titre en rouge}}
|!{{green|Titre en vert}}
|-
| ligne 1 colonne 1
| colonne 2
| colonne 3
|- 
|ligne 2
| c 2
| c 3
|}

Résultat :

Un exemple de ce qu'il est possible de faire

Syntaxe :

{| style="border: 5px double black;" 
|+ {{red| Titre de tableau}} 
|-
|!bgcolor="#00FF00"align="center"|{{blue| Titre en Bleu}}
|align="right"|{{red|Titre en rouge}}
|!{{green|Titre en vert}}
|{{orange|titre sans gras}}
|{{Purple| Titre colonne 5}}
|-
|! ligne 1 colonne 1
| bgcolor="#FF0000"|{{black|colonne 2 très très large}}
|  colonne 3
| width="100"align="right"valign="top"rowspan="2"bgcolor="#00FF00" |{{white|colonne 4}}
| align="right"bgcolor="#FF0000" |colonne 5
|- 
|{{red|ligne 2}}
| align="right"|c 2
|c3
|c5 car rowspan=2 c 4
|}

Résultat :

Un site web pour vous aider

Un site web permet de générer des tables notamment pour le Wiki :

http://www.tablesgenerator.com/mediawiki_tables

Il y a quelques différences entre Wikimedia et CCM, et il faut donc faire quelques modifications dans le code Wiki généré : ci dessous en rouge les éléments à ajouter pour que ça marche dans CCM à partir du code généré par le site.
(ça concerne le header)

{| class="wikitable"
|! style="font-weight: bold;" | Tables
|! style="text-align: center;" | Are
|! style="text-align: right;" | Cool
|-
| col 1 is
| style="text-align: center;" | left-aligned
| style="text-align: right;" | $1600
|-
| col 2 is
| style="text-align: center;" | centered
| style="text-align: right;" | $12
|-
| col 3 is
| colspan="2" style="text-align: center;" | right-aligned
|}

Donne sur CCM :