Les tableaux sur CCM – Astuces

0 9

Dernière mise à jour le par noctambule28
.

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

La syntaxe

Pour créer un tableau

Pour mettre les textes en couleur :

Pour la syntaxe des cellules :

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 {|

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 :

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 :

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

Cet article est apparu en premier sur https://www.commentcamarche.net/faq/38042-les-tableaux-sur-ccm

Laisser un commentaire

Votre adresse email ne sera pas publiée.