Les tableaux sur CCM

- La syntaxe
- Exemple simple
- La syntaxe pour les cadres
- La syntaxe pour les alignements :
- Exemples
- Un site web pour vous aider
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 |
Ce document intitulé « Les tableaux sur CCM » issu de Comment Ça Marche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.