Inscription
Connexion

10 août 2020, 18:26
 Tutoriel BBCode  Mettre en forme des tableaux
Bonjour à tous! Aujourd'hui j'aimerais vous présenter un petit tutoriel pour les tableaux, en attendant que Zachary Winslow mette à jour son tutoriel BBCode sur les tableaux. J'espère qu'à la fin de la lecture de ce sujet, vous arriverez à nous épater avec des tableaux tous plus impressionnants que les autres!

~~~~~~~~~~


~~~~~~~~~~

Tout d'abord, il faut savoir que les tableaux utilisent trois balises:
  • La Balise table, qui définit le début et la fin du tableau.
  • La Balise tr, qui définit les lignes du tableau.
  • Enfin, la balise td, qui définit chaque cellule (case) du tableau.
Ainsi, à chaque nouvelle ligne, il vous suffira de rajouter une balise tr et, à l'intérieur ces balises, il vous suffira de rajouter une balise td pour chaque nouvelle cellule.

~~~~~~~~~~


Passons dans le vif du sujet! si vous cliquez sur l'icône tableau (), ça vous fera apparaître ceci:

Code : Tout sélectionner

[table][tr][td][/td][/tr][/table]
Il y a donc la balise table, qui définit le début et la fin du tableau; la balise tr, qui définit le début et la fin d'une ligne et la balise td, qui définit le début et la fin d'une cellule.

~~~~~~~~~~


Si vous voulez faire un tableau à deux cellules et une seule ligne: il suffit donc de rajouter une balise td entre les balises tr, après la première série de balises td.

Code : Tout sélectionner

[table][tr][td][/td][td][/td][/tr][/table]
~~~~~~~~~~


Rajoutons maintenant le texte à notre tableau! Si on souhaite par exemple par ce tableau définir une équipe pour un quelconque événement:

Code : Tout sélectionner

[table][tr][td]Équipe 1[/td][td]Équipe 2[/td][/tr][/table]
Cela vous donnera ceci:
Équipe 1Équipe 2
~~~~~~~~~~


Afin de rendre le tout plus joli on peut bien entendu utiliser les BBCodes normaux dans chaque cellule (gras, italique, ... ) Dans le cas présent je vais centrer le texte de chaque cellule, le mettre en couleur et le souligner.

Code : Tout sélectionner

[table][tr][td][center][u][color=#0000FF]Équipe 1[/color][/u][/center][/td][td][center][u][color=#008000]Équipe 2[/color][/u][/center][/td][/tr][/table]
Ce qui nous donnera ceci:
Équipe 1
Équipe 2
On peut même ajouter quelques citations afin de rendre le tableau plus joli:
Équipe 1
Équipe 2
~~~~~~~~~~


Si on a oublié une quelconque cellule dans notre ligne, pas de problème! on peut en rajouter après, comme ceci:

Code : Tout sélectionner

[table][tr][td][b]Équipes:[/b][/td][td][quote][center][u][color=#0000FF]Équipe 1[/color][/u][/center][/quote][/td][td][quote][center][u][color=#008000]Équipe 2[/color][/u][/center][/quote][/td][[td][quote][center][u][color=#FFFF00]Équipe 3[/color][/u][/center][/quote][/td][td][quote][center][u][color=#FF4000]Équipe 4[/color][/u][/center][/quote][/td][/tr][/table]
Ce qui nous donnera ceci:
Équipes:
Équipe 1
Équipe 2
Équipe 3
Équipe 4
~~~~~~~~~~


C'est bien joli tout ça, mais maintenant on souhaite rajouter du contenu en dessous! Pour ça, deux techniques:
  • On saute des lignes dans la même cellule, comme ceci:

Code : Tout sélectionner

[table][tr][td][b]Équipes:[/b]

[b]Capacités:[/b][/td][td][quote][center][u][color=#0000FF]Équipe 1[/color][/u][/center][/quote]

Cette équipe peut jouer deux actions au lieu d'une.[/td][td][quote][center][u][color=#008000]Équipe 2[/color][/u][/center][/quote]

Cette équipe voit son nombre de points augmenter de 1,8 à chaque actions réussies[/td][td][quote][center][u][color=#FFFF00]Équipe 3[/color][/u][/center][/quote]

Cette équipe a ses points qui descendent moins vite que les autres[/td][td][quote][center][u][color=#FF4000]Équipe 4[/color][/u][/center][/quote]

Cette équipe est capable de forcer une équipe à activer sa capacité[/td][/tr][/table]
Ce qui nous donnera ceci:
Équipes:

Capacités:
Équipe 1
Cette équipe peut jouer deux actions au lieu d'une.
Équipe 2
Cette équipe voit son nombre de points augmenter de 1,8 à chaque actions réussies
Équipe 3
Cette équipe a ses points qui descendent moins vite que les autres
Équipe 4
Cette équipe est capable de forcer une équipe à activer sa capacité
  • Ou on rajoute une ligne, comme ceci:
Comme on l'a dit tout à l'heure, les balises tr définissent le début et la fin d'une nouvelle ligne. Comme c'est ce qu'on veut, on va en rajouter une à la fin de notre tableau, avec cinq balises td pour chaque cellule de la deuxième ligne.

Code : Tout sélectionner

[table][tr][td][b]Équipes:[/b][/td][td][quote][center][u][color=#0000FF]Équipe 1[/color][/u][/center][/quote][/td][td][quote][center][u][color=#008000]Équipe 2[/color][/u][/center][/quote][/td][td][quote][center][u][color=#FFFF00]Équipe 3[/color][/u][/center][/quote][/td][td][quote][center][u][color=#FF4000]Équipe 4[/color][/u][/center][/quote][/td][/tr][tr][td][/td][td][/td][td][/td][td][/td][/tr][/table]
Dans ces cinq nouvelles cellules on va mettre ce qu'on veut, comme ceci:

Code : Tout sélectionner

[table][tr][td][b]Équipes:[/b][/td][td][quote][center][u][color=#0000FF]Équipe 1[/color][/u][/center][/quote][/td][td][quote][center][u][color=#008000]Équipe 2[/color][/u][/center][/quote][/td][td][quote][center][u][color=#FFFF00]Équipe 3[/color][/u][/center][/quote][/td][td][quote][center][u][color=#FF4000]Équipe 4[/color][/u][/center][/quote][/td][/tr][tr][td][b]Capacités:[/b][/td][td]Cette équipe peut jouer deux actions au lieu d'une.[/td][td]Cette équipe voit son nombre de points augmenter de 1,8 à chaque actions réussies[/td][td]Cette équipe a ses points qui descendent moins vite que les autres[/td][td]Cette équipe est capable de forcer une équipe à activer sa capacité[/td][/tr][/table]
Ce qui nous donnera ceci:
Équipes:
Équipe 1
Équipe 2
Équipe 3
Équipe 4
Capacités:Cette équipe peut jouer deux actions au lieu d'une.Cette équipe voit son nombre de points augmenter de 1,8 à chaque actions réussiesCette équipe a ses points qui descendent moins vite que les autresCette équipe est capable de forcer une équipe à activer sa capacité
On peut ensuite mettre le BBCode que l'on veut à chacune de ces cinq cellules: ici une justification et une citation.
Équipes:
Équipe 1
Équipe 2
Équipe 3
Équipe 4
Capacités:
Cette équipe peut jouer deux actions au lieu d'une.
Cette équipe voit son nombre de points augmenter de 1,8 à chaque actions réussies
Cette équipe a ses points qui descendent moins vite que les autres
Cette équipe est capable de forcer une équipe à activer sa capacité
~~~~~~~~~~


Voilà pour l'explication générale du tableau. Il vous est possible de faire des choses plus complexes, comme ceci:

Code : Tout sélectionner

[table][tr][td][quote][/quote][quote][/quote][quote][/quote][quote][/quote][quote][/quote][quote][/quote][quote][/quote][quote][/quote][quote][/quote][quote][/quote][/td][td][quote][u][color=#BF8000]Mael Chassin[/color][/u][/quote][quote][color=#0040FF]Troisième année[/color][/quote][quote][color=#BF8000]Poufsouffle[/color][/quote][/td][td][quote][/quote][quote][img]files/aea9273a0eef8fcd.png[/img][/quote][quote][/quote][/td][td][quote][color=#0040FF]Cursus Sciences[/color][/quote][quote][color=#BF8000]Dublin[/color][/quote][quote][color=#0040FF]Irlandais[/color][/quote][/td][td][quote][/quote][quote][/quote][quote][/quote][quote][/quote][quote][/quote][quote][/quote][quote][/quote][quote][/quote][quote][/quote][quote][/quote][/td][/tr][/table]
Ce qui donnera:
Mael Chassin
Troisième année
Poufsouffle
Image
Cursus Sciences
Dublin
Irlandais
~~~~~~~~~~


On ne peut pas réellement faire un tableau avec un nombre de cellule différent par ligne: En utilisant la manière qui semblerait habituelle, sous le reducio ci-dessous, il y a plusieurs bugs: par exemple, la balise center qui est sensé centrer les images ne fonctionne pas.

Reducio

Code : Tout sélectionner

[table][tr][td][center][img]files/70b7e7379ba77268.png[/img][/center][/td][/tr][tr][td][center][img]files/70b7e7379ba77268.png[/img][/center][/td][td][center][img]files/70b7e7379ba77268.png[/img][/center][/td][/tr][tr][td][center][center][img]files/70b7e7379ba77268.png[/img][/center][/center][/td][td][center][img]files/70b7e7379ba77268.png[/img][/center][/td][td][center][img]files/70b7e7379ba77268.png[/img][/center][/td][/tr][/table]
ce qui donnera:
Image
Image
Image
Image
Image
Image


En revanche, on peut pallier à ce problème en imbriquant un tableau dans un autre tableau:

Code : Tout sélectionner

[table][tr][td][center][img]files/70b7e7379ba77268.png[/img][/center][/td][/tr][tr][td][table][tr][td][center][img]files/70b7e7379ba77268.png[/img][/center][/td][td][center][img]files/70b7e7379ba77268.png[/img][/center][/td][/tr][/table][/td][/tr][tr][td][table][tr][td][center][img]files/70b7e7379ba77268.png[/img][/center][/td][td][center][img]files/70b7e7379ba77268.png[/img][/center][/td][td][center][img]files/70b7e7379ba77268.png[/img][/center][/td][/tr][/table][/td][/tr][/table]
ce qui donnera:
Image
Image
Image
Image
Image
Image
~~~~~~~~~~


Par la suite, votre imagination sera la seule limite! Créez des tableaux pour égayer votre fiche, vos posts et autres présentations & résolutions!

Pour vous faciliter la tâche, vous pouvez également vous servir de ce site qui créera lui-même un tableau selon les informations que vous indiquez ! N'oubliez pas de décocher la case 1st row is header car le site ne prend pas en compte le code de cette option !

Si vous souhaitez faire un tableau mais que vous n'y arrivez pas, venez me contecter, je vous aiderai dans la mesure de mes connaissances & des mes possibilités!
Dernière modification par Mael Chassin le 06 juil. 2021, 15:55, modifié 4 fois.


5ème joueur d'Irlande aux échecs sorciers, rédacteur au Merlin et représentant des rédacteurs du Merlin au conseil du Merlin

12 févr. 2021, 22:47
 Tutoriel BBCode  Mettre en forme des tableaux
MàJ du 12/02/21 sur l'onglet "nombre différent de cellule par ligne"


5ème joueur d'Irlande aux échecs sorciers, rédacteur au Merlin et représentant des rédacteurs du Merlin au conseil du Merlin