Aide:Wikitable : Différence entre versions

De WikiGenWeb
Aller à : navigation, rechercher
m (Alignement du tableau)
m (Articles connexes)
Ligne 314 : Ligne 314 :
 
|}
 
|}
  
 +
{{Clear}}
 
==Articles connexes==
 
==Articles connexes==
 
* [[Aide:Tableau|Tableau]]
 
* [[Aide:Tableau|Tableau]]

Version du 26 février 2011 à 13:45

Un tableau peut faire appel à un design défini dans une feuille de style css. la solution la plus simple, pour obtenir un tableau simple, est d'utiliser la classe "wikitable", prédéfinie dans WikiGenWeb.


Classe wikitable

Feuille de style par défaut

table.wikitable {
  margin: 1em 1em 1em 0;    
  background: #f9f9f9;    
  border: 1px #aaa solid;    
  border-collapse: collapse;    
}
.wikitable th, .wikitable td {
  border: 1px #aaa solid;    
  padding: 0.2em;    
}
.wikitable th {
  background: #f2f2f2;    
  text-align: center;    
}
.wikitable caption {
  font-weight: bold;    
}

Tableau par défaut

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
{| class="wikitable"

|+ 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
|}

Paramètres de classe

Les paramètres de classe du tableau peuvent prendre les valeurs suivantes:

class="wikitable" 
permet d'adapter le style "wikitable" au tableau. Plus élégant qu'un tableau classique, il impose certains attributs (comme la taille de la bordure) et définit des couleurs par défaut.
class="wikitable center" 
permet d'adapter le style "wikitable" au tableau et de l'étaler sur toute la largeur de la page.
class="wikitable sortable" 
permet de trier le tableau ascendant/descendant par colonne. Les colonnes triables s’identifient grâce aux flèches de tri des en-têtes.
class="wikitable center sortable" 
applique l'ensemble des adaptations des deux paramètres.

Il est possible de créer des colonnes non triables en spécifiant l’attribut de colonne class="unsortable" et d’exclure des rangées complètes en bas de tableau avec l’attribut de rangée class="sortbottom" :


Tableau avec tous les attributs

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
{| class="wikitable center sortable"

|+ Titre du tableau
|-   
! class="unsortable" |
! scope=col | Titre col. A
! scope=col | Titre col. B
! scope=col | Titre col. C
! scope=col class="unsortable" | 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
|- class="sortbottom"
! scope=row | Titre ligne 4
|donnée L4-A
|donnée L4-B
|donnée L4-C
|donnée L4-D
|}

Flottement du tableau

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.

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.

Si le texte saisi doit commencer après le tableau, le modèle {{Clear}} sera utilisé avant le texte.

{| class="wikitable sortable" style="float:right;"
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

Ce texte est affiché à côté du tableau

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

{| class="wikitable sortable" align="center"
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

Le texte saisi après le tableau se placera en dessous du tableau même en l'absence de la clause {{Clear}}

si on utilise la clause align=right et non le style float:right on obtiendra le même effet de positionnement.

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

Articles connexes