Vous n'êtes pas vraiment doué en informatique, et vous voudriez que votre texte soir un peu plus agréable à voir qu'un vulgaire pavé sur un fond marron ? Ce sujet va vous aider à mettre en forme vos posts.
1. Les tableaux
• Les tableaux, c'est beau, c'est joli, et ça permet d'encadrer son texte d'une chouette manière. Voici quelques codes pour les créer et les personnaliser facilement.
Pour insérer un tableau et pouvoir le personnifier au maximun, il faut utiliser le code :
- Code:
-
[table][tr][td]Case n°1[/td][td]Case n°2[/td][/tr][tr][td]Case n°3[/td][td]Case n°4[/td][/tr][/table]
- Citation :
Case n°1 | Case n°2 |
Case n°3 | Case n°4 |
(Si vous ne voyez pas les traits du tableau, c'est normal, pour le moment, ne vous inquiétez pas)
Ceci est le code de base. Il fonctionne d'une manière très simple : TABLE et TBODY sont les balises qui délimitent votre tableau, TR marque une nouvelle ligne de votre tableau et TD une nouvelle case sur cette ligne. Les balises sont fermées après chaque case. Vous pouvez ainsi multiplier les lignes et les colonnes à votre guise.
Ensuite, vous pouvez rajouter des éléments pour embellir votre tableau.
Mettre un fond
Pour mettre un fond à votre tableau, nous allons agir sur la partie du code TABLE.
Pour l'exemple, je choisis de mettre cette image en fond, ou un fond blanc (code ''FFFFFF'')
Pour rajouter un fond avec une couleur unie,
Il faut rajouter le code bgcolor="FFFFFF" à la balise table
Ici, avec la couleur choisie, ça donne :
- Code:
-
[table bgcolor="FFFFFF"][tr][td]Case n°1[/td][td]Case n°2[/td][/tr][tr][td]Case n°3[/td][td]Case n°4[/td][/tr][/table]
- Citation :
Case n°1 | Case n°2 |
Case n°3 | Case n°4 |
La couleur est modifiable à l'infini ; il suffit de rentrer un code hexadécimal différent pour la changer, à la place de FFFFFF. Liste des codes hexadécimaux ici.
Pour rajouter un fond avec une image
Il faut rajouter le code background="http://wolpeper.com/ciel-ete-vendee.JPG" à la balise table
Ici, avec l'image choisie, ça donne :
- Code:
-
[table background="http://wolpeper.com/ciel-ete-vendee.JPG"][tr][td]Case n°1[/td][td]Case n°2[/td][/tr][tr][td]Case n°3[/td][td]Case n°4[/td][/tr][/table]
- Citation :
Case n°1 | Case n°2 |
Case n°3 | Case n°4 |
L'image est modifiable à l'infini ; pour la changer, il suffit de rentrer l'adresse URL d'une autre image.
Note : Il est ainsi possible de modifier la couleur d'une seule cellule en conséquence, en rajoutant le code non pas à la balise table, mais à la balise TD qui correspond à la case de votre choix.
Définir une bordure
Pour définir une bordure, il faut rajouter un code dans l'entête ''TABLE''.
Vous pouvez utiliser trois codes : cellspacing définit l'espace entre les différentes bordures du tableau;
border définit la largeur de la bordure ;
bordercolor définit la couleur de cette bordure.
- Code:
-
[table border="2" bordercolor="E6FE30" cellspacing="5"][tr][td]Case n°1[/td][td]Case n°2[/td][/tr][tr][td]Case n°3[/td][td]Case n°4[/td][/tr][/table]
- Citation :
Case n°1 | Case n°2 |
Case n°3 | Case n°4 |
(La bordure extérieure en relief est normale)
Régler la largeur et la hauteur du tableau
Pour régler la hauteur et la largeur du tableau, il faut utiliser les codes Width et Height. Leur valeur peut se régler de deux manières différentes : en % (% par rapport à la page), ou en pixel, sachant que la largeur du forum est légèrement inférieure à 800 pixel.
Il sont ajoutés au code TABLE.
- Code:
-
[table height="200px" width="700px"][tr][td]Case n°1[/td][td]Case n°2[/td][/tr][tr][td]Case n°3[/td][td]Case n°4[/td][/tr][/table]
- Citation :
Case n°1 | Case n°2 |
Case n°3 | Case n°4 |
Note : Il est ainsi possible de modifier la taille d'une seule cellule en conséquence, en rajoutant le code non pas à la balise table, mais à la balise TD qui correspond à la case de votre choix.
Choisir l'alignement à l'intérieur du tableau
Pour régler l'alignement à l'intérieur du tableau, il faut ajouter dans la partie TABLE plusieurs codes :
Valign=top(centré en haut), middle(centré au milieu) ou bottom (centré en bas) définit l'alignement vertical à l'intérieur des cellules.
Align=left(gauche) ou right(droite) ou center(centrer) ou justify(justify) pour régler l'alignement horizontal du texte. En revanche, il faut l'ajouter dans les cellules TR ou TD ; l'ajouter dans la partie TABLE reviendrait à définir son alignement face à la page.
- Code:
-
[table valign="middle" ; border="1"][tr][td align="center"]Case n°1[/td][td]Case n°2[/td][/tr][tr][td]Case n°3[/td][td]Case n°4[/td][/tr][/table]
Note : Il est ainsi possible de modifier l'alignement d'une seule cellule en conséquence, en rajoutant le code non pas à la balise table, mais à la balise TD qui correspond à la case de votre choix.
Donner un titre à son tableau
Pour donner un titre à son tableau, il faut insérer une balise CAPTION entre la balise TABLE et la balise TBODY.
- Code:
-
[table border="1"]Légende[tr][td]Case n°1[/td][td]Case n°2[/td][/tr][tr][td]Case n°3[/td][td]Case n°4[/td][/tr][/table]
- Citation :
LégendeCase n°1 | Case n°2 |
Case n°3 | Case n°4 |
Fusionner des cellules
Deux codes, Rowspan et colspan, insérés dans la balise TD concernée, permettent respectivement que la cellule s'étende sur plusieurs lignes ou colonne (le numéro correspond au nombre de cellule sur lesquelles doit s'établir la cellule courante, 1 étant le numéro de la cellule elle-même)
- Code:
-
[table border="1"][tr][td rowspan="2"]Case n°1[/td][td]Case n°2[/td][/tr][tr][td]Case n°3[/td][/tr][/table]
- Citation :
(...) La suite arrive !