Guide d'utilisation des tableaux Mediawiki

Répondre
Partager Rechercher
Pour simplifier la création de tableaux et pour permettre une plus grande personnalisation de ces derniers, vous pouvez utiliser sur les forums JeuxOnLine la syntaxe MédiaWiki de création de tableau.

Voici par exemple ce que cela vous permet de faire :

exemple de tableau
titre gauchetitre centretitre droite
titre hauthaut gauchehaut centrehaut droite
titre milieumilieu gauchemilieu centremilieu droite
titre basbas gauchebas centrebas droite

Le code de ce tableau est :
Code:
{| class="wikitable"
|+ exemple de tableau
!
! titre gauche
! titre centre
! titre droite
|-
! titre haut
| haut gauche
| haut centre
| haut droite
|-
! titre milieu
| milieu gauche
| milieu centre
| milieu droite
|-
! titre bas
| bas gauche
| bas centre
| bas droite
|}
PremièreDeuxième
Gauche 1 Droite
Gauche 2
Gauche 3

Le code de ce tableau est :
Code:
{| class="wikitable"
| Première
| Deuxième
|-
| Gauche 1
| rowspan="3" | Droite
|-
| Gauche 2
|-
| Gauche 3
|}
Position haut milieu bas

Le code de ce tableau est :
Code:
{| class="wikitable"
| height="150" | Position
| valign="top" | haut
| valign="middle" | milieu
| valign="bottom" | bas
|}
Vous pouvez également rendre les colonnes de vos tableaux triables en ajoutant l'option "sortable" au paramètre "class". Par exemple :

Nomscore
1moi32.999
2elle155.25
3lui22

Le code de ce tableau est :
Code:
{| class="wikitable sortable" 
! N°
! Nom
! score
|-
| 1 || moi || 32.999
|-
| 2 || elle || 155.25
|-
| 3 || lui || 22
|}
Vous pouvez aussi ajouter des couleurs :

rouge vert bleu

Le code de ce tableau est :
Code:
{| class="wikitable"
| bgcolor="#FF6666" | rouge
| bgcolor="#66FF66" | vert
| bgcolor="#aaaaFF" | bleu
|}
Ou des styles CSS :

cellule 1
cellule 2
cellule 3

Le code de ce tableau est :
Code:
{| class="wikitable" style="background-color:#CCFFCC"
| cellule 1
|-
| cellule 2
|-
| cellule 3
|}
Vous trouverez tous les détails à propos de cette syntaxe sur Comment réaliser un tableau en code wiki.


Notez que les tableaux imbriqués ne fonctionnent pas correctement. Eviter donc d'intégrer des tableaux à l'intérieur d'autres tableaux.
->
Citation :
Publié par Gawel
C'est parce que l'attribut bgcolor commence à être obsolète que le moindre style css mettant de la couleur prend le dessus.

{ | class="wikitable sortable"
! N°
! Nom
! score
|-
| style="background-color:#FF6666" |1 || moi || 32.999
|-
| style="background-color:#FF6666" |2 || elle || 155.25
|-
| style="background-color:#FF6666" | 3 || lui || 22
| }

Nomscore
1moi32.999
2elle155.25
3lui22
Les balises de justification déconnent dans les tableaux.

J'ai ce code :
Code:
{| class="wikitable sortable" 
!
! Nous
! Eux
|-
| [B]Top[/B] || bgcolor="#66FF66" |  WR || bgcolor="#FF6666" | PA (+ Furion Jungle)
|-
| [B]Mid[/B] ||  bgcolor="#66FF66" | QoP || bgcolor="#FF6666" | Storm
|-
| [B]Bot[/B] ||  bgcolor="#66FF66" | Morph + WD (+ n'aix jungle) || bgcolor="#FF6666" | Omni + SK
|}
NousEux
Top WR PA (+ Furion Jungle)
Mid QoP Storm
Bot Morph + WD (+ n'aix jungle) Omni + SK


Je veux mettre les parties en vert et rouge en [center].
Ce code fonctionne pour mettre la colonne "Nous" en centrée :
Code:
{| class="wikitable sortable" 
!
! Nous
! Eux
|-
| [B]Top[/B] || bgcolor="#66FF66" |  [CENTER]WR[/CENTER] || bgcolor="#FF6666" | PA (+ Furion Jungle)
|-
| [B]Mid[/B] ||  bgcolor="#66FF66" | [CENTER]QoP[/CENTER] || bgcolor="#FF6666" | Storm
|-
| [B]Bot[/B] ||  bgcolor="#66FF66" | [CENTER]Morph + WD (+ n'aix jungle)[/CENTER] || bgcolor="#FF6666" | Omni + SK
|}
NousEux
Top
WR
PA (+ Furion Jungle)
Mid
QoP
Storm
Bot
Morph + WD (+ n'aix jungle)
Omni + SK


En revanche dès que j'essaie de mettre la colonne "Eux" en centrée, ça part complètement en couilles.

Code:
{| class="wikitable sortable" 
!
! Nous
! Eux
|-
| [B]Top[/B] || bgcolor="#66FF66" |  [CENTER]WR[/CENTER] || bgcolor="#FF6666" | [CENTER]PA (+ Furion Jungle)[/CENTER]
|-
| [B]Mid[/B] ||  bgcolor="#66FF66" | [CENTER]QoP[/CENTER] || bgcolor="#FF6666" | [CENTER]Storm[/CENTER]
|-
| [B]Bot[/B] ||  bgcolor="#66FF66" | [CENTER]Morph + WD (+ n'aix jungle)[/CENTER] || bgcolor="#FF6666" | [CENTER]Omni + SK[/CENTER]
|}
NousEux
Top
WR
PA (+ Furion Jungle)
|-
Mid
QoP
Storm
|-
Bot
Morph + WD (+ n'aix jungle)
Omni + SK
|}


J'ai foiré quoi ?


(accessoirement, le tableau devrait être sortable, non ? Là il ne l'est pas.)

// ah bah. C'était en couleur en prévisualisation, ça ne l'est plus sur le forum. Je vais essayer avec background-color:.
// ça n'a pas vraiment l'air de marcher en remplaçant bgcolor="#xxxxxx" par style="background-color:#xxxxxx". Les mystères des tableaux wiki. :|

Dernière modification par Selty ; 13/12/2012 à 18h40.
Centrer ce n'est pas justifier (il existe des balises [justify ] [/justify ] que tu peux utiliser)

Pour ton tableau, comme Gawel me l'avait conseillé à l'époque pour les couleurs, il vaut mieux passer par les attributs de style que par les balises BBcode :

{ | class="wikitable sortable"
!
! Nous
! Eux
|-
| [B]Top[/B]
| style="text-align: center; background-color:#66FF66" | WR
| style="text-align: center; background-color:#FF6666" | PA (+ Furion Jungle)
|-
| [B]Mid[/B]
| style="text-align: center; background-color:#66FF66" | QoP
| style="text-align: center; background-color:#FF6666" | Storm
|-
| [B]Bot[/B]
| style="text-align: center; background-color:#66FF66" | Morph + WD (+ n'aix jungle)
| style="text-align: center; background-color:#FF6666" | Omni + SK
| }

NousEux
Top WR PA (+ Furion Jungle)
Mid QoP Storm
Bot Morph + WD (+ n'aix jungle) Omni + SK


Et comme tu l'a remarqué, il faut parfois se méfier de la prévisualisation

Dernière modification par Incan ; 13/12/2012 à 20h11.
rox, merci.
J'en profite pour passer un petit messages aux papas et mamans des concepteurs des tableaux mediawiki sur vbulletin : vous les avez fini au pipi je pense.
Ce serait possible d'avoir une scrollbar horizontale sur la page quand on a un tableau très large dedans ? Pour le moment le seul moyen de voir un gros tableau dans sa globalité c'est de dézoomer via son navigateur.
Citation :
Publié par Mind
PremièreDeuxième
Gauche 1 Droite
Gauche 2
Gauche 3

Le code de ce tableau est :
Code:
{| class="wikitable"
| Première
| Deuxième
|-
| Gauche 1
| rowspan="3" | Droite
|-
| Gauche 2
|-
| Gauche 3
|}
Je viens de tomber sur ce thead, bien utile, mais je galère un peu. J'ai essayé de reprendre ce modèle de tableau, en passant la colonne de droite à gauche et en la mettant en valeur. Jusque là pas de souci :

Test
Titre 1Titre 2Titre 3Titre 4Titre 5Titre 6
X00000
00000


Mais quand je tente d'ajouter une nouvelle ligne sous le X en conservant le même modèle, sans que je sache pourquoi ça part en cacahuète :

Test
Titre 1Titre 2Titre 3Titre 4Titre 5Titre 6
X00000
Y00000


Je m'y prends mal ou est-ce juste impossible à réaliser ?
Citation :
Je m'y prends mal ou est-ce juste impossible à réaliser ?
Tu t'y prends mal

D'abord, c'est rowspan="2" puisque tu ne fusionnes que deux lignes. Ensuite, une fois que tu as donné tes valeurs pour ta première ligne fusionnée (tes cinq premiers zéro) , tu dois donner celles pour la deuxième, ce n'est qu'après ça que tu peux mettre ta ligne "Y".
Titre 1Titre 2Titre 3Titre 4Titre 5Titre 6
X00000
00000
Y00000


{ | class="wikitable"
! Titre 1 || Titre 2 || Titre 3 || Titre 4 || Titre 5 || Titre 6
|-
! rowspan="2" | X <- "je veux fusionner deux lignes"
| 0 || 0 || 0 || 0 || 0 <- ta première ligne fusionnée
|-
| 0 || 0 || 0 || 0 || 0 <- ta deuxième ligne fusionnée
|-
! Y <- La tu peux mettre tes lignes supplémentaires
| 0 || 0 || 0 || 0 || 0
| }
Bonjour,
je ne sais pas si c'est le bon topic mais je vais essayer quand même.

Dans l'optique de faire des news de présentations d'équipes de Dota 2, j'aurais souhaité faire un "timeline" des membres d'une équipe. En gros l'idée serait de reprendre la belle présentation visuel des membres d'un groupe qu'on pourrait retrouver ici :
http://fr.wikipedia.org/wiki/Metallica#Membres

Est-il possible de faire cela avec le wiki JOL et si oui, il y a-t-il une page sur laquelle je pourrais faire mes tests ?
Pas trouvé mieux que ca :x

J'ai mis les titre concours/jeu/jeu perm/partage en gras pour avoir la meme typo que les autres titre, faut juste add une couleur de fond. J'ai centré le texte aussi, a virer/adapter ci-besoin.

Jolien TamponsToC1C2ToJ1J2J3J4J5J6ToA1A2ToP1P2 Fidélité Liens utiles
Concours Jeu Jeu perm. Partage
Kerrad7 1 3,5 0,5 2
Kerrad7 1 3,5 0,5 2


J'ai mis la couleur de fond pour test mais chuis pas convaincu ^^

edit: bon en fait fixer la couleur de fond pour les 4 titre "concours/jeu..." est une mauvaise idée, le rendu du tableau change suivant le theme utilisé mais la couleur elle est fixé, du coup ca correspond plus. J'avais le theme noir quand j'ai test.
Citation :
Publié par Ezerian
toujours un problème avec les flèches, çà détruit le tableau. merci quand même
ah oui, zut, j'ai pas pensé qu'au moment de faire le tri ca allait tout casser :x

Reste une solution "bricolage":

-faire un premier tableau avec des largeurs de colonnes fixes et les entetes des colonnes
-faire un second tableau avec les memes largeurs de colonnes et permettre le tri sur celles ci.

Jolien Tampons Concours Jeu Jeu perm. Partage Fidélité Liens utiles

To C1 C2 To J1 J2 J3 J4 J5 J6 To A1 A2 To P1 P2
Kerrad7 1 3,5 0,5 2
Kerrad7 1 3,5 0,5 2


Bon par contre faut bidouiller un peu pour les largeurs (fixer en px la largeur du tableau complet et en % les colonnes a l'interieur, j'ai test avec des colonne en px et les largeur n'etaient pas respectées.
Citation :
Publié par Ezerian
Vous gérez ! :=) Un truc bête comment centrer la première colonne ?
Si tu parles de la premiere colonne de ton premier tableau, il faut mettre la balise pour chaque cellule. On ne peut que appliquer a tout le tableau ou a des cellules en particulier. Par de gestion de ligne/colonne (que je sache).

Du coup ajoute ca au tout debut de chaque ligne:


| style="text-align:center;"

pour obtenir un truc comme ca:

| style="text-align:center; | texte de ma colonne1ligne1
|-
...
|-
| style="text-align:center; | texte de ma colonne1ligne2
...

Sinon perso, quand je fait des tableau wiki, je prefere utiliser une presentation du code plus lisible pour l'edition, je sais pas si tu comptes revenir souvent dessus...
Je t'invite a regarder le code du tableau que j'ai fait pour le wiki de la cdm de rugby:
https://forums.jeuxonline.info/showthread.php?t=1307035

Il est possible d'avoir une presentation du code telle que:

! entete1 !! entete2 !! entete 3 !! entete4
|-
| C1L1 || C2L1 || C3L1 || C4L1
|-
| C1L2 || C2L2 || C3L2 || C4L2
...

Et si tu le fait sous notepad++ en ajoutant des tabulations t'as un truc plutot bien lisible pour la suite normalement.

gl
Quelqu'un aurait un moment pour me filer un coup de main ?

J'ai besoin de faire des tableaux à 4 colonnes :

première colonne sans couleur
deuxième colonne rouge
troisième bleue
quatrième verte

pour le moment j'ai à peu près réussi :

test Albion Midgard Hibernia
Etape 1 Albion Midgard Hibernia


Code:
test Albion Midgard Hibernia
Etape 1 Albion Midgard Hibernia
mais je trouve mon code lourd

une solution plus simple ?
Répondre

Connectés sur ce fil

 
1 connecté (0 membre et 1 invité) Afficher la liste détaillée des connectés