Bonjour.
Puisque les tableaux sont un peu plus complexes à apprendre que les balises simples de mise en forme ou d'insertion de lien, voici un tuto pour vous apprendre à créer un tableau. Vous verrez, c'est très utile pour beaucoup de choses, comme par exemple, faire un message sur 2 colonnes, faire un tableau de classement, faire un tableau des statistiques d'un perso dans un RPG, créer un aperçu de l'index de votre forum sur votre portail, etc.
Tout d'abord, pour montrer le code logique, voici un exemple de tableau de 2 colonnes et de 2 rangées.
- Code:
-
<table>
<tr>
<td>Colonne 1</td>
<td>Colonne 2</td>
</tr>
<tr>
<td>Colonne 1</td>
<td>Colonne 2</td>
</tr>
</table>
Vous devez sûrement vous demander "Kesséça c'te code-là???" Bon, j'explique :
<table> : Balise ouvrante pour commencer un tableau
</table> : Balise fermante pour terminer un tableau
<tr> : Balise ouvrante pour commencer une ligne
</tr> : Balise fermante pour terminer une ligne
<td> : Balise ouvrante pour commencer le contenu d'une cellule
</td> : Balise fermante pour terminer une cellule
C'est entre les balise <td> et </td> que vous y mettez votre contenu (texte, image, etc.)
Vous captez?
Alors, on passe aux tableaux plus avancés en indiquant les paramètres que vous pouvez utiliser dans la balise <table> pour modifier l'apparence de tout le tableau.
border : Épaisseur de la bordure en pixels
cellpadding : Marge en pixels entre les bords des cellules et leur contenu
cellspacing : Espacement en pixels entre les cellules
bgcolor : Couleur de fond pour tout le tableau
background : Image de fond pour tout le tableau
height : Hauteur du tableau en pixels ou en %
width : Largeur du tableau en pixels ou en %
bordercolor : Couleur de la bordure (ne mettez pas ce paramètre si le paramètre border est à 0 )
class : Pour insérer une classe afin de changer l'apparence du tableau avec le CSS. Ce paramètre est le moins évident à maîtriser, puisque ça demande un certain niveau de connaissance en CSS.
Vous pouvez également ajouter des paramètre dans les balises <td> pour ne modifier l'apparence que d'une cellule :
bgcolor : Couleur du fond de la cellule
height : Hauteur de la cellule en pixels ou en % (attention : les cellules d'une même rangée doivent avoir la même valeur)
width : Largeur de la cellule en pixels ou en % (attention : les cellules d'une même colonne doivent avoir la même valeur)
align : Alignement horizontal du contenu ("left", "center" ou "right")
valign : Alignement vertical du contenu ("top", "center" ou "bottom")
class : Pour insérer une classe afin de changer l'apparence du tableau avec le CSS. Ce paramètre est le moins évident à maîtriser, puisque ça demande un certain niveau de connaissance en CSS.
colspan : Permet à une cellule de faire la largeur de 2 colonnes ou plus (Attention : Lorsque vous utilisez ce paramètre, vous devez retrancher dans votre rangée le nombre de cellule correspondant à la valeur donnée au paramètre colspan, moins une. Par exemple, si vous mettez "3", retranchez 2 cellules dans votre rangée.)
rowspan : Permet à une cellule de faire la hauteur de 2 rangées ou plus (Attention : Lorsque vous utilisez ce paramètre, vous devez retrancher dans votre colonne le nombre de cellules correspondant à la valeur donnée au paramètre rowspan, moins une. Par exemple, si vous mettez "4", retranchez 3 cellules dans votre colonne)
Puis-je faire un tableau dans un post?Oui, c'est tout à fait possible, mais le HTML doit être autorisé dans la configuration générale de votre forum, ainsi que dans votre profil, ainsi que dans ceux des membres, afin que tout le monde puissent voir le tableau au lieu de son code-source.
Mais il est TRÈS IMPORTANT de NE PAS LAISSER de sauts de lignes ou d'espaces entre les balises à l'extérieur des cellules, afin de ne pas vous retrouver avec un grand espace vide au dessus de votre tableau!
N'hésitez pas à user du bouton "Prévisualisation" pour voir le résultat afin de corriger la moindre erreur dans une balise afin que l'affichage soit nickel, sans aucune cellule qui sort du tableau, avant d'envoyer.
Voilà, c'est tout!
merci !!
