Objet: tableau

Un article de ReseauGerontologiqueAutunois.

Jump to: navigation, search

< retour Syntaxe

modifier Syntaxe

Créer ou corriger un article | Objets: lettres et mots | Objet: paragraphe | Objet: tableau | Objet: images | Objet: pages | Syntaxe | BacAsable | Index | Mise en forme des zones | ParserFunctions | liste alphabétique des images | liste alphabétique des modèles | liste alphabétique des catégories


Syntaxe des paramètres des tableaux Nom du Paramètre= "Valeur"
Pour la syntaxe des textes à l'interieur des cellules: voir Objets: lettres et mots

Sommaire

[modifier]

forme

[modifier]

Balises {| et |}

Indispensable pour créer un tableau
Il existe deux balises pour la même instruction, une balise ouvrante {| (debut du tableau) et une balise fermante |} (fin du tableau)

{| Paramètres

|}

[modifier]

Balises |

Cette balise détermine le nombre de cellules sur une même ligne lorsqu'elle est placé en début de ligne
Elle est indispensable pour séparer la zone Paramètres de la zone Texte.

{|Paramètres

|Paramètres|Citron
|Paramètres|Clef
|Paramètres|Ballon
|}

Citron Clef Ballon
Autre écriture possible
{| Paramètres

|Paramètres|Citron||Paramètres|Clef||Paramètres|Ballon
|}

CitronClefBallon
[modifier]

Balises |-

Cette balise permet de créer une nouvelle ligne de cellules

{|Paramètres

|Paramètres|Citron 01
|Paramètres|Citron 02
|-Paramètres
|Paramètres|Clef 01
|Paramètres|Clef 02
|-Paramètres
|Paramètres|Ballon 01
|Paramètres|Ballon 02
|}

Citron 01Citron 02
Clef 01Clef 02
Ballon 01Ballon 02
[modifier]

Balises !

Cette balise détermine les titres des colonnes et/ou des lignes

{|Paramètres

!Paramètres|MMS
|Paramètres|Citron
|Paramètres|Clef
|Paramètres|Ballon
|}

MMS Citron Clef Ballon
Autre écriture possible
{| Paramètres

!Paramètres|MMS
|Paramètres|Citron||Paramètres|Clef||Paramètres|Ballon
|}

MMS CitronClefBallon
[modifier]

Exemple de ligne et colonne avec titre

{|Paramètres

!
!Paramètres|MMS 01
!Paramètres|MMS 02
|-Paramètres
!Paramètres|Mot 01
|Paramètres|Citron 01
|Paramètres|Citron 02
|-Paramètres
!Paramètres|Mot 02
|Paramètres|Clef 01
|Paramètres|Clef 02
|-Paramètres
!Paramètres|Mot 03
|Paramètres|Ballon 01
|Paramètres|Ballon 02
|}

MMS 01 MMS 02
Mot 01 Citron 01Citron 02
Mot 02 Clef 01Clef 02
Mot 03 Ballon 01Ballon 02
Autre écriture possible
{| Paramètres

!
!Paramètres|MMS 01!!Paramètres|MMS 02
|-Paramètres
!Paramètres|Mot 01
|Paramètres|Citron 01||Paramètres|Citron 02
|-Paramètres
!Paramètres|Mot 02
|Paramètres|Clef 01||Paramètres|Clef 02
|-Paramètres
!Paramètres|Mot 03
|Paramètres|Ballon 01||Paramètres|Ballon 02
MMS 01 MMS 02
Mot 01 Citron 01Citron 02
Mot 02 Clef 01Clef 02
Mot 03 Ballon 01Ballon 02
[modifier]

Balises |+

Cette balise écrit une légende au tableau

{|Paramètres

|+Paramètres|Folstein
!Paramètres|MMS
|Paramètres|Citron
|Paramètres|Clef
|Paramètres|Ballon
|}

Folstein
MMS Citron Clef Ballon
Autre écriture possible
{| Paramètres

|+Paramètres|Folstein
!Paramètres|MMS
|Paramètres|Citron||Paramètres|Clef||Paramètres|Ballon
|}

Folstein
MMS CitronClefBallon
[modifier]

Paramètres rowspan et colspan

Ces deux paramètres permettent de fusionner des cellules. Ils s'utilisent de la façon suivante :
x = Nombre de cellules concomittantes à fusionner
Pour fusionner des lignes
colspan="x"
Pour fusionner des colonnes
rowspan="x"

Exemples

{| border="1"
| Citron
| Clef
|-
| colspan="2" | Ballon
|}

Citron Clef
Ballon

{| border="1"
| Citron
| rowspan="2" | Ballon
|-
| Clef
|}

Citron Ballon
Clef
[modifier]

Paramètre cellspacing

Espacement entre les cellules
cellspacing="x"

Espacement entre les cellules

{| border="1" cellspacing="2"
|Citron
|Clef
|Ballon
|}

Citron Clef Ballon

{| border="1" cellspacing="20"
|Citron
|Clef
|Ballon
|}

Citron Clef Ballon
[modifier]

taille

[modifier]

Paramètres width et height

Largeur du tableau ou d’une cellule
Width="x" taille fixe : x en pixels taille proportionnelle : x en pourcentage
Hauteur du tableau ou d’une cellule
height="x" taille fixe : x en pixels

{| border="1" width="400"
|width="80"|Citron
|width="200"|Clef
|width="120"|Ballon
|}

Citron Clef Ballon

{| border="1" width="80%"
|width="20%"|Citron
|width="50%"|Clef
|width="30%"|Ballon
|}

Citron Clef Ballon

{| border="1" width="400"
|width="20%"|Citron
|width="50%"|Clef
|width="30%"|Ballon
|}

Citron Clef Ballon

{| border="1" height="100"
|height="20"|Citron
|-
|height="50"|Clef
|-
|height="30"|Ballon
|}

Citron
Clef
Ballon
[modifier]

Bordures externes et lignes

[modifier]

Paramètre border

Ce paramètre permet de spécifier la taille de la bordure du tableau.
border="x"
Si x = 0 il n’y aura pas de bordure

Exemples

{| border="1"
| Citron
|}

Citron

{| border="5"
| Clef
|}

Clef

{| border="10"
| Ballon
|}

Ballon

Voir aussi Autre syntaxe pour les bordures

[modifier]

Paramètre rules

Ce paramètre permet de n'afficher qu'une partie des lignes intérieures du tableau.
rules="x"

rules="all"
Toutes les lignes intérieures du tableau

{| border="1" rules="all"
| Citron||Clef||Ballon
|-
| Citron||Clef||Ballon
|-
| Citron||Clef||Ballon
|}
CitronClefBallon
CitronClefBallon
CitronClefBallon
rules="cols"
Seulement les lignes intérieures verticales

{| border="1" rules="cols"
| Citron||Clef||Ballon
|-
| Citron||Clef||Ballon
|-
| Citron||Clef||Ballon
|}
CitronClefBallon
CitronClefBallon
CitronClefBallon
rules="none"
Aucune lignes intérieures du tableau

{| border="1" rules="none"
| Citron||Clef||Ballon
|-
| Citron||Clef||Ballon
|-
| Citron||Clef||Ballon
|}
CitronClefBallon
CitronClefBallon
CitronClefBallon
rules="rows"
Seulement les lignes intérieures horizontales

{| border="1" rules="rows"
| Citron||Clef||Ballon
|-
| Citron||Clef||Ballon
|-
| Citron||Clef||Ballon
|}
CitronClefBallon
CitronClefBallon
CitronClefBallon
[modifier]

Paramètre frame

Ce paramètre permet de n'afficher qu'une partie des lignes extérieures du tableau.
frame="x"

frame="above"
Seulement la ligne supérieure du tableau

{| border="3" rules="none" frame="above"
| Citron||Clef||Ballon
|-
| Citron||Clef||Ballon
|-
| Citron||Clef||Ballon
|}
CitronClefBallon
CitronClefBallon
CitronClefBallon
frame="below"
Seulement la ligne inférieure du tableau

{| border="3" rules="none" frame="below"
| Citron||Clef||Ballon
|-
| Citron||Clef||Ballon
|-
| Citron||Clef||Ballon
|}
CitronClefBallon
CitronClefBallon
CitronClefBallon
frame="border"
Les quatres côtés du tableau sont visibles

{| border="3" rules="none" frame="border"
| Citron||Clef||Ballon
|-
| Citron||Clef||Ballon
|-
| Citron||Clef||Ballon
|}
CitronClefBallon
CitronClefBallon
CitronClefBallon
frame="box"
Les quatres côtés du tableau sont visibles

{| border="3" rules="none" frame="box"
| Citron||Clef||Ballon
|-
| Citron||Clef||Ballon
|-
| Citron||Clef||Ballon
|}
CitronClefBallon
CitronClefBallon
CitronClefBallon
frame="insides"
Les quatres côtés du tableau sont visibles

{| border="3" rules="none" frame="insides"
| Citron||Clef||Ballon
|-
| Citron||Clef||Ballon
|-
| Citron||Clef||Ballon
|}
CitronClefBallon
CitronClefBallon
CitronClefBallon
frame="hsides"
Seulement la ligne supérieure et inférieure du tableau

{| border="3" rules="none" frame="hsides"
| Citron||Clef||Ballon
|-
| Citron||Clef||Ballon
|-
| Citron||Clef||Ballon
|}
CitronClefBallon
CitronClefBallon
CitronClefBallon
frame="lhs"
Seulement la ligne gauche du tableau

{| border="3" rules="none" frame="lhs"
| Citron||Clef||Ballon
|-
| Citron||Clef||Ballon
|-
| Citron||Clef||Ballon
|}
CitronClefBallon
CitronClefBallon
CitronClefBallon
frame="rhs"
Seulement la ligne droite du tableau

{| border="3" rules="none" frame="rhs"
| Citron||Clef||Ballon
|-
| Citron||Clef||Ballon
|-
| Citron||Clef||Ballon
|}
CitronClefBallon
CitronClefBallon
CitronClefBallon
frame="void"
Aucune lignes extérieures du tableau

{| border="3" rules="all" frame="void"
| Citron||Clef||Ballon
|-
| Citron||Clef||Ballon
|-
| Citron||Clef||Ballon
|}
CitronClefBallon
CitronClefBallon
CitronClefBallon
frame="vsides"
Seulement la ligne droite et gauche du tableau

{| border="3" rules="none" frame="vsides"
| Citron||Clef||Ballon
|-
| Citron||Clef||Ballon
|-
| Citron||Clef||Ballon
|}
CitronClefBallon
CitronClefBallon
CitronClefBallon
[modifier]

couleur

"x" est de la forme
Code héxadécimal  #zzzzzz
Code Décimal        rgb(a,b,c)
nom HTML             Voir Tableaux de correspondance
[modifier]

Paramètre bgcolor

Couleur de fond d'une cellule.
bgcolor="x"

{| border="0" width="100%"
| width="33%" height="40" align="center" bgcolor="#0000FF"|<font color="#ffff00">Citron</font>
| width="34%" align="center" bgcolor="#FFFFFF"|Clef
| width="33%" align="center" bgcolor="#FF0000"|<font color="#00ff00">Ballon</font>
|}

Citron Clef Ballon
[modifier]

Style background-color

Couleur de fond du tableau.
style="background-color:x"

{| border="0" width="100%" style="background-color:#CCFFCC"
| width="33%" height="40" align="center" |Citron
| width="34%" align="center" |Clef
| width="33%" align="center" |Ballon
|}

Citron Clef Ballon

Voir Tableau des codes couleurs

[modifier]

Style border-color

Couleur des bordures du tableau.
style="border-color:x"

{| border="1" width="100%" style="border-color:red;"
| width="33%" height="40" align="center" style="border-color:blue;"|Citron
| width="34%" align="center" style="border-top-color:#CCFFCC;"|Clef
| width="33%" align="center" style="border-color:yellow;"|Ballon
|}

Citron Clef Ballon

Voir Tableau des codes couleurs

[modifier]

rapport avec les autres objets

[modifier]

Paramètres align et valign

Ces deux paramètres permettent de positionner le contenu d’une cellule dans celle-ci
Alignement horizontal
align="x" x = left, center, right
Alignement vertical
valign="x" x = top, center, bottom

{| border="1"
| align="left"|Citr
| align="center"|Clef
| align="right"|Ball
|}

Citr Clef Ball

{| border="1"
| valign="top"|Citr
|-
| valign="center"|Clef
|-
| valign="bottom"|Ball
|}

Citr
Clef
Ball
[modifier]

Paramètres cellpadding

Espacement entre le bord d'une cellule et son contenu
cellpadding="x"

Espacement entre le bord d'une cellule et son contenu

{| border="1" cellpadding="6"
|Citron
|Clef
|Ballon
|}

Citron Clef Ballon

{| border="1" cellpadding="26"
|Citron
|Clef
|Ballon
|}

Citron Clef Ballon
[modifier]

position

[modifier]

Paramètre align

Le paramètre align positionne le tableau horizontalement
align="x" x = left, center, right

{| border="1" align="left"

|Citron
|}

{| border="1" align="Center"

|Clef
|}

{| border="1" align="right"

|Ballon
|}

Citron
Clef
Ballon
[modifier]

Exemple récapitulatif

Tableau récapitulatif
{| Border="1" width="80%" align="center" cellpadding="5"
  |+ Tableau      
|- ! height="50" width="10%"|  ! width="30%" bgcolor="#cococo" |Colonne 1 ! width="30%" bgcolor="#cococo" |Colonne 2 ! width="30%" bgcolor="#cococo" |Colonne 3
|- ! height="50" bgcolor="#cococo" |Ligne 1 | Contenu 1 | Contenu 2 | rowspan="2" |Contenu 5
|- ! height="50" bgcolor="#cococo" |Ligne 2 | Contenu 3 | Contenu 4
|- ! height="50" bgcolor="#cococo" |Ligne 3 | align="center" colspan="3" |Contenu 6
|}
{| Border="1" width="80%" align="center" cellpadding="5"

|+ Tableau
|-
! height="50" width="10%"| 
! width="30%" bgcolor="#cococo" |Colonne 1
! width="30%" bgcolor="#cococo" |Colonne 2
! width="30%" bgcolor="#cococo" |Colonne 3
|-
! height="50" bgcolor="#cococo" |Ligne 1
| Contenu 1
| Contenu 2
| rowspan="2" |Contenu 5
|-
! height="50" bgcolor="#cococo" |Ligne 2
| Contenu 3
| Contenu 4
|-
! height="50" bgcolor="#cococo" |Ligne 3
| align="center" colspan="3" |Contenu 6
|}

{| Border="1" width="80%" align="center" cellpadding="5"

|+ Tableau
|-
! height="50" width="10%"| 
! width="30%" bgcolor="#cococo" |Colonne 1!! width="30%" bgcolor="#cococo" |Colonne 2 !! width="30%" bgcolor="#cococo" |Colonne 3
|-
! height="50" bgcolor="#cococo" |Ligne 1
| Contenu 1|| Contenu 2|| rowspan="2" |Contenu 5
|-
! height="50" bgcolor="#cococo" |Ligne 2
| Contenu 3|| Contenu 4
|-
! height="50" bgcolor="#cococo" |Ligne 3
| align="center" colspan="3" |Contenu 6
|}

Tableau
  Colonne 1 Colonne 2 Colonne 3
Ligne 1 Contenu 1 Contenu 2 Contenu 5
Ligne 2 Contenu 3 Contenu 4
Ligne 3 Contenu 6
Récupérée de « http://www.reseau-geronto-autun.org/wiki/index.php/Objet:_tableau »