Utilisateur:Raymond SÉNÈQUE/Article en cours : Différence entre versions

De WikiGenWeb
Aller à : navigation, rechercher
m (→‎Alignement du tableau)
m
Ligne 1 : Ligne 1 :
−
==Flottement du tableau==
+
Cette page ne propose que des exemples prêts à l'emploi pour des tableaux simples et génériques à l'attention des débutants
−
Le tableau pourra être cadré horizontalement à gauche ou à droite. Pour cela on ajoutera la clause de style « Float » pour le positionner sur la droite. Par défaut, la classe wikitable indique un flottement à gauche, ce que veut dire que l'on ne gèrera que les flottements à droite.
+
.
 +
'''Il vous suffit de les copier puis de les adapter à vos besoins''' en les complétant et en ajoutant ou supprimant des lignes ou des colonnes selon vos désirs.
  
−
Le texte saisi derrière un tableau viendra se positionner à gauche du tableau si on indique « right » et à droite du tableau si on indique « left » ou si la clause est absente.
+
Reportez-vous à [[Aide:Tableau pour initiés|Tableau pour initiés]] (niveau de difficulté intermédiaire) et [[Aide:Tableau pour expert|Tableau pour expert]] pour les explications détaillées de la syntaxe des tableaux.
  
−
Si le texte saisi doit commencer après le tableau, le modèle <nowiki>{{Clear}}</nowiki> sera utilisé avant le texte.
+
== Tableau à double entrée ==
 +
{| class="wikitable" style="text-align:center; width:80%;"
 +
|+ Titre du tableau
 +
|-
 +
|
 +
! scope=col | Titre col. A
 +
! scope=col | Titre col. B
 +
! scope=col | Titre col. C
 +
! scope=col | Titre col. D
 +
|-
 +
! scope=row | Titre ligne 1
 +
|donnée L1-A
 +
|donnée L1-B
 +
|donnée L1-C
 +
|donnée L1-D
 +
|-
 +
! scope=row | Titre ligne 2
 +
|donnée L2-A
 +
|donnée L2-B
 +
|donnée L2-C
 +
|donnée L2-D
 +
|-
 +
! scope=row |Titre ligne 3
 +
|donnée L3-A
 +
|donnée L3-B
 +
|donnée L3-C
 +
|donnée L3-D
 +
|-
 +
! scope=row | Titre ligne 4
 +
|donnée L4-A
 +
|donnée L4-B
 +
|donnée L4-C
 +
|donnée L4-D
 +
|}
 +
Code à copier :
 
<pre>
 
<pre>
−
{| class="wikitable sortable" style="float:right;"
+
{| class="wikitable" style="text-align:center; width:80%;"
−
</pre>
 
−
 
 
−
{| class="wikitable sortable" style="float:right;"
 
 
|+ Titre du tableau
 
|+ Titre du tableau
−
|-      
+
|-
−
! class="unsortable" |
+
|
 
! scope=col | Titre col. A
 
! scope=col | Titre col. A
 
! scope=col | Titre col. B
 
! scope=col | Titre col. B
 
! scope=col | Titre col. C
 
! scope=col | Titre col. C
−
! scope=col class="unsortable" | Titre col. D
+
! scope=col | Titre col. D
 
|-
 
|-
 
! scope=row | Titre ligne 1
 
! scope=row | Titre ligne 1
Ligne 35 : Ligne 67 :
 
|donnée L3-C
 
|donnée L3-C
 
|donnée L3-D
 
|donnée L3-D
−
|- class="sortbottom"
+
|-
 
! scope=row | Titre ligne 4
 
! scope=row | Titre ligne 4
 
|donnée L4-A
 
|donnée L4-A
Ligne 42 : Ligne 74 :
 
|donnée L4-D
 
|donnée L4-D
 
|}
 
|}
−
 
−
Ce texte est affiché à côté du tableau
 
−
<nowiki>{{Clear}}</nowiki>{{Clear}}
 
−
tandis que celui-ci commence après le tableau.
 
−
 
−
 
−
===Alignement du tableau===
 
−
Par défaut, si aucune clause d'alignement n'est mentionnée, l'alignement du tableau se fera à gauche.
 
−
 
−
Pour centrer le tableau horizontalement il faut utiliser la clause align="center" du tableau.
 
−
<pre>{| class="wikitable sortable" align="center"
 
 
</pre>
 
</pre>
−
{| class="wikitable sortable" align="center"
+
== Tableau avec seulement des en-têtes de colonnes ==
 +
{| class="wikitable" style="text-align:center; width:80%;"
 +
|+ Titre du tableau
 +
|-
 +
! scope=col | Titre col. A
 +
! scope=col | Titre col. B
 +
! scope=col | Titre col. C
 +
! scope=col | Titre col. D
 +
|-
 +
|donnée L1-A
 +
|donnée L1-B
 +
|donnée L1-C
 +
|donnée L1-D
 +
|-
 +
|donnée L2-A
 +
|donnée L2-B
 +
|donnée L2-C
 +
|donnée L2-D
 +
|-
 +
|donnée L3-A
 +
|donnée L3-B
 +
|donnée L3-C
 +
|donnée L3-D
 +
|-
 +
|donnée L4-A
 +
|donnée L4-B
 +
|donnée L4-C
 +
|donnée L4-D
 +
|}
 +
Code à copier :
 +
<pre>
 +
{| class="wikitable" style="text-align:center; width:80%;"
 +
|+ Titre du tableau
 +
|-
 +
! scope=col | Titre col. A
 +
! scope=col | Titre col. B
 +
! scope=col | Titre col. C
 +
! scope=col | Titre col. D
 +
|-
 +
|donnée L1-A
 +
|donnée L1-B
 +
|donnée L1-C
 +
|donnée L1-D
 +
|-
 +
|donnée L2-A
 +
|donnée L2-B
 +
|donnée L2-C
 +
|donnée L2-D
 +
|-
 +
|donnée L3-A
 +
|donnée L3-B
 +
|donnée L3-C
 +
|donnée L3-D
 +
|-
 +
|donnée L4-A
 +
|donnée L4-B
 +
|donnée L4-C
 +
|donnée L4-D
 +
|}
 +
</pre>
 +
== Tableau avec seulement des en-têtes de lignes ==
 +
{| class="wikitable" style="text-align:center; width:80%;"
 +
|+ Titre du tableau
 +
|-
 +
! scope=row | Titre ligne 1
 +
|donnée L1-1
 +
|donnée L1-2
 +
|donnée L1-3
 +
|-
 +
! scope=row | Titre ligne 2
 +
|donnée L2-1
 +
|donnée L2-2
 +
|donnée L2-3
 +
|-
 +
! scope=row | Titre ligne 3
 +
|donnée L3-1
 +
|donnée L3-2
 +
|donnée L3-3
 +
|-
 +
! scope=row | Titre ligne 4
 +
|donnée L4-1
 +
|donnée L4-2
 +
|donnée L4-3
 +
|}
 +
Code à copier :
 +
<pre>
 +
{| class="wikitable" style="text-align:center; width:80%;"
 +
|+ Titre du tableau
 +
|-
 +
! scope=row | Titre ligne 1
 +
|donnée L1-1
 +
|donnée L1-2
 +
|donnée L1-3
 +
|-
 +
! scope=row | Titre ligne 2
 +
|donnée L2-1
 +
|donnée L2-2
 +
|donnée L2-3
 +
|-
 +
! scope=row | Titre ligne 3
 +
|donnée L3-1
 +
|donnée L3-2
 +
|donnée L3-3
 +
|-
 +
! scope=row | Titre ligne 4
 +
|donnée L4-1
 +
|donnée L4-2
 +
|donnée L4-3
 +
|}
 +
</pre>
 +
== Tableau avec une alternance de gris pour les lignes == 
 +
{| class="wikitable alternance" style="text-align:center; width:80%;"
 
|+ Titre du tableau
 
|+ Titre du tableau
−
|-    
+
|-
−
! class="unsortable" |
+
|
 
! scope=col | Titre col. A
 
! scope=col | Titre col. A
 
! scope=col | Titre col. B
 
! scope=col | Titre col. B
 
! scope=col | Titre col. C
 
! scope=col | Titre col. C
−
! scope=col class="unsortable" | Titre col. D
+
! scope=col | Titre col. D
 
|-
 
|-
 
! scope=row | Titre ligne 1
 
! scope=row | Titre ligne 1
Ligne 80 : Ligne 212 :
 
|donnée L3-C
 
|donnée L3-C
 
|donnée L3-D
 
|donnée L3-D
−
|- class="sortbottom"
+
|-
 
! scope=row | Titre ligne 4
 
! scope=row | Titre ligne 4
 
|donnée L4-A
 
|donnée L4-A
Ligne 87 : Ligne 219 :
 
|donnée L4-D
 
|donnée L4-D
 
|}
 
|}
−
 
+
Code à copier :
−
Le texte saisi après le tableau se placera en dessous du tableau même en l'absence de la clause <nowiki>{{Clear}}</nowiki>
+
<pre>
−
 
+
{| class="wikitable alternance" style="text-align:center; width:80%;"
−
si on utilise la clause align=right et non le style float:right on obtiendra le même effet de positionnement.
 
−
 
 
−
{| class="wikitable sortable" align="right"
 
 
|+ Titre du tableau
 
|+ Titre du tableau
−
|-  
+
|-
−
! class="unsortable" |
+
|
 
! scope=col | Titre col. A
 
! scope=col | Titre col. A
 
! scope=col | Titre col. B
 
! scope=col | Titre col. B
 
! scope=col | Titre col. C
 
! scope=col | Titre col. C
−
! scope=col class="unsortable" | Titre col. D
+
! scope=col | Titre col. D
 
|-
 
|-
 
! scope=row | Titre ligne 1
 
! scope=row | Titre ligne 1
Ligne 118 : Ligne 247 :
 
|donnée L3-C
 
|donnée L3-C
 
|donnée L3-D
 
|donnée L3-D
−
|- class="sortbottom"
+
|-
 
! scope=row | Titre ligne 4
 
! scope=row | Titre ligne 4
 
|donnée L4-A
 
|donnée L4-A
Ligne 125 : Ligne 254 :
 
|donnée L4-D
 
|donnée L4-D
 
|}
 
|}
 +
</pre>
 +
== Signification des codes ==
 +
*On ouvre le tableau avec : <code style="color: green">'''<nowiki>{|</nowiki>'''</code>
 +
*On applique le style wikitable avec : <code style="color: green">'''<nowiki>class="wikitable"</nowiki>'''</code>
 +
*On ajoute l'alternance de gris avec : <code style="color: green">'''<nowiki>class="wikitable alternance"</nowiki>'''</code>
 +
*On centre le contenu dans chaque cellule du tableau avec : <code style="color: green">'''<nowiki>style="text-align:center;"</nowiki>'''</code>
 +
*On fixe la largeur du tableau avec : <code style="color: green">'''<nowiki>style="width:80%;"</nowiki>'''</code>
 +
*On indique le titre de tableau avec : <code style="color: green">'''<nowiki>|+</nowiki>'''</code>
 +
*On indique une cellule d'entête de colonne avec : <code style="color: green">'''<nowiki>! scope=col</nowiki>'''</code>
 +
*On indique une cellule d'entête de ligne avec : <code style="color: green">'''<nowiki>! scope=row</nowiki>'''</code>
 +
*On indique une cellule normale avec : <code style="color: green">'''<nowiki>|</nowiki>'''</code>
 +
*On sépare chaque ligne du tableau avec : <code style="color: green">'''<nowiki>|-</nowiki>'''</code>
 +
*On ferme le tableau avec : <code style="color: green">'''<nowiki>|}</nowiki>'''</code>
 +
== Voir aussi ==
 +
*[[Aide:Les tableaux pour les curieux]] pour comprendre comment on crée un tableau
 +
*[[Aide:Les tableaux pour les experts]] pour les explications détaillées de la syntaxe des tableaux

Version du 26 février 2011 à 15:08

Cette page ne propose que des exemples prêts à l'emploi pour des tableaux simples et génériques à l'attention des débutants . Il vous suffit de les copier puis de les adapter à vos besoins en les complétant et en ajoutant ou supprimant des lignes ou des colonnes selon vos désirs.

Reportez-vous à Tableau pour initiés (niveau de difficulté intermédiaire) et Tableau pour expert pour les explications détaillées de la syntaxe des tableaux.

Tableau à double entrée

Titre du tableau
Titre col. A Titre col. B Titre col. C Titre col. D
Titre ligne 1 donnée L1-A donnée L1-B donnée L1-C donnée L1-D
Titre ligne 2 donnée L2-A donnée L2-B donnée L2-C donnée L2-D
Titre ligne 3 donnée L3-A donnée L3-B donnée L3-C donnée L3-D
Titre ligne 4 donnée L4-A donnée L4-B donnée L4-C donnée L4-D

Code à copier : 

{| class="wikitable" style="text-align:center; width:80%;"
|+ Titre du tableau
|-
|
! scope=col | Titre col. A
! scope=col | Titre col. B
! scope=col | Titre col. C
! scope=col | Titre col. D
|-
! scope=row | Titre ligne 1
|donnée L1-A
|donnée L1-B
|donnée L1-C
|donnée L1-D
|-
! scope=row | Titre ligne 2
|donnée L2-A
|donnée L2-B
|donnée L2-C
|donnée L2-D
|-
! scope=row |Titre ligne 3
|donnée L3-A
|donnée L3-B
|donnée L3-C
|donnée L3-D
|-
! scope=row | Titre ligne 4
|donnée L4-A
|donnée L4-B
|donnée L4-C
|donnée L4-D
|}

Tableau avec seulement des en-têtes de colonnes

Titre du tableau
Titre col. A Titre col. B Titre col. C Titre col. D
donnée L1-A donnée L1-B donnée L1-C donnée L1-D
donnée L2-A donnée L2-B donnée L2-C donnée L2-D
donnée L3-A donnée L3-B donnée L3-C donnée L3-D
donnée L4-A donnée L4-B donnée L4-C donnée L4-D

Code à copier : 

{| class="wikitable" style="text-align:center; width:80%;"
|+ Titre du tableau
|-
! scope=col | Titre col. A
! scope=col | Titre col. B
! scope=col | Titre col. C
! scope=col | Titre col. D
|-
|donnée L1-A
|donnée L1-B
|donnée L1-C
|donnée L1-D
|-
|donnée L2-A
|donnée L2-B
|donnée L2-C
|donnée L2-D
|-
|donnée L3-A
|donnée L3-B
|donnée L3-C
|donnée L3-D
|-
|donnée L4-A
|donnée L4-B
|donnée L4-C
|donnée L4-D
|}

Tableau avec seulement des en-têtes de lignes

Titre du tableau
Titre ligne 1 donnée L1-1 donnée L1-2 donnée L1-3
Titre ligne 2 donnée L2-1 donnée L2-2 donnée L2-3
Titre ligne 3 donnée L3-1 donnée L3-2 donnée L3-3
Titre ligne 4 donnée L4-1 donnée L4-2 donnée L4-3

Code à copier : 

{| class="wikitable" style="text-align:center; width:80%;"
|+ Titre du tableau
|-
! scope=row | Titre ligne 1
|donnée L1-1
|donnée L1-2
|donnée L1-3
|-
! scope=row | Titre ligne 2
|donnée L2-1
|donnée L2-2
|donnée L2-3
|-
! scope=row | Titre ligne 3
|donnée L3-1
|donnée L3-2
|donnée L3-3
|-
! scope=row | Titre ligne 4
|donnée L4-1
|donnée L4-2
|donnée L4-3
|}

Tableau avec une alternance de gris pour les lignes

Titre du tableau
Titre col. A Titre col. B Titre col. C Titre col. D
Titre ligne 1 donnée L1-A donnée L1-B donnée L1-C donnée L1-D
Titre ligne 2 donnée L2-A donnée L2-B donnée L2-C donnée L2-D
Titre ligne 3 donnée L3-A donnée L3-B donnée L3-C donnée L3-D
Titre ligne 4 donnée L4-A donnée L4-B donnée L4-C donnée L4-D

Code à copier : 

{| class="wikitable alternance" style="text-align:center; width:80%;"
|+ Titre du tableau
|-
|
! scope=col | Titre col. A
! scope=col | Titre col. B
! scope=col | Titre col. C
! scope=col | Titre col. D
|-
! scope=row | Titre ligne 1
|donnée L1-A
|donnée L1-B
|donnée L1-C
|donnée L1-D
|-
! scope=row | Titre ligne 2
|donnée L2-A
|donnée L2-B
|donnée L2-C
|donnée L2-D
|-
! scope=row |Titre ligne 3
|donnée L3-A
|donnée L3-B
|donnée L3-C
|donnée L3-D
|-
! scope=row | Titre ligne 4
|donnée L4-A
|donnée L4-B
|donnée L4-C
|donnée L4-D
|}

Signification des codes

  • On ouvre le tableau avec : {|
  • On applique le style wikitable avec : class="wikitable"
  • On ajoute l'alternance de gris avec : class="wikitable alternance"
  • On centre le contenu dans chaque cellule du tableau avec : style="text-align:center;"
  • On fixe la largeur du tableau avec : style="width:80%;"
  • On indique le titre de tableau avec : |+
  • On indique une cellule d'entête de colonne avec : ! scope=col
  • On indique une cellule d'entête de ligne avec : ! scope=row
  • On indique une cellule normale avec : |
  • On sépare chaque ligne du tableau avec : |-
  • On ferme le tableau avec : |}

Voir aussi

Récupérée de « https://memorial-genweb.org:80/wiki/index.php?title=Utilisateur:Raymond_SÉNÈQUE/Article_en_cours&oldid=4467 »