Tableaux

Découvrez tout ce qu’il faut savoir sur la communauté avant de vous plonger dans la course ! Règles, organisation, suggestions, élections, débats

Tableaux

Messagepar abz » 15 Jan 2017, 21:48

Suite à une suggestion d'ésoJ, vous pouvez dorénavant inclure dans vos messages des tableaux comme celui-ci :

Entête 1Entête 2Entête 3
Cellule 1-1Cellule 1-2Cellule 1-3
Cellule 2-1Cellule 2-2Cellule 2-3
Cellule 3-1Cellule 3-2Cellule 3-3

Pour cela, il faut combiner les bbcodes suivants :
- table représentant le tableau global
- tr représentant une ligne du tableau
- td représentant une cellule d'une ligne de tableau
- th représentant une cellule avec un style différent, généralement utilisé pour les entêtes des colonnes (ligne à fond noir et texte blanc dans l'exemple ci-dessus).
Pour ceux qui connaissent les tables HTML, c'est donc le même principe.

Le texte pour créer le tableau ci-dessus est le suivant :
Code: Tout sélectionner
[table][tr][th]Entête 1[/th][th]Entête 2[/th][th]Entête 3[/th][/tr][tr][td]Cellule 1-1[/td][td]Cellule 1-2[/td][td]Cellule 1-3[/td][/tr][tr][td]Cellule 2-1[/td][td]Cellule 2-2[/td][td]Cellule 2-3[/td][/tr][tr][td]Cellule 3-1[/td][td]Cellule 3-2[/td][td]Cellule 3-3[/td][/tr][/table]

Attention ! Il ne faut pas mettre de retour à la ligne entre les fermetures et ouvertures de ces bbcodes, sinon ces retours à la ligne apparaitront tous avant le tableau. L'exemple suivant causera l'affichage de 4 lignes vides avant le tableau, à cause des retours à la ligne entre la fermeture d'un tr ou d'un td et l'ouverture du suivant, et d'un autre avant la fermeture de la table :
Code: Tout sélectionner
[table][tr][th]Entête 1[/th][th]Entête 2[/th][th]Entête 3[/th][/tr]
[tr][td]Cellule 1-1[/td][td]Cellule 1-2[/td][td]Cellule 1-3[/td]
[/tr][tr][td]Cellule 2-1[/td][td]Cellule 2-2[/td]
[td]Cellule 2-3[/td][/tr]
[/table]

Par contre évidemment vous pouvez mettre des retours à la ligne dans les textes à l'intérieur des cellules td ou th, y compris entre deux bbcodes b et i par exemple ;)
Code: Tout sélectionner
[table][tr][td][b]Cellule[/b]
[i]1-1[/i][/td][/tr][/table]


Par défaut le tableau est aligné à gauche, mais il est possible de le centrer ou de l'aligner à droite en ajoutant "center" ou "right" au bbcode table :
Code: Tout sélectionner
[table=center]...[/table]
[table=right]...[/table]


A l'intérieur des cellules, vous pouvez mettre ce que vous voulez, y compris des bbcodes "center" ou "right" pour centrer ou aligner à droite le contenu de la cellule :
Entête 1
Entête 2
Entête 3
Cellule 1-1
Cellule 1-2
Cellule 1-3
Cellule 2-1
Cellule 2-2
Cellule 2-3
Cellule 3-1
Cellule 3-2
Cellule 3-3

Code: Tout sélectionner
[table=center][tr][th]Entête 1[/th][th][center]Entête 2[/center][/th][th][right]Entête 3[/right][/th][/tr][tr][td]Cellule 1-1[/td][td][center]Cellule 1-2[/center][/td][td][right]Cellule 1-3[/right][/td][/tr][tr][td]Cellule 2-1[/td][td][center]Cellule 2-2[/center][/td][td][right]Cellule 2-3[/right][/td][/tr][tr][td]Cellule 3-1[/td][td][center]Cellule 3-2[/center][/td][td][right]Cellule 3-3[/right][/td][/tr][/table]


Il est également possible de définir une largeur pour une ou plusieurs colonnes en ajoutant un nombre au td ou th correspondant de la première ligne :
Entête 1Entête 2Entête 3
Cellule 1-1Cellule 1-2Cellule 1-3
Cellule 2-1Cellule 2-2Cellule 2-3
Cellule 3-1Cellule 3-2Cellule 3-3

Code: Tout sélectionner
[table][tr][th=250]Entête 1[/th][th]Entête 2[/th][th=100]Entête 3[/th][/tr][tr][td]Cellule 1-1[/td][td]Cellule 1-2[/td][td]Cellule 1-3[/td][/tr][tr][td]Cellule 2-1[/td][td]Cellule 2-2[/td][td]Cellule 2-3[/td][/tr][tr][td]Cellule 3-1[/td][td]Cellule 3-2[/td][td]Cellule 3-3[/td][/tr][/table]
Modifié en dernier par abz le 16 Jan 2017, 22:24, modifié 2 fois.

Avatar de l’utilisateur
abz
Maillot à pois
 
Messages: 3500

Re: Tableaux

Messagepar MayodeBain » 15 Jan 2017, 22:01

Super ajout, merci beaucoup Abz :ok:

Je sais qu'il existe des générateurs de code html à partir de tableaux au format Excel, tu penses que ça pourra servir à construire des tableaux pour ici ?

Avatar de l’utilisateur
MayodeBain
Légende du Gruppetto
 
Messages: 36257

Re: Tableaux

Messagepar abz » 15 Jan 2017, 22:13

MayodeBain a écrit:Je sais qu'il existe des générateurs de code html à partir de tableaux au format Excel, tu penses que ça pourra servir à construire des tableaux pour ici ?

Il faudra forcément modifier le code obtenu, puisque en html c'est des < et > qui sont utilisés à la place des [ et ] ici. Et le générateur risque de mettre des attributs aux tags html qui ne seront pas pris en compte ici (ex : <table style="background: #EEE;">...</table>). Bref ça peut éventuellement faire gagner du temps, mais tu n'auras pas quelque de chose de prêt à être inséré directement dans un post...

Avatar de l’utilisateur
abz
Maillot à pois
 
Messages: 3500

Re: Tableaux

Messagepar Evil » 16 Jan 2017, 07:26

Merci beaucoup abz :ok:

Avatar de l’utilisateur
Evil
Jersey rojo
 
Messages: 6264
Localisation: twitch.tv/evilgaming64

Re: Tableaux

Messagepar rthomazo » 16 Jan 2017, 18:58

Super, merci abz :D

Avatar de l’utilisateur
rthomazo
Champion confirmé
 
Messages: 18205
Localisation: Plus en Bretagne :'(

Re: Tableaux

Messagepar toto » 16 Jan 2017, 18:59

Excellent outil juste l'affichage sur mobile n'est pas hyper adapté (comme les vidéos)

Avatar de l’utilisateur
toto
Jersey rojo
 
Messages: 6291

Re: Tableaux

Messagepar José » 16 Jan 2017, 20:33

Merci beaucoup d'avoir mis en place ça aussi rapidement :love:

Y'a-t'il une possibilité de régler la largeur de la table et des colonnes ?

Faire en sorte que toutes les données soient parfaitement alignées :o

Avatar de l’utilisateur
José
Légende du Gruppetto
 
Messages: 25876

Re: Tableaux

Messagepar abz » 16 Jan 2017, 22:19

ésoJ a écrit:Merci beaucoup d'avoir mis en place ça aussi rapidement :love:

Y'a-t'il une possibilité de régler la largeur de la table et des colonnes ?

Faire en sorte que toutes les données soient parfaitement alignées :o

Ajouté, il suffit d'ajouter un chiffre aux th ou td voulus de la première ligne. Je vais mettre à jour le premier post avec un exemple ;)

toto a écrit:Excellent outil juste l'affichage sur mobile n'est pas hyper adapté (comme les vidéos)

Je n'y peux pas grand chose, c'est le fonctionnement des tables HTML qui est comme ça et ça dépend du contenu du tableau et de la largeur de l'écran.

Avatar de l’utilisateur
abz
Maillot à pois
 
Messages: 3500

Re: Tableaux

Messagepar Tilo » 16 Jan 2017, 22:38

Le spoiler fonctionne si on ne veut pas afficher tout le tableau?

Avatar de l’utilisateur
Tilo
Directeur sportif
 
Messages: 38341
Localisation: la "légende" du forum

Re: Tableaux

Messagepar abz » 16 Jan 2017, 22:51

Tilo a écrit:Le spoiler fonctionne si on ne veut pas afficher tout le tableau?

On ne peut pas mettre autre chose qu'un bbcode table autour d'un bbcode tr, donc pour ça il faut faire 2 tableaux distincts, si j'ai bien compris ce que tu voulais dire.
Mais du coup l'alternance de couleur ne sera pas respectée si le premier tableau a un nombre de ligne paire, et il vaut mieux centrer le tableau et mettre des largeurs fixes aux colonnes ;)

Entête 1Entête 2Entête 3
Cellule 1-1Cellule 1-2Cellule 1-3
Cellule 2-1Cellule 2-2Cellule 2-3
Cellule 3-1Cellule 3-2Cellule 3-3

Cellule 4-1Cellule 4-2Cellule 4-3
Cellule 5-1Cellule 5-2Cellule 5-3
Cellule 6-1Cellule 6-2Cellule 6-3


Code: Tout sélectionner
[table=center][tr][th=200]Entête 1[/th][th=200]Entête 2[/th][th=200]Entête 3[/th][/tr][tr][td]Cellule 1-1[/td][td]Cellule 1-2[/td][td]Cellule 1-3[/td][/tr][tr][td]Cellule 2-1[/td][td]Cellule 2-2[/td][td]Cellule 2-3[/td][/tr][tr][td]Cellule 3-1[/td][td]Cellule 3-2[/td][td]Cellule 3-3[/td][/tr][/table]
[spoiler][table=center][tr][td=200]Cellule 4-1[/td][td=200]Cellule 4-2[/td][td=200]Cellule 4-3[/td][/tr][tr][td]Cellule 5-1[/td][td]Cellule 5-2[/td][td]Cellule 5-3[/td][/tr][tr][td]Cellule 6-1[/td][td]Cellule 6-2[/td][td]Cellule 6-3[/td][/tr][/table][/spoiler]


Par contre si tu voulais dire à l'intérieur d'une cellule là y a pas de soucis ;)

Avatar de l’utilisateur
abz
Maillot à pois
 
Messages: 3500

Re: Tableaux

Messagepar José » 17 Jan 2017, 13:07

Parfait :love:

Dernière requête et non des moindres : est-ce possible d'ajouter un cadre/bordure au tableau ? :angel

Avatar de l’utilisateur
José
Légende du Gruppetto
 
Messages: 25876

Re: Tableaux

Messagepar Akitsuki » 17 Jan 2017, 20:49

Juste parfait ! Testé et adoré :mrgreen:

Ce gain de fou pour le Gruppetto Biathlon manager :love: Je devrais gagner 30 min pour 2 pages a chaque publications :o

Avatar de l’utilisateur
Akitsuki
Champion confirmé
 
Messages: 16376
Localisation: A la recherche de sensation et de kms sur un vélo...

Re: Tableaux

Messagepar abz » 17 Jan 2017, 20:54

ésoJ a écrit:Dernière requête et non des moindres : est-ce possible d'ajouter un cadre/bordure au tableau ? :angel

Bah non, ça serait plus dans le style du forum sinon :angel

Avatar de l’utilisateur
abz
Maillot à pois
 
Messages: 3500

Re: Tableaux

Messagepar Elias » 10 Juin 2017, 15:57

@abz : on pourrait rajouter une fonction qui permettrait de remplir une cellule de tableau par une couleur (autre que le noir de l'en-tête) ? Ca permettrait de faire de jolies choses et ça donnerait encore plus de possibilités concernant les tableaux. :heureux:

Merci.

Avatar de l’utilisateur
Elias
Maillot jaune
 
Messages: 10940
Localisation: Kelliwic'h

Re: Tableaux

Messagepar darth-minardi » 12 Avr 2021, 09:25

Pas de possibilité de fusionner des cellules je suppose :niais:

Avatar de l’utilisateur
darth-minardi
Légende du Gruppetto
 
Messages: 37347
Localisation: WikiPavé

Re: Tableaux

Messagepar Nicetobeout » 18 Mai 2022, 05:53

Hello,
lorsque je poste un tableau, j'ai un espace (environ 10 lignes) qui se créé au dessus du dit tableau.
Comment faire pour le supprimer ? :question:

merci :noel:

Avatar de l’utilisateur
Nicetobeout
Directeur sportif
 
Messages: 1921

Re: Tableaux

Messagepar abz » 18 Mai 2022, 07:07

Nicetobeout a écrit:Hello,
lorsque je poste un tableau, j'ai un espace (environ 10 lignes) qui se créé au dessus du dit tableau.
Comment faire pour le supprimer ? :question:

merci :noel:

abz a écrit:Attention ! Il ne faut pas mettre de retour à la lignes entre les fermetures et ouvertures de ces bbcodes, sinon ces retours à la ligne apparaitront tous avant le tableau. L'exemple suivant causera l'affichage de 4 lignes vides avant le tableau, à cause des retours à la ligne entre la fermeture d'un tr ou d'un td et l'ouverture du suivant, et d'un autre avant la fermeture de la table :
Code: Tout sélectionner
[table][tr][th]Entête 1[/th][th]Entête 2[/th][th]Entête 3[/th][/tr]
[tr][td]Cellule 1-1[/td][td]Cellule 1-2[/td][td]Cellule 1-3[/td]
[/tr][tr][td]Cellule 2-1[/td][td]Cellule 2-2[/td]
[td]Cellule 2-3[/td][/tr]
[/table]

Par contre évidemment vous pouvez mettre des retours à la ligne dans les textes à l'intérieur des cellules td ou th, y compris entre deux bbcodes b et i par exemple ;)
Code: Tout sélectionner
[table][tr][td][b]Cellule[/b]
[i]1-1[/i][/td][/tr][/table]

Avatar de l’utilisateur
abz
Maillot à pois
 
Messages: 3500

Re: Tableaux

Messagepar Nicetobeout » 18 Mai 2022, 21:35

Donc la lecture ça sert réellement :mrgreen:

Merci :love:

Avatar de l’utilisateur
Nicetobeout
Directeur sportif
 
Messages: 1921


18 messages
Retourner vers Vie de la communauté

Qui est en ligne

Utilisateurs parcourant ce forum : Maix et 7 invités