Le monde des Blancas
 
AccueilPortailCalendrierFAQRechercherS'enregistrerMembresGroupesConnexion

Partagez | 
 

 Tutorial sur les tableaux HTML

Aller en bas 
AuteurMessage
smach34
Il calabrese
Il calabrese
avatar

Masculin
Nombre de messages : 3824
Age : 37
Localisation : Teyran Beach
Date d'inscription : 26/02/2006

MessageSujet: Tutorial sur les tableaux HTML   Mer 30 Mai - 17:12

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!

_________________


Dernière édition par le Ven 8 Juin - 18:11, édité 1 fois
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://alaska.blogg.org/
contexte
TEKNISHUN
TEKNISHUN
avatar

Masculin
Nombre de messages : 2725
Age : 37
Localisation : monpellier
Date d'inscription : 26/02/2006

MessageSujet: Re: Tutorial sur les tableaux HTML   Mer 30 Mai - 19:45

ça ça va me servir my friend Wink merci !!

_________________
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
smach34
Il calabrese
Il calabrese
avatar

Masculin
Nombre de messages : 3824
Age : 37
Localisation : Teyran Beach
Date d'inscription : 26/02/2006

MessageSujet: Re: Tutorial sur les tableaux HTML   Jeu 31 Mai - 13:24

J'attends de voir ca alors Very Happy

_________________
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://alaska.blogg.org/
soso
la maitresse d'ecole
la maitresse d'ecole
avatar

Nombre de messages : 337
Age : 33
Date d'inscription : 01/02/2007

MessageSujet: Re: Tutorial sur les tableaux HTML   Ven 8 Juin - 18:19

on attend toujours d'ailleurs ....

:tusors:

_________________
L'essentiel est invisible pour les yeux et tout va pour le mieux
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
contexte
TEKNISHUN
TEKNISHUN
avatar

Masculin
Nombre de messages : 2725
Age : 37
Localisation : monpellier
Date d'inscription : 26/02/2006

MessageSujet: Re: Tutorial sur les tableaux HTML   Sam 9 Juin - 3:17

ben j ai lache mon compte et le forum
c est finit les mercenaires ...

_________________
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
smach34
Il calabrese
Il calabrese
avatar

Masculin
Nombre de messages : 3824
Age : 37
Localisation : Teyran Beach
Date d'inscription : 26/02/2006

MessageSujet: Re: Tutorial sur les tableaux HTML   Sam 9 Juin - 15:03

Tu peux t'en servir ici aussi mon seb Smile

_________________
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://alaska.blogg.org/
Contenu sponsorisé




MessageSujet: Re: Tutorial sur les tableaux HTML   

Revenir en haut Aller en bas
 
Tutorial sur les tableaux HTML
Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» Petit tutorial pour Gimp
» Conseils pour créer une skin avec pixia[tutorial]
» Tutorial : la photo de figurines
» BB Code : les tableaux en une lecon
» [Tutorial] Se créer un RP

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Blanca y negro :: Géneralités :: A propos du forum-
Sauter vers: