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 :
ligne1, colonne 1 | ligne 1, colonne 2 |
ligne 2, colonne 1 | ligne 2, colonne 2 |
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 :
Titre 1 | Titre 2 |
---|---|
ligne1, colonne 1 | ligne 1, colonne 2 |
ligne 2, colonne 1 | ligne 2, colonne 2 |
La syntaxe pour les alignements :
Align
Syntaxe :
{|
| Positionnement
|-
| align="left" | g
|-
| align="center" | c
|-
| align="right" | d
|}
Résultat :
Positionnement |
g |
c |
d |
Valign
Syntaxe :
height définit la hauteur de la cellule
{|
| height="150" | Position
| valign="top" | Haut
| valign="middle" | Milieu
| valign="bottom" | Bas
|}
Résultat :
Position | Haut | Milieu | Bas |
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 :
Titre en Bleu gras | Titre en rouge gras | Titre en vert gras |
---|---|---|
ligne 1 colonne 1 | colonne 2 | colonne 3 |
l 2 | c 2 | c 3 |
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 :
Titre en Bleu | Titre en rouge | Titre en vert | titre sans gras | Titre colonne 5 |
---|---|---|---|---|
ligne 1 colonne 1 | colonne 2 très très large | colonne 3 | colonne 4 | colonne 5 |
ligne 2 | c 2 | c3 | c5 car rowspan=2 c 4 |
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 :
Tables | Are | Cool |
---|---|---|
col 1 is | left-aligned | $1600 |
col 2 is | centered | $12 |
col 3 is | right-aligned |