Les tableaux sur CCM

Décembre 2016

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 1ligne 1, colonne 2
ligne 2, colonne 1ligne 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 1Titre 2
ligne1, colonne 1ligne 1, colonne 2
ligne 2, colonne 1ligne 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 grasTitre en rouge grasTitre en vert gras
ligne 1 colonne 1colonne 2colonne 3
l 2c 2c 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 de tableau
Titre en Bleu Titre en rougeTitre en verttitre 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 2c3c5 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

A voir également :

Ce document intitulé «  Les tableaux sur CCM  » issu de CommentCaMarche (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.