Mes tuto utilise principalement le système de BBcode des Tableaux. C'est très simple, vous verrez. Voici donc un guide de base pour apprendre à faire de jolie tableau!

Tout d'abord, un tableau commence par [ table ] et finit par [ /table ]. Vous pouvez faire apparaître des bord en ajoutant border="1" comme ceci : [ table border="1" ][ /table ]. Ceci étant fait, maintenant, il faut remplir le tableau, avec des colonnes et des lignes.

Pour faire des lignes, il faudra ajouter des [ tr ][ /tr ], qui marquera la ligne. Par la suite, pour avoir des cellules(ou des "cases"), il faudra mettre entre les [ tr ][ /tr ] des [ td ][ /td ], ce qui devrait donner, pour une ligne avec une seule case, dans un tableau, ceci : [ table border="1"][ tr ][ td ][ /td ][ /tr ][ /table ]. Je ne vous ferai pas de démonstration ici, car un tableau vide, c'est un peu moche!

Si vous voulez plusieurs cellules, ajouté simplement autant de [ td ][ /td ] que vous voulez. Vous voulez rajouter des lignes? Alors, ajouter des [ tr ][ /tr ]. Attention! Pour l'instant, faites gaffe à toujours avoir autant de [ td ][ /td ] à chaque lignes. Sinon, vous aurez des problèmes d'affichage!

Et voila. Vous savez comment faire un tableau, au plus basique possible. Derniers petits conseils avant de passer à l'étape suivante. Ce n'est pas important, mais je trouve que c'est bien plus pratique! N'oubliez pas de faire des retours à la lignes très souvent, entre chaque [ td ][ /td ], et chaque [ tr ][ /tr ]. Vous vous y retrouverez plus facilement!(Exemple ci dessous)

Code:

Code pour un tableau ayant 2 lignes, avec 4 colonnes(C'est à dire, 5 cellules).
[table border="1"]
[tr]
[td][/td]
[td][/td]
[td][/td]
[td][/td]
[/tr][tr]
[td][/td]
[td][/td]
[td][/td]
[td][/td]
[/tr]
[/table]
[/td]

Maintenant que vous savez comment créer un tableau, il est temps de passer a des choses un peu plus sérieuse. Il y a toute sorte de chose que l'on peut faire pour personnalisé un tableau. Je vais donc vous expliquez quelques unes de mes astuces.

Dimensions du tableau
De base, un tableau prendra la hauteur et la largeur qu'il lui faut pour afficher avec le minimum d'espace les informations que vous mettez à l'intérieur. Cependant, vous pouvez faire en sorte que votre tableau ai une taille fixe. Pour cela, il suffit d'ajouter à votre tableau, soit dans le [ table ], soit dans le [ td ], un width="XXpx" pour la largeur, ou un height="XXpx" pour la hauteur, sachant que XX devra être remplacer par la taille, en pixel, que vous désirez avoir. Les cellules ne sont pas obliger d'avoir la même hauteur et la même largeur. Sachez cependant que si il n'y a pas la place pour mettre toute les informations, le tableau modifiera son apparence(par exemple, en ajoutant de lui même de la hauteur) pour que tout s'affiche normalement. Voici quelques petits exemple de taille que vous pouvez utiliser :

50px

75px

100px

Code:

Taille définit d'un tableau :
[table border="1" width="50px" height="50px"]
[tr]
[td][/td]
[/tr][/table]

Taille définit d'une cellule :
[table border="1"]
[tr]
[td width="50px" height="50px"][/td]
[/tr][/table]

Lignes ou colonnes de plusieurs cellules
Par moment, il est possible que vous vouliez faire une cellule qui sera de plusieurs cellules de haut, ou de large. Il faudra pour cela ajouter dans le [ td ] de cette cellule uniquement colspan="1" pour la largeur, et rowspan="1" pour la hauteur, sachant que vous devez remplacer le 1 par le nombre de cellule que vous voulez remplacer.

Code:

[table border="1" width="50px" height="50px"]
[tr]
[td colspan="2"][/td]
[/tr][tr]
[td][/td][td][/td]
[/tr][/table]

[table border="1" width="50px" height="50px"]
[tr]
[td rowspan="2"][/td][td][/td]
[/tr][tr]
[td][/td]
[/tr]
[/table]

Ajouter une Scroll barre
Par moment, il est possible que vous vouliez que la hauteur de votre tableau soit fixe. Cependant, que faire si jamais les informations prennent trop de place? Et bien, vous pouvez placer une Scroll Barre, pour permettre le défilement dans le tableau. Il faudra rajouter entre les [ td ][ /td ] le code suivant : < div style="height:XXpx; width:XXpx; overflow:auto;" >(Texte et contenu de la cellule ICI)< /div >. Remplacer les XX par la hauteur et la largeur de la cellulu.

Voici une cellule avec 75 px de haut et de large. Trop de texte, donc, une Scroll Barre apparaît.

Code:

[table border="1"]
[tr]
[td]<div style="height:75px; width:75px; overflow:auto;"></div>[/td]
[/tr]
[/table]

Position d'un tableau : Left, Center, Right
De base, la position d'un tableau dans un message sera sur la gauche. Cependant, il est possible que vous vouliez le mettre ailleurs! C'est très simple. Dans le début du code de votre tableau, dans le [ table ], vous allez ajouter un align="center" pour centrer votre tableau, ou un align="right" pour le mettre à droite.

Code:

Tableau centrer :
[table align="center" border="1"]
[tr]
[td][/td]
[td][/td]
[td][/td]
[/tr][tr]
[td][/td]
[td][/td]
[td][/td]
[/tr]
[/table]

Tableau à droite :
[table align="right" border="1"]
[tr]
[td][/td]
[td][/td]
[td][/td]
[/tr][tr]
[td][/td]
[td][/td]
[td][/td]
[/tr]
[/table]

Mettre un Background : Image + Couleur
De base, les tableaux sont transparent. Ainsi, les couleurs du fond de ceux-ci sont toujours ceux des messages. Cependant, vous pouvez personnalisé vos tableaux. J'ai d'ailleurs poster, dans le 1ier spoiler "Source : Images pour vous" des images qui pourront vous servir pour vos fond.

Vous pouvez mettre un fond dans le tableau, mais aussi dans les cellules. Cela offre beaucoup de possibilité. Pour mettre une image au fond du tableau, il suffit d'ajouter dans le [ table ] le code suivant : style="background-image:url(XXX);". Il faudra remplacer le XXX par l'URL de l'image que vous souhaitez utiliser.
Vous pouvez aussi mettre des fonds différents pour chaque cellule. Pour cela, au lieu de mettre le style="background-image:url(XXX);" dans le [ table ], il faudra le mettre dans les [ td ].

Le principe est le même pour les couleurs. Simplement, il faut utiliser un autre code. Comme expliquer plus haut, vous le placer soit dans le [ table ], soit dans le [ td ]. style="background-color:#242424;" remplacer le 242424 par le code Hexadecimal de la couleur que vous désirez. Vous pouvez trouver ces codes sur plusieurs sites internet.

Maintenant, c'est à vous de faire des mélanges et des testes pour que vos tableaux soit originaux!

~ Mettez vous dans le mode d'édition vous permettant de voir le BBCode. C'est primordiale!
~ Sauvegarder TOUJOURS votre travail dans un fichier texte sur votre ordinateur. Forumactif à la vilaine habitude de mélanger votre code. Et puis, garder une sauvegarde de secours, c'est toujours la meilleure marche à suivre!
~ [ tr ][ /tr ] = Une ligne dans un tableau;
~ [ td ][ /td ] = Une colonne dans une ligne;
~ border="0" = Tableau sans ligne pour limiter les contours du tableau et des cellules.
~ border="1" = Tableau avec des lignes, qui délimite les contours du tableau et des cellules. Changer 1 par 2, 3, 4, etc pour changer l'épaisseur de ces lignes.
~ À moins d'utiliser Colspan ou Rowspan, ayez toujours autant de colonnes par lignes. Sinon, vous aurez des bug d'affichage!
~ Si vous utiliser un fond, faite en sorte que votre écriture soit toujours lisible, soit par sa couleur, sa taille, ou pour d'autres raisons. Un tableau illisible est un mauvais tableau.
~ Pour centrer le texte et les images du tableau, vous devrez mettre un [ center ] dans chaque [ td ][ /td ]. On ne peut pas centrer le texte de tout un tableau d'un coup.
~ Petit conseil, pour ne pas oubliez de colonnes : Faites vous toujours une ligne "vide", avec le bon nombres de [ td ][ /td ]. À chaque fois que vous voulez rajouter une ligne, copiez là, et hop! Il ne devrait pas y avoir de problème.