Demetrius Everglade a écrit : 13 oct. 2024, 21:47 Voici mon tutoriel sur comment faire des tableaux avec le bbcode, j'ai essayé de le traduire en français, j'espère que ça va !

Reducio

Basics of Coding

Commençons ! Je ne mettrai pas ces informations en « étapes », puisque vous pouvez les utiliser selon vos besoins.

➤Décider d'une esthétique.

Si vous souhaitez que votre entité soit suffisamment fluide, vous devez d'abord sélectionner une palette de couleurs. Ce schéma restera cohérent tout au long de votre entité pour l'aider à mieux circuler et simplement pour lui donner une meilleure apparence globale. Je suggérerais de prendre le temps de réfléchir aux couleurs qui conviennent suffisamment à vos personnages. Vous pouvez utiliser des sites dédiés à la création de palettes de couleurs à cet effet ou simplement jouer avec les codes de couleurs jusqu'à en trouver un qui vous plaise suffisamment.
Pour Winnie, j'ai utilisé une combinaison de ses couleurs préférées :

█████

Comme son personnage adore les fleurs, j'ai décidé d'utiliser des éléments floraux dans sa page de personnage. Comme elle aime la poésie, j'ai décidé d'en ajouter également des éléments sur sa page de personnage. Dans cet esprit, je peux commencer à créer une page de personnage.

➤Tableaux.

Vous trouverez ci-dessous un exemple de tableau normal avec deux photos.

Les tableaux sont assez faciles à comprendre. Regardons le code de base que le site vous donne lorsque vous essayez d'ajouter une table :

Code : Tout sélectionner

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

La partie [tr] du tableau compte comme des lignes, et pour être franchement honnête, je ne l'utilise jamais. Pourquoi? Parce que le simple fait d'appuyer sur Entrée dans la même case [td] fonctionne tout aussi bien, alors pourquoi s'embêter ?

La section [td] est ce qui nous intéressera. Mettre du texte dans le [td][/td] séparera ce que vous écrivez en colonnes. C'est ainsi que j'ai réussi à mettre les deux photos l'une à côté de l'autre. Hio fait cette chose en redimensionnant automatiquement les photos pour les adapter aux marges. Comme ça :

Je n'ai pas modifié la taille de l'image, Poulard le fait automatiquement. Cela peut être utile, mais peut aussi être ennuyeux si vous essayez d'utiliser à la fois du texte et des images dans un tableau. Cela peut amener la table à faire ceci :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at eleifend nulla. Curabitur ut quam vulputate, aliquet purus quis, tincidunt erat. Duis vel iaculis justo, ac finibus nisl. Proin neque augue, facilisis vel lacus eu, semper interdum mi. Fusce ornare finibus massa. Integer semper porttitor tellus, condimentum malesuada ipsum tempor vitae. Phasellus eget nunc magna. Quisque in pulvinar est, eget porttitor leo. Nulla lobortis facilisis dui, vel pellentesque magna mollis ac. Integer rhoncus, nisl sed congue rutrum, purus risus pellentesque nisi, ac mattis augue est eget orci.

Eh bien, c'est terriblement ennuyeux, n'est-ce pas ? Afin d'étirer l'image, nous devons ajouter du texte à la zone [td][/td] dans laquelle se trouve l'image, c'est là que le symbole '─' est utile. Saviez-vous que vous pouvez rendre la couleur du texte transparente ? WOW NO WAY ! Tout ce que vous avez à faire est d'écrire « transparent » comme code couleur. Ainsi, en utilisant ceci et le symbole «─», nous pouvons créer quelque chose qui pousse un peu le texte sur le côté. Jetez un œil à ce qui suit :

Code : Tout sélectionner

[color=transparent]───────────────────[/color]

Les bordures et séparateurs peuvent également être utilisés sans transparence pour décorer votre code. Je vous montrerai comment procéder plus tard. Pour l'instant, nous pouvons insérer ce code sous la photo et l'utiliser pour agrandir notre photo :

───────────────────

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at eleifend nulla. Curabitur ut quam vulputate, aliquet purus quis, tincidunt erat. Duis vel iaculis justo, ac finibus nisl. Proin neque augue, facilisis vel lacus eu, semper interdum mi. Fusce ornare finibus massa. Integer semper porttitor tellus, condimentum malesuada ipsum tempor vitae. Phasellus eget nunc magna. Quisque in pulvinar est, eget porttitor leo. Nulla lobortis facilisis dui, vel pellentesque magna mollis ac. Integer rhoncus, nisl sed congue rutrum, purus risus pellentesque nisi, ac mattis augue est eget orci.

Code : Tout sélectionner

[table][tr][td][img]/images/upload/ml2r2g0oaq4l.webp[/img]
[color=transparent]───────────────────[/color][/td][td]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at eleifend nulla. Curabitur ut quam vulputate, aliquet purus quis, tincidunt erat. Duis vel iaculis justo, ac finibus nisl. Proin neque augue, facilisis vel lacus eu, semper interdum mi. Fusce ornare finibus massa. Integer semper porttitor tellus, condimentum malesuada ipsum tempor vitae. Phasellus eget nunc magna. Quisque in pulvinar est, eget porttitor leo. Nulla lobortis facilisis dui, vel pellentesque magna mollis ac. Integer rhoncus, nisl sed congue rutrum, purus risus pellentesque nisi, ac mattis augue est eget orci.[/td][/tr][/table]

✫彡 PLUS VOUS EN SAVEZ !

Vous pensez être un maître des tables maintenant ? Attendez! J'ai plus à vous montrer. Saviez-vous que vous pouvez utiliser des guillemets pour donner envie ? Regardons à nouveau le même code mais ajoutons une zone de guillemets.

───────────────────

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at eleifend nulla. Curabitur ut quam vulputate, aliquet purus quis, tincidunt erat. Duis vel iaculis justo, ac finibus nisl. Proin neque augue, facilisis vel lacus eu, semper interdum mi. Fusce ornare finibus massa. Integer semper porttitor tellus, condimentum malesuada ipsum tempor vitae. Phasellus eget nunc magna. Quisque in pulvinar est, eget porttitor leo. Nulla lobortis facilisis dui, vel pellentesque magna mollis ac. Integer rhoncus, nisl sed congue rutrum, purus risus pellentesque nisi, ac mattis augue est eget orci.

Code : Tout sélectionner

[table][tr][td][quote][img]/images/upload/ml2r2g0oaq4l.webp[/img][/quote]
[color=transparent]───────────────────[/color][/td][td][quote]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at eleifend nulla. Curabitur ut quam vulputate, aliquet purus quis, tincidunt erat. Duis vel iaculis justo, ac finibus nisl. Proin neque augue, facilisis vel lacus eu, semper interdum mi. Fusce ornare finibus massa. Integer semper porttitor tellus, condimentum malesuada ipsum tempor vitae. Phasellus eget nunc magna. Quisque in pulvinar est, eget porttitor leo. Nulla lobortis facilisis dui, vel pellentesque magna mollis ac. Integer rhoncus, nisl sed congue rutrum, purus risus pellentesque nisi, ac mattis augue est eget orci.[/quote][/td][/tr][/table]

Notez l’utilisation de zones de guillemets. Ces zones de citation doivent être placées dans les zones [td] pour qu'elles fonctionnent. Vous pouvez même laisser les zones de citation vides pour créer une sorte de jolie petite bordure :

Code : Tout sélectionner

[center][table][tr][td][quote][/quote][/td][td][quote][/quote][/td][td][quote][/quote][/td][td][quote][/quote][/td][td][quote][/quote][/td][td][quote][/quote][/td][td][quote][/quote][/td][td][quote][/quote][/td][td][quote][/quote][/td][td][quote][/quote][/td][td][quote][/quote][/td][/tr][/table][/center]

Nous connaissons tous les tableaux et leur beauté, mais saviez-vous que vous pouvez réellement insérer des tableaux dans des tableaux pour créer une page de personnage avec encore plus de détails ?

C'est fou, mais c'est vrai !

Les tableaux dans les tableaux montrent comment j'ai réussi à faire en sorte que ma page de personnage ressemble à ceci :


Pour placer une table dans une table, vous devez vous assurer que le nouveau code de la table reste dans le code [td][/td] de la table d'origine et que vous le fermez probablement, sinon cela pourrait finir par gâcher tout le code. Déposons un code plus tôt et imaginons-le avec un tableau à l'intérieur d'un tableau.

─────────୨୧───────── ─────────୨୧─────────

─Table One: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at eleifend nulla. Curabitur ut quam vulputate, aliquet purus quis, tincidunt erat. Duis vel iaculis justo, ac finibus nisl. │ │ │ │ │ ୨୧ │ │ │ │ │ Table Two: Fusce ornare finibus massa. Integer semper porttitor tellus, condimentum malesuada ipsum tempor vitae. Phasellus eget nunc magna. Quisque in pulvinar est, eget porttitor leo. Nulla lobortis facilisis dui, vel pellentesque magna mollis ac.

Code : Tout sélectionner

[table][tr][td]─────────୨୧─────────
[table][tr][td][quote][/quote][/td][td][quote][/quote][/td][td][quote][/quote][/td][td][quote][/quote][/td][/tr][/table][quote][img]/images/upload/ml2r2g0oaq4l.webp[/img][/quote][table][tr][td][quote][/quote][/td][td][quote][/quote][/td][td][quote][/quote][/td][td][quote][/quote][/td][/tr][/table]
─────────୨୧─────────[/td][td][quote][table][tr][td][center][color=transparent]─[/color]Table One:[/center][quote][size=75]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at eleifend nulla. Curabitur ut quam vulputate, aliquet purus quis, tincidunt erat. Duis vel iaculis justo, ac finibus nisl.[/size][/quote][/td][td][center][b][size=150]│
│
│
│
│
୨୧
│
│
│
│
│[/size][/b][/center][/td][td][center]Table Two:[/center][quote][size=75]Fusce ornare finibus massa. Integer semper porttitor tellus, condimentum malesuada ipsum tempor vitae. Phasellus eget nunc magna. Quisque in pulvinar est, eget porttitor leo. Nulla lobortis facilisis dui, vel pellentesque magna mollis ac.[/size][/quote][/td][/tr][/table][/quote][/td][/tr][/table]

Vous remarquerez que j'ai utilisé à la fois des séparateurs et des bordures pour décorer mon code. Cela fait partie de ma signature lors du codage, un processus très simple que j'expliquerai ci-dessous.

➤Diviseurs/bordures Unicode.

Maintenant que vous comprenez les tableaux, il est temps de partager mon ultime secret de codage ; symboles Unicode. Ils peuvent être utilisés pour pimenter votre page. Il n’y a qu’une seule règle de base à retenir :

Gras et taille de texte 150.

Pourquoi? Parce qu'au lieu d'obtenir une ligne continue, vous rencontrerez des lacunes (bien que certains ordinateurs rassemblent le code de toute façon, j'ai constaté que la plupart ne le font pas).

Une fois que vous avez compris cela et comment créer des tableaux dans des tableaux... Eh bien, le monde est à vous, mon ami. Vous pouvez rechercher des sites de symboles de texte et jouer pour créer vos propres bordures, mais je partagerai pour vous certains de mes favoris ci-dessous.

DIVISEURS :

»»————-　♡　————-««
➽───────────────❥
┍━━━━━━━♔━━━━━━━┑

┕━━━━━━━♔━━━━━━━┙
┍————/ᐠ｡ꞈ｡ᐟ\ ————┑

┕————(..)(..)————┙
➴➵➶➴➵➶➴➵➶➴➵➶➴➵➶
══✿══╡°˖✧✿✧˖°╞══✿══
♫♪.ılılıll|̲̅̅●̲̅̅|̲̅̅=̲̅̅|̲̅̅●̲̅̅|llılılı.♫♪
· · ─────── ·𖥸· ─────── · ·
◤◢◣◥◤◢◣◥◤◢◣◥◤◢◣◥

LIGNES QUE VOUS POUVEZ UTILISER POUR CRÉER LES VÔTRES :
⸻ ⸺ ─ ━ ╴ ╶ ╶ ╸ ╺ ╺ ⚋ ▬ ⎺⎻⎼⎽ ⋯ ‿︵╼ ╾
▁ ▂ ▃ ▄ ▅ ▆ ▇ █

BORDERS:

]

║ ║ ║ ║ ║ ║

┋ ┋ ┋ ┋

░▓ ░▓ ░▓ ░▓ ░▓ ░▓

█ █ █ █ █ █

││ ││ ││ ││ ││ ││

LINES YOU CAN USE TO MAKE YOUR OWN:
▁ ▂ ▃ ▄ ▅ ▆ ▇ █
▉ ▊ ▋ ▌ ▍ ▎ ▏
╽ ╿
╹ ╻╵ ╷
╭ ╮╰ ╯ ╱ ╲ ╳
╎ ╏┆ ┊┇ ┋
▐ ▕
░ ▒ ▓
▙ ▟ ▛ ▜
⦀ ⦙ ⦚ ⧘ ⧙ ⧚ ⧛