Maisons Sin'Doreis sur le Culte de Rive Noire Index du Forum
Maisons Sin'Doreis sur le Culte de Rive Noire Index du ForumFAQRechercherS’enregistrerConnexion

Tableaux sur le forum

 
Poster un nouveau sujet   Répondre au sujet    Maisons Sin'Doreis sur le Culte de Rive Noire Index du Forum -> Lune-d'Argent -> Taverne de Lune d'Argent
Sujet précédent :: Sujet suivant  
Auteur Message
Laureline
Le Conseil

Hors ligne

Inscrit le: 20 Juin 2016
Messages: 141
Localisation: France
Niveau:
Classe: Mage
Royaume: Cdo, CdT

MessagePosté le: Jeu 22 Sep 2016 - 15:07    Sujet du message: Tableaux sur le forum Répondre en citant

A la demande d'Asmodee, voici un petit cours sur la manière de dessiner des tableaux sur le forum.

1. Le BBCode

Le BBCode est employé sur les forums pour faire la mise en forme. Par exemple pour mettre en gras un mot, on écrira entre deux balises (les machins entre crochets) b.

Code:
Le mot [b]tif[/b] est en gras


Ce qui donne normalement : Le mot tif est en gras. Il existe de nombreuses balises, et la plupart sont mises automatiquement en cliquant sur les boutons de mise en forme lorsque l'on rédige un message. Mais forcément, celles du tableau ne sont pas présentes. Il va donc falloir les écrire soi-même.

2. Qu'est-ce qu'un tableau ?

Pour pouvoir écrire un tableau, il faut comprendre la logique suivante. Tout d'abord, on définira le tableau en lui marquant une balise table. Mais ça tout seul ne sert à rien. Dans un tableau se trouvent des lignes, qui sont délimitées par les balises tr. Et enfin, chaque ligne comprend des cellules (cases) délimitées par les balises td.

Heeeeeeu.... ok ? Mais concrètement je fais quoi ?

Voici un exemple de tableau qui contient 2 lignes et 3 colonnes.

Colonne 1 Ligne 1Colonne 2 Ligne 1Colonne 3 Ligne 1
Colonne 1 Ligne 2Colonne 2 Ligne 2Colonne 3 Ligne 2


Pour faire un tableau comme ceci, voici le code. Pour plus de clarté, j'ai marqué les éléments les uns à la ligne des autres, mais cela n'a pas d'importance puisque le forum remettra tout comme bon lui semble.

Code:
[table]   <--- On définit le début du tableau
   [tr]   <--- Début de la ligne 1
      [td]Colonne 1 Ligne 1[/td]
      [td]Colonne 2 Ligne 1[/td]
      [td]Colonne 3 Ligne 1[/td]
   [/tr]  <--- Fin de la ligne 1
   [tr]   <--- Début de la ligne 2
      [td]Colonne 1 Ligne 2[/td]
      [td]Colonne 2 Ligne 2[/td]
      [td]Colonne 3 Ligne 2[/td]
   [/tr]  <--- Fin de la ligne 2
[/table]  <--- Fin du tableau


Comme vous pouvez le constater, cela revient à écrire de gauche à droite puis de haut en bas le contenu du tableau.

3. La largeur des colonnes

Par défaut, les largeurs des colonnes sont automatiques. Elle s'adaptent à la taille du plus grand contenu de la colonne, dans la limite de place sur la page. Mais parfois, on peut vouloir mettre des largeurs fixes peu importe le contenu. Pour cela, il suffit de rajouter width="XXXX", où XXXX est la largeur en pixels, dans une balise td pour que la colonne entière soit modifiée. Par exemple :

Colonne 1 Ligne 1Colonne 2 Ligne 1Colonne 3 Ligne 1
Colonne 1 Ligne 2Colonne 2 Ligne 2Colonne 3 Ligne 2


Le code est dans ce cas :

Code:
[table] 
   [tr]   
      [td width="200"]Colonne 1 Ligne 1[/td]    <--- 200 pixels de large pour la colonne 1
      [td width="300"]Colonne 2 Ligne 1[/td]    <--- 300 pixels de large pour la colonne 2
      [td width="100"]Colonne 3 Ligne 1[/td]    <--- 100 pixels de large pour la colonne 3
   [/tr] 
   [tr]   
      [td]Colonne 1 Ligne 2[/td]
      [td]Colonne 2 Ligne 2[/td]
      [td]Colonne 3 Ligne 2[/td]
   [/tr]
[/table]


4. Centrer les cellules

Si vous voulez centrer du texte dans une case, il suffit de sélectionner le texte entre deux balises td et de cliquer sur l'option centrer dans les boutons. Cela rajoute simplement la balise center au texte. Il faudra faire cela pour chaque cellule.


5. Fusionner des colonnes et des lignes

La dernière partie de ce cours est sur la fusion de colonnes et lignes. Ceci est tout à fait possible dans un tableau, mais il est important de préciser une information cruciale. Pour ne pas avoir de cases vides, il faut s'assurer qu'il y ait le même nombre de cellules dans chaque ligne. En revanche, fusionner colonnes et lignes change la donne. Voici le tableau précédent avec quelques cellules fusionnées :

Colonne 1 Ligne 1+2
Colonne 2+3 Ligne 1
Colonne 1 Ligne 2
Colonne 2 Ligne 2


Pour mieux comprendre ce qu'il se passe, voici la logique point par point :
- La première cellule (ligne 1 colonne 1) est étalée sur une hauteur de 2 lignes.
- On continue sur la même ligne (ligne 1 colonne 2) qui est étalée sur une largeur de 2 colonnes.
- On comprend qu'il y a en réalité 3 colonnes, mais la première colonne a déjà été complètement remplie, on ne doit donc pas y retoucher
- Notre 2ème colonne à écrire devient donc la première colonne de la ligne 2.
- Il reste enfin la 2ème colonne de la ligne 2 à écrire, qui correspond à la colonne 3 réelle.

Je me doute que cela reste assez confus avec ceci. Ci-dessous se trouve le code. Notez que le centrage horizontal doit être fait manuellement avec les balises center, mais pas l'alignement vertical.

Pour fusionner des lignes, il faut ajouter rowspan="X" dans la balise td, où X est le nombre de lignes fusionnées. Pour fusionner des colonnes, il faut ajouter colspan="X" dans la balise td, où X est le nombre de colonnes fusionnées.

Concernant les largeurs de colonne, si vous spécifiez la largeur d'une colonne fusionnée, le forum gérera automatiquement la largeur des colonnes en-dessous, sauf si vous spécifiez manuellement les largeurs dans l'une des lignes du dessous.

Code:
[table] 
   [tr]   
      [td width="300" rowspan="2"][center]Colonne 1 Ligne 1+2[/center][/td]     <-- Fusion de lignes 1 et 2 pour une largeur de colonne 1 de 300 pixels
      [td colspan="2" width="500"][center]Colonne 2+3 Ligne 1[/center][/td]     <-- Fusion de colonnes 2 et 3 pour une largeur combinée de 500 pixels
   [/tr] 
   [tr]   
      [td width="200"][center]Colonne 1 Ligne 2[/center][/td]                   <-- Ecriture de la 2e colonne réelle pour une largeur de 200 pixels
      [td][center]Colonne 2 Ligne 2[/center][/td]                               <-- Ecriture de la 3e colonne réelle. Sa largeur sera 500 - 200 = 300 pixels
   [/tr]
[/table]

_________________


Revenir en haut
Publicité






MessagePosté le: Jeu 22 Sep 2016 - 15:07    Sujet du message: Publicité

PublicitéSupprimer les publicités ?
Revenir en haut
Montrer les messages depuis:   
Poster un nouveau sujet   Répondre au sujet    Maisons Sin'Doreis sur le Culte de Rive Noire Index du Forum -> Lune-d'Argent -> Taverne de Lune d'Argent Toutes les heures sont au format GMT + 2 Heures
Page 1 sur 1

 
Sauter vers:  

Portail | Index | créer un forum | Forum gratuit d’entraide | Annuaire des forums gratuits | Signaler une violation | Conditions générales d'utilisation
Powered by phpBB © 2001, 2005 phpBB Group
Traduction par : phpBB-fr.com
Modifiés et personnalisés pour ProjetSang,
par Christopher Jorissen et Lodjay.