[AIDE] Mettre en forme ses messages avec BBCode - RPG - Poudlard.fr

Retour Répondre

Zachary Winslow

27 avr. 2020

Ce guide a pour objet de vous expliquer toutes les possibilités de mise en forme qui vous sont offertes dans vos messages, à l'aide du langage « BBCode » qui est utilisé sur ce site.

Le BBCode permet d'entourer des mots, phrases ou paragraphes à l'aide de balises délimitées par des crochets, afin que leur soit appliqué le style correspondant.

Ce petit guide vous montrera toutes les possibilités existantes, et pourra s'enrichir au fur et à mesure que de nouvelles options vous seront proposées.

Même si vous êtes un vétéran du site, vous découvrirez sans doute des choses en lisant attentivement ce guide (raccourcis claviers, bbcodes cachés...), notamment car certaines fonctionnalités sont des ajouts récents !

En tous les cas, n'oubliez pas de prévisualiser vos messages avant envoi : c'est toujours le plus efficace pour voir si cela ressemble à ce que vous aviez en tête

N'hésitez pas à vous abonner à ce sujet pour être informés en cas de nouvelles balises disponibles.

Table des matières

Postez vos soucis techniques ici. Pour tout autre besoin, contactez les autres membres de l'équipe concernés.

!

Zachary Winslow

27 avr. 2020

Mise en forme du texte

Texte en gras

Vous pouvez mettre un texte en gras en utilisant les balises suivantes :

Code : Tout sélectionner

Ceci est un [b]texte en gras[/b].

Il est possible de cliquer sur l'icône «» avant de taper le texte ou après l'avoir sélectionné. Vous pouvez également utiliser un raccourci clavier :

alt+b avec Google Chrome, Edge ou Internet Explorer (Windows) ;
maj+alt+b avec Mozilla Firefox (Windows ou Linux) ;
ctrl+alt+b sous macOS.

Le résultat est le suivant :

Ceci est un texte en gras.

Texte en italique

Vous pouvez mettre un texte en italique en utilisant les balises suivantes :

Code : Tout sélectionner

Ceci est un [i]texte en italique[/i].

Il est possible de cliquer sur l'icône «» avant de taper le texte ou après l'avoir sélectionné. Vous pouvez également utiliser un raccourci clavier :

alt+i avec Google Chrome, Edge ou Internet Explorer (Windows) ;
maj+alt+i avec Mozilla Firefox (Windows ou Linux) ;
ctrl+alt+i sous macOS.

Le résultat est le suivant :

Ceci est un texte en italique.

Texte souligné

Vous pouvez souligner un texte en utilisant les balises suivantes :

Code : Tout sélectionner

Ceci est un [u]texte souligné[/u].

Il est possible de cliquer sur l'icône «» avant de taper le texte ou après l'avoir sélectionné. Vous pouvez également utiliser un raccourci clavier :

alt+u avec Google Chrome, Edge ou Internet Explorer (Windows) ;
maj+alt+u avec Mozilla Firefox (Windows ou Linux) ;
ctrl+alt+u sous macOS.

Le résultat est le suivant :

Ceci est un texte souligné.

Texte barré

Vous pouvez barrer un texte en utilisant les balises suivantes :

Code : Tout sélectionner

Ceci est un [s]texte barré[/s].

Il est possible de cliquer sur l'icône «» avant de taper le texte ou après l'avoir sélectionné.

Le résultat est le suivant :

Ceci est un texte barré.

Texte en indice

Vous pouvez mettre un texte en indice avec :

Code : Tout sélectionner

CO[sub]2[/sub]

Il est possible de cliquer sur l'icône «» avant de taper le texte ou après l'avoir sélectionné.

Le résultat est le suivant :

CO₂

Texte en exposant

Vous pouvez mettre un texte en exposant avec :

Code : Tout sélectionner

E = mc[sup]2[/sup]

Il est possible de cliquer sur l'icône «» avant de taper le texte ou après l'avoir sélectionné.

Le résultat est le suivant :

E = mc²

Texte en couleur

Il vous est possible de colorer les textes en n'importe quelle couleur, même si vous êtes bien sûr invités à la modération ! N'oubliez pas que les textes sont faits pour être lus, et doivent donc avant tout rester lisible. Pour ce faire :

Code : Tout sélectionner

Ceci est un [color=#400080]texte en couleur[/color].

Le plus simple est de cliquer sur la flèche à côté de «» puis de cliquer sur l'une des couleurs qui s'affiche sur la palette, avant de taper le texte ou après l'avoir sélectionné.

Les six caractères derrière le # sont le code hexadécimal de la couleur choisie. Vous pouvez trouver sur votre ordinateur ou sur Internet des outils permettant d'obtenir le code de n'importe quelle couleur. Il est alors possible de mémoriser les codes des couleurs qui vous sont les plus utiles.

Le résultat est le suivant :

Ceci est un texte en couleur.

Liste de codes couleurs utilisables avec le nom de la couleur :

Reducio

Liste fournie par Fiona McGaw-Boyer.

Code : Tout sélectionner

[color=Red]Exemple[/color]

Pink
Lightpink
Hotpink
Deeppink
Palevioletred
Mediumvioletred
Lavender
Thistle
Plum
Orchid
Violet
Fuchsia
Magenta
Mediumorchid
Darkorchid
Darkviolet
Blueviolet
Darkmagenta
Purple
Mediumpurple
Mediumslateblue
Slateblue
Darkslateblue
Rebeccapurple
Indigo
Lightsalmon
Salmon
Darksalmon
Lightcoral
Indianred
Crimson
Red
Firebrick
Darkred
Maroon
Orange
Darkorange
Coral
Tomato
Orangered
Gold
Yellow
Lightyellow
Lemonchiffon
Lightgoldenrodyellow
Papayawhip
Moccasin
Peachpuff
Palegoldenrod
Khaki
Darkkhaki
Goldenrod
Darkgoldenrod

Greenyellow
Chartreuse
Lawngreen
Lime
Limegreen
Palegreen
Lightgreen
Mediumspringgreen
Springgreen
Mediumseagreen
Seagreen
Forestgreen
Green
Darkgreen
Yellowgreen
Olivedrab
Olive
Darkolivegreen
Mediumaquamarine
Darkseagreen
Lightseagreen
Darkcyan
Teal
Aqua
Cyan
Lightcyan
Paleturquoise
Aquamarine
Turquoise
Mediumturquoise
Darkturquoise
Cadetblue
Steelblue
Lightsteelblue
Lightblue
Powderblue
Lightskyblue
Skyblue
Cornflowerblue
Deepskyblue
Dodgerblue
Royalblue
Blue
Mediumblue
Darkblue
Navy
Midnightblue
x
x
x
x
x
x

Cornsilk
Blanchedalmond
Bisque
Navajowhite
Wheat
Burlywood
Tan
Rosybrown
Sandybrown
Peru
Chocolate
Saddlebrown
Sienna
Brown
White
Snow
Honeydew
Mintcream
Azure
Aliceblue
Ghostwhite
Whitesmoke
Seashell
Beige
Oldlace
Floralwhite
Ivory
Antiquewhite
Linen
Lavenderblush
Mistyrose
Gainsboro
Lightgray
Silver
Darkgray
Dimgray
Gray
Lightslategray
Slategray
Darkslategray
Black
Transparent
x
x
x
x
x
x
x
x
x
x
x
x

Taille du texte

Vous pouvez changer la taille du texte, en pourcentage par rapport à la taille de base, avec :

Code : Tout sélectionner

Ceci est un [size=125]texte écrit en grand[/size].

Il est possible de cliquer sur l'icône avant de taper le texte ou après l'avoir sélectionné. Les tailles au-dessus de 150 % seront généralement bien trop grosses, et celles sous 50 % non lisibles.

Le résultat est le suivant :

Ceci est un texte écrit en grand.

Revelio (texte caché)

Vous pouvez créer un texte masqué par défaut, qui s'affiche lorsqu'on le survole avec la souris (sur ordinateur) ou qu'on le touche (sur téléphone) avec :

Code : Tout sélectionner

Ceci est un [revelio]texte caché[/revelio].

Il est possible de cliquer sur l'icône «» avant de taper le texte ou après l'avoir sélectionné.

Le résultat est le suivant :

Ceci est un texte caché.

Smileys

Il vous est possible d'ajouter tout un tas de smileys dans vos messages :

Code : Tout sélectionner

Ceci est un smiley : :)

Pour afficher les smileys disponibles, vous pouvez cliquer sur l'icône «» puis cliquer sur le smiley de votre choix. Vous pouvez également afficher ou masquer la liste des smileys grâce à un raccourci clavier :

alt+s avec Google Chrome, Edge ou Internet Explorer (Windows) ;
maj+alt+s avec Mozilla Firefox (Windows ou Linux) ;
ctrl+alt+s sous macOS.

Le résultat est le suivant :

Ceci est un smiley :

Astuce : vous pouvez également utiliser la plupart des émojis dans vos messages.

Postez vos soucis techniques ici. Pour tout autre besoin, contactez les autres membres de l'équipe concernés.

!

Zachary Winslow

27 avr. 2020

Alignement du texte

Les éléments qui suivent s'appliquent à un bloc entier. Cela signifie que vous devez les appliquer dans tout un paragraphe. Il ne faut pas qu'ils soient contenus au sein d'une autre balise (comme le gras, la taille... etc).

Texte aligné à gauche

Vous pouvez aligner un texte à gauche, de façon à ce qu'il ne soit plus justifié :

Code : Tout sélectionner

[left]Ceci est un texte aligné à gauche.[/left]

Il est possible de cliquer sur l'icône «» avant de taper le texte ou après l'avoir sélectionné.

Le résultat est le suivant :

Ceci est un texte aligné à gauche.

Texte centré

Vous pouvez centrer un texte :

Code : Tout sélectionner

[center]Ceci est un texte centré.[/center]

Il est possible de cliquer sur l'icône «» avant de taper le texte ou après l'avoir sélectionné.

Le résultat est le suivant :

Ceci est un texte centré.

Texte aligné à droite

Vous pouvez aligner un texte à droite :

Code : Tout sélectionner

[right]Ceci est un texte aligné à droite.[/right]

Il est possible de cliquer sur l'icône «» avant de taper le texte ou après l'avoir sélectionné.

Le résultat est le suivant :

Ceci est un texte aligné à droite.

Texte justifié

Par défaut, tous les textes sont déjà justifiés sur le site, aussi ce bbcode est normalement inutile, sauf dans des situations particulières. Si tel est le cas :

Code : Tout sélectionner

[justify]Ceci est un texte justifié.[/justify]

Il est possible de cliquer sur l'icône «» avant de taper le texte ou après l'avoir sélectionné.

Le résultat est le suivant :

Ceci est un texte justifié.

Indentations

Vous pouvez ajouter des indentations pour ajouter un espace à gauche d'un bloc de texte. Si besoin, vous pouvez même en ajouter plusieurs :

Code : Tout sélectionner

Ceci est un texte sans indentation.

[indent]Ceci est un texte indenté une fois.[/indent]

[indent][indent]Ceci est un texte indenté deux fois.[/indent][/indent]

[indent][indent][indent]Ceci est un texte indenté trois fois.[/indent][/indent][/indent]

Il est possible de cliquer sur l'icône «» avant de taper le texte ou après l'avoir sélectionné.

Le résultat est le suivant :

Ceci est un texte sans indentation.
Ceci est un texte indenté une fois.

Ceci est un texte indenté deux fois.

Ceci est un texte indenté trois fois.

Postez vos soucis techniques ici. Pour tout autre besoin, contactez les autres membres de l'équipe concernés.

!

Zachary Winslow

27 avr. 2020

Listes

Liste non ordonnée

Vous pouvez créer un liste non ordonnée (avec des tirets) de la façon suivante :

Code : Tout sélectionner

[list]
[*] Premier élément de la liste.
[*] Deuxième élément de la liste.
[/list]

Il est possible de cliquer sur l'icône «» pour créer la liste.

Le résultat est le suivant :

Premier élément de la liste.

Deuxième élément de la liste.

Liste ordonnée

Vous pouvez créer un liste ordonnée (avec une numérotation) de la façon suivante :

Code : Tout sélectionner

[list=1]
[*] Premier élément de la liste.
[*] Deuxième élément de la liste.
[/list]

Il est possible de cliquer sur l'icône «» pour créer la liste.

Le résultat est le suivant :

Premier élément de la liste.

Deuxième élément de la liste.

À la place d'une liste numéroté avec un chiffre, vous pouvez utiliser a, A, i and I. Ainsi, par exemple, vous pouvez utiliser le code suivant :

Code : Tout sélectionner

[list=i]
[*] Premier élément de la liste.
[*] Deuxième élément de la liste.
[/list]

Cela vous donnera :

Premier élément de la liste.

Deuxième élément de la liste.

Postez vos soucis techniques ici. Pour tout autre besoin, contactez les autres membres de l'équipe concernés.

!

Zachary Winslow

27 avr. 2020

Éléments

Images

Vous pouvez afficher des images avec :

Code : Tout sélectionner

[img]files/513834a2fdd5fbd6.jpg[/img]

L'adresse à indiquer entre les balises est le lien de l'image à ajouter.

Il est possible de cliquer sur l'icône «» avant de taper le texte ou après l'avoir sélectionné.

Le résultat est le suivant :

Vous pouvez également adapter la taille de vos images. Pour ce faire, utilisez la balise "image" comme dans le code suivant, où 130 est la largeur et 150 la hauteur maximales de l'image :

Code : Tout sélectionner

[image=130x150]files/513834a2fdd5fbd6.jpg[/image]

Le résultat est le suivant :

Vidéos

Vous pouvez afficher des vidéos hébergées sur Youtube avec :

Code : Tout sélectionner

[youtube]Tx1XIm6q4r4[/youtube]

Le code à indiquer entre les balises est celui qui s'affiche à la fin de l'URL de la vidéo Youtube concernée.

Il est possible de cliquer sur l'icône «» avant de taper le texte ou après l'avoir sélectionné.

Le résultat est le suivant :

Musiques

Tout comme les vidéos, il est possible d'afficher un mini-lecteur pour les musiques des vidéos hébergées sur Youtube avec :

Code : Tout sélectionner

[music]Tx1XIm6q4r4[/music]

Le code à indiquer entre les balises est celui qui s'affiche à la fin de l'URL de la vidéo Youtube concernée.

Il est possible de cliquer sur l'icône «» avant de taper le texte ou après l'avoir sélectionné.

Le résultat est le suivant :

Icônes

Vous pouvez utiliser les icônes utilisées par le site avec :

Code : Tout sélectionner

[icon]symbol[/icon]

La liste des symboles disponibles est la suivante :

: address-book-r
: address-book-s
: address-card-r
: align-center-s
: align-justify-s
: align-left-s
: align-right-s
: angle-double-left-r
: angle-double-right-r
: angle-left-r
: angle-right-r
: arrow-left-s
: at-r
: birthday-cake-r
: bold-s
: books-s
: books-r
: book-spells-r
: bell-s
: bell-r
: briefcase-s
: bullhorn-r
: caret-right-s
: caret-down-s
: car-side-r
: cauldron-r
: chart-line-s
: check-r
: check-square-r
: circle-r
: circle-s
: clock-r
: cog-s
: comment-s
: comment-r
: comments-r
: compass-r
: duck-r
: envelope-r
: envelope-open-r
: exclamation-triangle-r
: external-link-square-s
: external-link-square-r
: eye-r
: eye-slash-s
: feather-alt-s
: feather-alt-r
: fill-drip-s
: film-s
: filter-r
: frog-s
: gavel-s
: golf-ball-r
: graduation-cap-s
: hashtag-s
: hat-wizard-s
: heart-s
: heart-r
: hearth-l
: key-s
: hat-witch-r
: image-s
: inbox-in-r
: inbox-out-r
: inbox-r
: italic-s
: indent-s
: info-circle-r
: list-s
: list-ol-s
: link-s
: lock-alt-r
: map-pin-r
: map-s
: map-signs-r
: map-marker-alt-r
: mask-s
: minus-r
: music-alt-s
: paper-plane-r
: pencil-s
: pen-fancy-s
: pen-fancy-r
: plus-r
: puzzle-piece-r
: question-s
: quidditch-r
: quote-s
: random-r
: reply-s
: reply-all-s
: save-r
: scroll-old-s
: scroll-old-r
: share-r
: share-s
: search-s
: search-r
: shopping-basket-s
: smile-beam-r
: sliders-v-r
: sparkles-s
: seedling-r
: sparkles-r
: square-r
: sign-out-alt-s
: skull-r
: sort-alpha-down-r
: spider-r
: stamp-s
: star-s
: star-r
: strikethrough-s
: subscript-s
: superscript-s
: table-s
: telescope-r
: text-size-s
: times-r
: trash-alt-r
: trophy-s
: trophy-r
: underline-s
: user-s
: wand-magic-r
: wand-s

Postez vos soucis techniques ici. Pour tout autre besoin, contactez les autres membres de l'équipe concernés.

!

Zachary Winslow

27 avr. 2020

Liens et références

Liens

Vous pouvez créer un lien vers une autre page du site, ou vers un autre site, avec :

Code : Tout sélectionner

Ceci est un [url=https://www.poudlard.fr/]lien[/url].

Il est possible de cliquer sur l'icône «» avant de taper le texte ou après l'avoir sélectionné. Indiquez alors l'URL dans la boîte de dialogue qui s'affiche.

Le résultat est le suivant :

Ceci est un lien.

Notez que tous les liens ne sont pas fonctionnels pour l'ensemble des utilisateurs. Pour obtenir un lien universel utilisable par tous les joueurs, le mot "start" ne doit par exemple pas figurer dans l'adresse url copiée. Vous trouverez sous reducio plusieurs méthodes pour créer des liens utilisables par tous.

Reducio

Comment fournir le lien d'un post

Pour cela il faut cliquer à cet endroit (en rouge)

Reducio

Puis copier l'URL présent dans la barre d'URL (en bleu)

Reducio

Récupérer le lien direct vers un post

Il vous est peut-être déjà arrivé en tant que joueur de fournir un lien et que la personne qui le reçoit vous dise qu'il ne renvoyait pas vers votre post mais celui d'un autre joueur.
Cela est dû au fait que PFR génère 2 types de liens (sans qu'on sache vraiment pourquoi).

Certains prennent en compte les posts supprimés. Ce sont ceux qui ont un "start=...". Comme les modérateurs voient les posts supprimés, c'est ce qui peut poser problème. Que ça soit un modérateur qui fournisse un lien en "start=..." à un joueur non modérateur ou l'inverse.

Pour éviter cela, voici ce que vous pouvez faire:

Cliquez sur l'enveloppe comme pour envoyer un hibou.

Reducio
Tout en haut du message se trouve le lien vers le post

Reducio
Copiez ce lien

Modifier manuellement l'URL

Pour ceux qui sont plus à l'aise et n'ont pas peur de faire une modification directe de l'URL voici une URL de départ:
https://poudlard.fr/viewtopic.php?t=39995&start=10#p3128427

Cette URL prend en compte les posts supprimés, c'est celle qui peut poser problème.

Il faut la modifier en ceci
https://poudlard.fr/viewtopic.php?p=3128427#p3128427

La différence entre les deux se trouve entre les parties marron et jaune:

Reducio

Pour procéder à la modification, on copie la partie jaune (sans le #), on la colle à la place de la partie bleue (entre le ? et le #) puis on ajoute un = entre le p et le nombre à sept chiffres.

Explications rédigées par Diarmuid O'Belt

Ancres

Les ancres sont des références invisibles, à placer quelque part dans un texte, ce qui permet ensuite de faire un lien qui pointe dans cette partie de la page. C'est utile notamment lorsque vous souhaitez faire une table des matières.

Code : Tout sélectionner

Ceci est une ancre : rien ne va s'afficher après ça. [ref]monancre[/ref]

Il est possible de cliquer sur l'icône «» avant de taper le texte ou après l'avoir sélectionné.

Le résultat est le suivant :

Ceci est une ancre : rien ne va s'afficher après ça.

Il suffit alors de créer un lien vers mapage/#monancre pour que ceux qui cliquent dessus soient redirigés là où vous avez placé l'ancre. Evidement, chaque référence doit être unique : il ne faut pas utiliser deux fois la même sur une seule page, sans quoi le lien redirigera uniquement vers la première.

Postez vos soucis techniques ici. Pour tout autre besoin, contactez les autres membres de l'équipe concernés.

!

Zachary Winslow

27 avr. 2020

Autres blocs

Citations

Vous pouvez faire une citation (ou plus largement distinguer un texte) :

Code : Tout sélectionner

[quote]Ceci est une citation.[/quote]

Il est possible de cliquer sur l'icône «» avant de taper le texte ou après l'avoir sélectionné.

Le résultat est le suivant :

Ceci est une citation.

Vous pouvez ajouter un auteur avec le code suivant :

Code : Tout sélectionner

[quote=Zachary Winslow]Ceci est une citation d'un grand homme.[/quote]

Le résultat est le suivant :

Zachary Winslow a écrit :Ceci est une citation d'un grand homme.

Enfin, il suffit de cliquer sur l'icône «» à droite d'un message existant pour facilement le citer, avec un lien vers l'auteur et le message concerné.

Reducio

Vous cacher faire un bloc de texte, qui s'affiche au clic, avec la balise:

Code : Tout sélectionner

[reducio]Ceci est un texte caché.[/reducio]

Il est possible de cliquer sur l'icône «» avant de taper le texte ou après l'avoir sélectionné.

Le résultat est le suivant :

Reducio

Ceci est une text caché.

Postez vos soucis techniques ici. Pour tout autre besoin, contactez les autres membres de l'équipe concernés.

!

Quatrième année, Poufsouffle

24 sept. 2025

Mise en forme avancée avec des tableaux

Il est conseillé de visualiser ce message sur ordinateur, l'édition de tableaux étant compliquée sur téléphone. Un encart dédié de conseils pour l'accessibilité des tableaux sur téléphone est présent à la fin.

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 Poudlard.fr ne prend pas en compte le code de cette option.

Présentation des Balises

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.

Basiquement, à 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, en veillant bien à ce que chaque ligne comporte le même nombre de cellules (le même nombre de balises « td »). Chaque ligne d'un même tableau doit en effet contenir le même nombre de colonnes.

L'Icône Tableau de la barre de BBCode

Il est possible de cliquer sur l'icône «» pour inclure un tableau sur votre page. Deux boîtes de dialogue s'ouvriront successivement. La première vous demande d'indiquer le nombre de lignes de votre tableau; la seconde vous demande d'indiquer le nombre de colonnes. Par exemple, si vous indiquez une ligne et une colonne, le code ci-dessous apparaîtra:

Code : Tout sélectionner

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

On reconnaît 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.

Ajouter du texte et du BBCode sur votre tableau

Une fois le code créé, il ne vous reste plus qu'à remplir les balises « td » avec le contenu que vous souhaitez intégrer. Bien évidemment, toutes les fonctions BBCode habituellement possible le sont dans un tableau, mais gardez à l'esprit que la place disponible sera bien plus petite pour vos mises en page.

Voici par exemple un tableau d'une ligne et quatre colonnes donnant quatre fiches d'informations avec un titre, une image, des capacités et leur valeur ainsi qu'un texte descriptif.

Reducio

Code : Tout sélectionner

[table]
[tr]
[td][quote][quote][center][b][i]Lorem Ipsum[/i][/b][/center][/quote]
[center][img]/files/77120e8a6777ea34.png[/img][/center]
[icon]wand-magic-r[/icon] | [i]Valeur[/i]
[icon]sparkles-s[/icon] | [i]Valeur[/i]
[justify][i]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.[/i][/justify][/quote][/td]
[td][quote][quote][center][b][i]Lorem Ipsum[/i][/b][/center][/quote]
[center][img]/files/77120e8a6777ea34.png[/img][/center]
[icon]wand-magic-r[/icon] | [i]Valeur[/i]
[icon]sparkles-s[/icon] | [i]Valeur[/i]
[justify][i]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.[/i][/justify][/quote][/td]
[td][quote][quote][center][b][i]Lorem Ipsum[/i][/b][/center][/quote]
[center][img]/files/77120e8a6777ea34.png[/img][/center]
[icon]wand-magic-r[/icon] | [i]Valeur[/i]
[icon]sparkles-s[/icon] | [i]Valeur[/i]
[justify][i]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.[/i][/justify][/quote][/td]
[td][quote][quote][center][b][i]Lorem Ipsum[/i][/b][/center][/quote]
[center][img]/files/77120e8a6777ea34.png[/img][/center]
[icon]wand-magic-r[/icon] | [i]Valeur[/i]
[icon]sparkles-s[/icon] | [i]Valeur[/i]
[justify][i]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.[/i][/justify][/quote][/td]
[/tr]
[/table]

La résultat est le suivant:

Lorem Ipsum

| Valeur
| Valeur

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.

Lorem Ipsum

| Valeur
| Valeur

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.

Lorem Ipsum

| Valeur
| Valeur

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.

Lorem Ipsum

| Valeur
| Valeur

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.

Modification ultérieure du tableau

Une fois votre tableau créé, et si vous vous sentez à l'aise, il est tout à fait possible de l'améliorer et l'agrandir ultérieurement, en rajoutant des balises « tr » et « td » là où c'est nécessaire (nouvelle ligne ou nouvelle cellule).

Tableaux plus complexes & Conseils

Après un peu de pratique et une fois le principe de base des tableaux bien compris, il est possible de réaliser des tableaux plus complexes.

Premièrement, n'oubliez pas de justifier manuellement à l'aide de la balise « Justify ». Si la justification est automatique lors de la publication d'un message normal sur le site, elle ne l'est plus dès lors qu'un texte est publié au sein d'un tableau.

Lors de la publication d'un tableau, la largeur des cellules est ajustée automatiquement en fonction du contenu de chaque cellule.

Il vous est possible de forcer la largeur des cellules en ajoutant par exemple une image à l'aide de la balise « Image » qui force une taille de pixels spéciale pour une image. En augmentant la taille d'une image, celle-ci paraîtra plus grande et diminuera la taille d'un texte sur une cellule adjacente. Inversement, un texte prendra plus de place si vous diminuez la taille de l'image sur la cellule adjacente.

Toujours dans la même idée de forcer la taille des cellules, l'ajout d'un texte transparent, à l'aide de la balise couleur « transparent » peut aider à ajuster la taille d'une cellule puisque le tableau prendra en compte cet élément, bien qu'invisible, pour calibrer la largeur des cellules.

Il n'existe pas de marge entre le contenu de deux cellules. Parfois, une image et un texte dans une cellule adjacente se retrouvent collées et gênent la lecture du texte. Il est possible d'ajouter une balise pour indenter le texte si ce dernier est à droite de l'image. Dans les deux cas (texte à droite ou à gauche de l'image), il est possible de rajouter une cellule « fantôme » qui contient un seul caractère transparent entre les deux cellules pour créer un petit écart qui rendra la lecture plus agréable.

Il n'est pas possible d'indiquer un nombre différent de cellules par lignes; le tableau doit avoir le même nombre de colonnes sur toutes ses lignes. Il est possible de faire une mise en page alternative en incluant un tableau dans un autre.

Reducio

Code : Tout sélectionner

[table]
[tr]
[td][quote]Ceci est une cellule.[/quote][/td]
[/tr]
[tr]
[td][table]
[tr]
[td][quote]Ceci est aussi une cellule.[/quote][/td]
[td][quote]Bonjour, je suis une cellule de tableau![/quote][/td]
[/tr]
[/table][/td]
[/tr]
[tr]
[td][table]
[tr]
[td][quote]Ceci est la cellule d'un tableau inclus dans la cellule d'un autre tableau.[/quote][/td]
[td][quote]Ceci est une cellule.[/quote][/td]
[td][quote]Encore une cellule.[/quote][/td]
[td][quote]C'est la dernière cellule![/quote][/td]
[/tr]
[/table][/td]
[/tr]
[/table]

Ce qui donnera :

Reducio

Ceci est une cellule.

Ceci est aussi une cellule.

Bonjour, je suis une cellule de tableau!

Ceci est la cellule d'un tableau inclus dans la cellule d'un autre tableau.

Ceci est une cellule.

Encore une cellule.

C'est la dernière cellule!

Accessibilité des tableaux sur téléphone

Par définition, les tableaux ne sont pas faits pour être visualisés sur téléphone. Ils prennent vite de la place en largeur et peuvent donc dépasser de l'espace dédié pour le texte, et au final ne pas être lisibles sur les arrières-plans sombres du site. Ils peuvent également parfois cacher certains boutons. Dans le meilleur des cas et si votre message est destiné à l'ensemble du site, évitez d'utiliser des tableaux et si c'est absolument nécessaire, n'hésitez pas à écrire votre texte brut en reducio sous votre tableau.

Un écran de téléphone fait en moyenne un peu plus de 300 pixels de large; afin d'être le plus agréable possible sur téléphone, essayez d'arranger votre tableau et vos images afin qu'elles ne dépassent pas cette largeur butoir, auquel cas le tableau dépassera du fond parchemin.

Mise à jour : 27/09/2025

Mael Chassin, Poufsouffle, joueur professionnel d'échecs sorciers

deuxième joueur du Royaume-Uni aux échecs sorciers

Retour Répondre