Insertion d'un tableau dans vos messages

Bonjour à tous,

Lorsque vous avez plusieurs informations d'un même type à afficher, il est souvent intéressant de créer un tableau pour mieux les disposer à l'écran.

C'est aussi le cas si on veut organiser l'affichage de photos avec des commentaires.

Voici quelques principes de base qui vous seront utiles et en complément un outil développé par un membre du forum phpBB-fr qui vous permettra d'importer dans votre message un tableau composé sur un tableur.

1ère partie : la composition d'un tableau en BB-code

Les balises (entre crochets) à utiliser sont les suivantes :

Code:

[table] marque le début de votre tableau
[tr] marque le début d'une ligne
[td] marque le début d'une cellule
[/td] marque la fin d'une cellule
[/tr] marque la fin d'une ligne
[/table] marque la fin du tableau

Les informations que vous voulez faire figurer dans le tableau doivent être placées entre les balises de cellule.

Voici l'exemple pour un tableau à deux lignes et 3 colonnes :

Code:

[table]
[tr]
[td]1ère cellule - ligne 1[/td]
[td]2ème cellule - ligne 1[/td]
[td]3ème cellule - ligne 1[/td]
[/tr]
[tr]
[td]1ère cellule - ligne 2[/td]
[td]2ème cellule - ligne 2[/td]
[td]3ème cellule - ligne 2[/td]
[/tr]
[/table]

Résultat

1ère cellule - ligne 1	2ème cellule - ligne 1	3ème cellule - ligne 1
1ère cellule - ligne 2	2ème cellule - ligne 2	3ème cellule - ligne 2

.
Pour améliorer la visibilité, il est intéressant de rajouter des bordures aux cellules du tableau.

Il suffit de compléter les balises avec les instructions suivantes :  style="border: 1px solid; border-collapse:collapse"

border: 1px solid indique qu'on ajoute une bordure d'un pixel d'épaisseur
border-collapse:collapse indique que les bordures des cellules et du tableau sont fusionnées (uniquement dans la balise table)

Voici ce que ça donne :

Code:

[table style="border: 1px solid; border-collapse:collapse"]
[tr style="border: 1px solid"]
[td style="border: 1px solid"]1ère cellule - ligne 1[/td]
[td style="border: 1px solid"]2ème cellule - ligne 1[/td]
[td style="border: 1px solid"]3ème cellule - ligne 1[/td]
[/tr]
[tr style="border: 1px solid"]
[td style="border: 1px solid"]1ère cellule - ligne 2[/td]
[td style="border: 1px solid"]2ème cellule - ligne 2[/td]
[td style="border: 1px solid"]3ème cellule - ligne 2[/td]
[/tr]
[/table]

Résultat

1ère cellule - ligne 1	2ème cellule - ligne 1	3ème cellule - ligne 1
1ère cellule - ligne 2	2ème cellule - ligne 2	3ème cellule - ligne 2

.
Voilà, maintenant vous savez faire un tableau en composant le nombre de colonnes et de lignes dont vous avez besoin.

Vous pouvez aussi être amené à construire un tableau avec une cellule couvrant plusieurs lignes ou plusieurs colonnes.

Il vous faut pour ça ajouter une instruction supplémentaire dans la balise td.

Voici l'exemple d'un tableau dont les deux premières cellules en haut à gauche sont fusionnées. Pour la première ligne, on ajoute l'instruction colspan=2 dans la première balise td et on on supprime la seconde balise td ainsi que son contenu :

Code:

[table style="border: 1px solid; border-collapse:collapse"]
[tr style="border: 1px solid"]
[td style="border: 1px solid" colspan="2"]1ère et 2ème cellules fusionnées - ligne 1[/td]
[td style="border: 1px solid"]3ème cellule - ligne 1[/td]
[/tr]
[tr style="border: 1px solid"]
[td style="border: 1px solid"]1ère cellule - ligne 2[/td]
[td style="border: 1px solid"]2ème cellule - ligne 2[/td]
[td style="border: 1px solid"]3ème cellule - ligne 2[/td]
[/tr]
[/table]

Résultat

1ère et 2ème cellules fusionnées - ligne 1		3ème cellule - ligne 1
1ère cellule - ligne 2	2ème cellule - ligne 2	3ème cellule - ligne 2

.
Notez bien que le nombre de balises td a diminué en raison de la fusion.

Si on avait voulu fusionner les 3 premières cellules, il aurait fallu mettre colspan=3 et supprimer en plus la troisième instruction td. Et ainsi de suite...

Pour faire une opération similaire sur les colonnes et fusionner les deux premières cellules à gauche, il faut utiliser l'instruction rowspan dans la première balise td et supprimer la première balise td de la seconde ligne. Voici ce que ça donne :

Code:

[table style="border: 1px solid; border-collapse:collapse"]
[tr style="border: 1px solid"]
[td rowspan=2 style="border: 1px solid"]1ères cellules - lignes 1 et 2 fusionnées[/td]
[td style="border: 1px solid"]2ème cellule - ligne 1[/td]
[td style="border: 1px solid"]3ème cellule - ligne 1[/td]
[/tr]
[tr style="border: 1px solid"]
[td style="border: 1px solid"]2ème cellule - ligne 2[/td]
[td style="border: 1px solid"]3ème cellule - ligne 2[/td]
[/tr]
[/table]

Résultat

1ères cellules - lignes 1 et 2 fusionnées	2ème cellule - ligne 1	3ème cellule - ligne 1
	2ème cellule - ligne 2	3ème cellule - ligne 2

.
Comme pour l’instruction colspan, on peut utiliser l’instruction rawspan avec un nombre plus élevé de cellules fusionnées.

Voici un exemple pour 3 cellules fusionnées sur un tableau à 4 colonnes :

Code:

[table style="border: 1px solid; border-collapse:collapse"]
[tr style="border: 1px solid"]
[td style="border: 1px solid" colspan="3"]1ère, 2ème et 3ème cellules fusionnées - ligne 1[/td]
[td style="border: 1px solid"]4ème cellule - ligne 1[/td]
[/tr]
[tr style="border: 1px solid"]
[td style="border: 1px solid"]1ère cellule - ligne 2[/td]
[td style="border: 1px solid"]2ème cellule - ligne 2[/td]
[td style="border: 1px solid"]3ème cellule - ligne 2[/td]
[td style="border: 1px solid"]4ème cellule - ligne 2[/td]
[/tr]
[/table]

Résultat

1ère, 2ème et 3ème cellules fusionnées - ligne 1			4ème cellule - ligne 1
1ère cellule - ligne 2	2ème cellule - ligne 2	3ème cellule - ligne 2	4ème cellule - ligne 2

.
On pourrait faire la même chose verticalement avec rowspan=3.

2ème partie - La conversion d'un tableau issu d'un tableur en BBCode

Tout ceci s'avère un peu fastidieux si le tableau est grand.

Heureusement, un membre astucieux du forum phpBB-fr, a développé un script qui permet de récupérer le BBcode d'un tableau préparé par ordinateur sur un tableur.

Le message d'origine est là :

http://forums.phpbb-fr.com/coding-webmastering-securite/sujet194147.html

La méthode est la suivante :

1 - faire une copie des données du tableur

2 - aller sur la page suivante : http://bhep.pktsoftware.com/conversion_tableau_bbcode.php

3 - coller vos données dans la zone texte de gauche

4 - ajouter un titre dans la zone prévue à cet effet en-dessous (facultatif) et cocher les cases 1ère ligne et 1ère colonne = texte normal (si non cochées, il y a génération d'un code non reconnu par le forum)

5 - convertir en BBCode en cliquant le bouton correspondant

6 - copier le résultat qui apparaît dans la zone texte de droite

7 - le coller dans l'éditeur du forum pour créer votre message

8 - vous pouvez modifier le BBCode résultat dans l'éditeur pour l'adapter en fonction de vos besoins, notamment y ajouter l'instruction style="border: 1px solid; border-collapse:collapse"

Voilà, c'est tout est c'est très rapide.

La méthode marche avec n'importe quel type de tableau, quel que soit le logiciel utilisé, même avec un tableau copié d'un site internet dans votre navigateur préféré.

Elle est pas belle la vie ?

Philippe

Merci Philippe. Une petite question(je me doute de la réponse, mais bon) pour ajouter une image on place le lien de l'image dans la cellule et la cellule s'adapte à l'image?

Oui, c'est ça, mais il faut faire attention à ne pas dépasser une taille raisonnable sinon, les modos vont se fâcher...  

Les cellules s'adaptent à la taille du contenu, qu'il soit texte ou image.

Philippe

même pas peur des modos!!!!

Ah, ça c’est une super nouvelle, parce que je m’en vois pour mettre les inscrits du BRM de Nyons. C’est une vrai galère. Je vais essayer de rétablir mon truc bancale.
Bravo 🍾 🎉 au concepteur et merci pour cette judicieuse info
Nico

Merci Nico. N'hésite pas à faire signe si tu as des soucis.

Philippe

Ralevy a écrit:

Merci Nico. N'hésite pas à faire signe si tu as des soucis.

Philippe

Ca marche
Mais faut tout que je refasse !!

La 1re tentative était bof mais la dernière en dessous est bien.

Look

En tout cas merci, c'est nettement plus joli que mon machin foireux




Les corrections vont assez vite à faire finalement, je garde la trame et je fais des copier/coller
J'ai même rajouté la couleur jaune qui crée un espace supplémentaire pour aérer les colones !
Et oui, faut ce qu'il faut

voilà c'est nickel, tu peux regarder sur le BRM de Nyons, c'est tout propre

Merci bien

Nico

Bravo Nico ! T'es au top !

Philippe

bonjour Philippe,

ça progresse mais pas tout à fait fini .
peux tu m'indiquer comment mettre la police en gras ?

merci
@+
Richard

Code:


[/tr]

N°	Prénom	Nom	Pseudo	Adhérent AFV	Modèle Vélo	Hébergement	Commentaire
1	Aldo	Villa	Aldo		xxxxx	Emplacement
1	Denis et Dominique	Lanquetin	booktin		xxxxx	Emplacement
1	Christian et Marie Jo	Crepel	flute		xxxxx	Emplacement
1	Patrick et Martine	Pelade	Pypat et Mymat		xxxxx	Emplacement
1	Bruno	Mouth	brunomouth		xxxxx	Emplacement
1	Luka	xxxx	LUKA		xxxxx	Emplacement
1	Philippe	Renard	phire		xxxxx	Emplacement
1	Ian		Langlais		xxxxx	Emplacement
2	Julien,Stéphanie,Agathe,Adélia	Bellanger	Kmeleon		HP	Emplacement
1	Serges et Chantal	Tourbez	La Boussole		xxxxx	Emplacement
2	xxxxx2	xxxxx2	xxxxxx3		HP	Emplacement

Salut Richard,

C'est comme pour la rédaction d'un message, il suffit d'utiliser les balises b et /b (entourées des crochets) respectivement en début et fin de chaque texte que tu veux mettre en gras.

Bravo pour ton tableau.

Philippe

Ça marche, merci Philippe

Une vraie mère ...

Merci Philippe ; juste une remarque : la syntaxe pour créer ces tableaux est empruntée aux langages html et css (Ces langages sont utilisés dans le développement web).

Bonjour Philippe
Super cette méthode. Sauf que je ne comprends pas comment copier mon tableau Excel. Si je selectionne mes cellues le copies et les colles dans le script ça donne rien. Je ne suis pas doué
Please help!

Salut Stéphane,

Qu'entends-tu par copier dans le script ?

Tu dois suivre la méthode que j'ai préconisée plus haut en utilisant le lien du point 2 :

https://velorizontal.1fr1.net/t24446-insertion-d-un-tableau-dans-vos-messages#592686

Philippe

Merci pour cette réponse.
Mais je ne comprends pas comment copier les données du tableau.
Tu sélectionne les cellules puis copier coller ou y a un autre truc?

Oui, c'est bien comme ça. As-tu essayé ?

Philippe

Oui mais ça ne marche pas.
Mais comment vous copier?


Voila ce que ça donne:

Salut Stéphane,

Apparemment, le BBCode n'est pas configuré comme il faut dans le forum. La modif est du ressort des administrateurs. En attendant, tu peux utiliser la méthode en tête de ce sujet. Il faut remplacer les th par des td et mettre le texte en gras entre les balises.

Je te tiens au courant.

Philippe

Réponse provisoire de l'administrateur :

O'Leave a écrit:

Bonjour,
Il semble possible d'utiliser l'outil dans l'état actuel, pourvu que les lignes du tableau soient modifiées (*) en remplaçant des balises "th" par des "td".

En pratique :

Code:

[table]
[tr style=][th]Case 11[/th]
[th]Case 12[/th]
[th]Case 13[/th]
[/tr]

[tr style=][th]Case 21[/th]
[td]Case 22[/td]
[td]Case 23[/td]
[/tr]
[/table]

devient

Code:

[table]
[tr style=][td]Case 11[/td]
[td]Case 12[/td]
[td]Case 13[/td]
[/tr]

[tr style=][td]Case 21[/td]
[td]Case 22[/td]
[td]Case 23[/td]
[/tr]
[/table]

(*) un éditeur de texte fait cela tout seul ou presque

La suite après archéologie dans la configuration du forum ...
à bientôt.

Philippe