RPG +16 ans
 
Le deal à ne pas rater :
TCL C74 Series 55C743 – TV 55” 4K QLED 144 Hz Google TV (Via ODR ...
499 €
Voir le deal

 

 Création d'un tableau

Aller en bas 
AuteurMessage
Jonathan Crane/Scarecrow

Jonathan Crane/Scarecrow


Localisation dans Gotham : Arkham Asylum

Création d'un tableau Empty
MessageSujet: Création d'un tableau   Création d'un tableau Mininew-3561a9aSam 15 Sep - 10:56

Tableau de base

Voici une manière facile de créer un tableau. La première étape est de comprendre la forme du tableau. Il y aura aussi des sections au niveau de l'amélioration de vos bordures, formes et couleurs.

Il faut commencer par ouvrir une balise < TR > pour commencer une ligne et la refermer < /TR > pour terminer la ligne. La ligne est la rangé horizontale. C'est à l'intérieur de la ligne que nous allons définir le nombre de colonne ici appelée < TD > et fermer cette colonne par < /TD>

Le tableau en un seul carré se traduit ainsi :

ex :
Tableau
Code:
<table><TR><TD>Tableau</TD></TR></table>

Il n'y a rien d'apparent pour le moment. Pour faire apparaître la bordure, ou contour, vous devez ajouter «Border» suite à table comme ceci :

ex :
Tableau
Code:
<table border><TR><TD>Tableau</TD></TR></table>

Pour avoir une deuxième ligne, il suffit d'ajouter une autre < TR > à l'intérieur de votre balise Table. N'oubliez pas, quand on ouvre une balise, il ne faut pas oublier de la refermer.

Tableau avec deux lignes :

ex :
Ligne 1
Lignes 2
Code:
<table border>
<TR><TD>Ligne 1</TD></TR>
<TR><TD>Lignes 2</TD></TR>
</table>

Les codes doivent absolument être collé lors de l'écriture sur le forum sinon vous aurez des lignes (espaces) supplémentaire au dessus du tableau. Le code à été espacé pour vous montrer les différentes lignes et l'ouverture/fermeture des balises. Le code initial ressemble à ça :

Code:
<table border><TR><TD>Ligne 1</TD></TR><TR><TD>Lignes 2</TD></TR></table>

Tableau deux colonnes :

ex :
Colonne 1Colonne 2
Code:
<table border><TR><TD>Colonne 1</TD><TD>Colonne 2</TD></TR></table>

Nous avons, ici, introduit deux balises < TD > dans le code du < TR > afin d'ajouter une colonne dans le tableau.

Tableau complexe :

ex :
Ligne 1, Colonne 1Ligne 1, Colonne 2
Ligne 2, Colonne 1Ligne 2, Colonne 2
Code:
<table border>
<TR><TD>Ligne 1, Colonne 1</TD><TD>Ligne 1, Colonne 2</TD></TR>
<TR><TD>Ligne 2, Colonne 1</TD><TD>Ligne 2, Colonne 2</TD></TR>
</table>
Code:
<table border><TR><TD>Ligne 1, Colonne 1</TD><TD>Ligne 1, Colonne 2</TD></TR><TR><TD>Ligne 2, Colonne 1</TD><TD>Ligne 2, Colonne 2</TD></TR></table>

Vous pouvez ajouter toutes vos balises existante pour mettre en gras ou ajouter une image. Vous n'avez qu'à changer le mot tableau pour votre image ou votre texte. Nous verrons la grandeur des cellules plus loin.


Dernière édition par Jonathan Crane/Scarecrow le Sam 15 Sep - 11:55, édité 2 fois
Revenir en haut Aller en bas
Jonathan Crane/Scarecrow

Jonathan Crane/Scarecrow


Localisation dans Gotham : Arkham Asylum

Création d'un tableau Empty
MessageSujet: Re: Création d'un tableau   Création d'un tableau Mininew-3561a9aSam 15 Sep - 11:15

Bordure du tableau et couleur

Nous allons voir les grosseurs de bordure ici pour mettre un peu plus de design sur notre tableau de base. Nous reprenons le code suivant pour faire notre tableau :

Code:
<table border><TR><TD>Tableau</TD></TR></table>

La bordure initiale à 1 pixel de largeur. Donc, si nous ajoutons Border=1, la bordure va rester de la même grandeur. Essayons :

Tableau
Code:
<table border=1><TR><TD>Tableau</TD></TR></table>

Essayons aussi une grandeur de 2 et 3.

Tableau
Code:
<table border=2><TR><TD>Tableau</TD></TR></table>

Tableau
Code:
<table border=3><TR><TD>Tableau</TD></TR></table>

Pour mieux voir la différence, mettons la valeur de 30 à la grosseur de la bordure de tableau

Tableau
Code:
<table border=30><TR><TD>Tableau</TD></TR></table>

Pour mettre de la couleur, il faut utiliser la balise BORDERCOLOR. On peut utiliser les noms de couleur en anglais comme Red (rouge), yellow (jaune), blue (bleu) ou un code comme #336633. Il suffit d'ajouter la balise à la suite de Border. Voici deux exemples , un avec le nom de la couleur et l'autre avec un code :

Tableau
Code:
<table border=5 BORDERCOLOR=green><TR><TD>Tableau</TD></TR></table>
Tableau
Code:
<table border=8 BORDERCOLOR=#33rr66><TR><TD>Tableau</TD></TR></table>

NB : Toujours mettre un espace entre vos balise sinon cela peut causer une erreur. La majuscule ou la minuscule ne change rien dans votre balise.

Vous pouvez ajouter des couleurs dans vos cellules grâce à la balise bgcolor.

Tableau

Comme la couleur des bordures, vous pouvez aussi utiliser des code de couleur et changer l'apparence de vos cellules.

Ligne 1, Colonne 1Ligne 1, Colonne 2
Ligne 2, Colonne 1Ligne 2, Colonne 2
Code:
<table border>
<TR><TD bgcolor=#336633>Ligne 1, Colonne 1</TD><TD bgcolor=#44ttss>Ligne 1, Colonne 2</TD></TR>
<TR><TD bgcolor=red>Ligne 2, Colonne 1</TD><TD bgcolor=violet>Ligne 2, Colonne 2</TD></TR>
</table>
Code:
<table border><TR><TD bgcolor=#336633>Ligne 1, Colonne 1</TD><TD bgcolor=#44ttss>Ligne 1, Colonne 2</TD></TR><TR><TD bgcolor=red>Ligne 2, Colonne 1</TD><TD bgcolor=violet>Ligne 2, Colonne 2</TD></TR></table>

Vous pouvez aussi mettre une image en background avec la balise nommée Background justement.

Ligne 1, Colonne 1Ligne 1, Colonne 2
Ligne 2, Colonne 1Ligne 2, Colonne 2
Code:
<table border background="http://hitskin.com/themes/12/80/98/i_background.jpg">
<TR><TD>Ligne 1, Colonne 1</TD><TD>Ligne 1, Colonne 2</TD></TR>
<TR><TD>Ligne 2, Colonne 1</TD><TD>Ligne 2, Colonne 2</TD></TR>
</table>
Code:
<table border background="http://hitskin.com/themes/12/80/98/i_background.jpg"><TR><TD>Ligne 1, Colonne 1</TD><TD>Ligne 1, Colonne 2</TD></TR><TR><TD>Ligne 2, Colonne 1</TD><TD>Ligne 2, Colonne 2</TD></TR></table>


Dernière édition par Jonathan Crane/Scarecrow le Sam 15 Sep - 12:12, édité 2 fois
Revenir en haut Aller en bas
Jonathan Crane/Scarecrow

Jonathan Crane/Scarecrow


Localisation dans Gotham : Arkham Asylum

Création d'un tableau Empty
MessageSujet: Re: Création d'un tableau   Création d'un tableau Mininew-3561a9aSam 15 Sep - 11:51

Tableau complexe et taille des cellules

Nous allons vous apprendre comment fusionner des colonnes et des lignes afin d'obtenir un un tableau plus complet. La balise rowspan et colspan s'utilise sur la balise TD. Il va fusionner deux colonnes ensemble pour former qu'un colonne. Voici un exemple:

Ex :
Grande colonneLigne 1
Ligne 2
Code:
<table border>
<tr><td ROWSPAN=2>Grande colonne</td><td>Ligne 1</td></tr>
<tr><td>Ligne 2</td></tr>
</table>
Code:
<table border><tr><td ROWSPAN=2>Grande colonne</td><td>Ligne 1</td></tr><tr><td>Ligne 2</td></tr></table>

Comme vous pouvez apercevoir, nous avons mit deux colonnes dans la première lignes et une seule dans la deuxième. Une des lignes du haut possède le rowspan qui vient englober deux lignes. Nous aurions pu ajouter une troisième lignes et changer le 2 à côté de rowspan pour un trois. La colonne aurait alors englobé trois lignes au lieu de deux.

On peut faire la même chose sur le longs avec la balise colspan. Voici un exemple :

Ex :
Grande Ligne
Colonne 1Colonne 2
Code:
<table border>
<tr><td COLSPAN=2>Grande Ligne</td></tr>
<tr><td>Colonne 1</td><td>Colonne 2</td></tr>
</table>
Code:
<table border><tr><td COLSPAN=2>Grande Ligne</td></tr><tr><td>Colonne 1</td><td>Colonne 2</td></tr></table>

Amusons-nous u peu encore

ab
cdef
gh
i
Code:
<table border>
<tr><td COLSPAN=3>a</td><td>b</td></tr>
<tr><td ROWSPAN=3>c</td><td>d</td><td>e</td><td>f</td></tr>
<tr><td>g</td><td COLSPAN=2 ROWSPAN=2>h</td></tr>
<tr><td>i</td></TR>
</table>
Code:
<table border><tr><td COLSPAN=3>a</td><td>b</td></tr><tr><td ROWSPAN=3>c</td><td>d</td><td>e</td><td>f</td></tr><tr><td>g</td><td COLSPAN=2 ROWSPAN=2>h</td></tr><tr><td>i</td></TR></table>

Les codes deviennent de plus en plus complexe plus nous allons avancer dans la programmation. Nous allons maintenant voir la grandeur des cellules pour pouvoir garder une largeur adéquate ou égale sur toutes nos lignes. Voici nos deux prochaines balises :

Width : Largeur de la colonne
Height : Longueur de la ligne

On doit leur donner une valeur en pourcentage ou en pixel pour pouvoir diriger leur grandeur. On peut les placer suite à Table, TR ou TD. Ainsi, on peut donner une grandeur maximale à notre tableau. Les cellules vont donc s'adapter à un pourcentage égale à l'intérieur du tableau. Faisons quelque tests :

Tableau de 120/120 pixels:
Tableau
Code:
<table border WIDTH=120 HEIGHT=120><TR><TD>Tableau</TD></TR></table>

Tableau de 30%:
Tableau
Code:
<table border WIDTH=30%><TR><TD>Tableau</TD></TR></table>

On peut faire la même chose au niveau des cellules :

TableauTableau
Code:
<table border><TR><TD WIDTH=250 HEIGHT=50>Tableau</TD><TD WIDTH=100>Tableau</TD></TR></table>

La deuxième colonne à copié la valeur de longueur de la première cellule. Le tableau essaie de toujours rester un carré sauf si vous faite un erreur au niveau des rowspan en essayant de prendre trop de lignes de ce qu'il y a.
Revenir en haut Aller en bas
Jonathan Crane/Scarecrow

Jonathan Crane/Scarecrow


Localisation dans Gotham : Arkham Asylum

Création d'un tableau Empty
MessageSujet: Re: Création d'un tableau   Création d'un tableau Mininew-3561a9aSam 15 Sep - 12:05

Alignement du texte, du tableau et des cellules

On peut aligner le tableau horizontalement grace à l'attribut ALIGN qui peut avoir pour valeur LEFT (gauche), CENTER(milieu) et RIGHT (droit). Il suffit d'ajouter la valeur à la suite de Table pour diriger notre tableau où on le veut. Voici un exemple de chacune des valeurs:

Tableau
Code:
<table ALIGN=left><tr><td>Tableau</td></tr></table>
Tableau
Code:
<table ALIGN=center><tr><td>Tableau</td></tr></table>
Tableau
Code:
<table ALIGN=rightt><tr><td>Tableau</td></tr></table>

On peut aussi déplacer le texte dans les cellules comme sur les logiciel normaux. Haut, bas, milieu, gauche droite etc...

alignement par défautaligné en haut
aligné à gauchecentré verticalement
centré horizontalementaligné en bas
aligné à droitebasé sur la ligne
Code:
<table border width=500>
<tr><td height=50>alignement par défaut</td>
<td VALIGN="top">aligné en haut</td></tr>
<tr><td height=50 ALIGN="left">aligné à gauche</td>
<td VALIGN="middle">centré verticalement</td></tr>
<tr><td height=50 ALIGN="center">centré horizontalement</td>
<td VALIGN="bottom">aligné en bas</td></tr>
<tr><td height=50 ALIGN="right">aligné à droite</td>
<td VALIGN="baseline">basé sur la ligne</td></tr>
</table>
Code:
<table border width=500><tr><td height=50>alignement par défaut</td><td VALIGN="top">aligné en haut</td></tr><tr><td height=50 ALIGN="left">aligné à gauche</td><td VALIGN="middle">centré verticalement</td></tr><tr><td height=50 ALIGN="center">centré horizontalement</td><td VALIGN="bottom">aligné en bas</td></tr><tr><td height=50 ALIGN="right">aligné à droite</td><td VALIGN="baseline">basé sur la ligne</td></tr></table>


Dernière édition par Jonathan Crane/Scarecrow le Sam 15 Sep - 12:23, édité 1 fois
Revenir en haut Aller en bas
Jonathan Crane/Scarecrow

Jonathan Crane/Scarecrow


Localisation dans Gotham : Arkham Asylum

Création d'un tableau Empty
MessageSujet: Re: Création d'un tableau   Création d'un tableau Mininew-3561a9aSam 15 Sep - 12:22

Espace dans les cellules et marges

Cellspacing
On peut attribuer une valeur à cellspacing, ce qui agrandit la largeur de la bordure du tableau dans son intérieur. Ça va approcher la bordure ou l’éloigner selon vos valeurs, voici quelque exemple sur plusieurs valeurs. On l'ajoute suite a table.

Ligne 1, Colonne 1Ligne 1, Colonne 2
Ligne 2, Colonne 1Ligne 2, Colonne 2
Code:
<table border cellspacing=0>
<TR><TD>Ligne 1, Colonne 1</TD><TD>Ligne 1, Colonne 2</TD></TR>
<TR><TD>Ligne 2, Colonne 1</TD><TD>Ligne 2, Colonne 2</TD></TR>
</table>

Ligne 1, Colonne 1Ligne 1, Colonne 2
Ligne 2, Colonne 1Ligne 2, Colonne 2
Code:
<table border cellspacing=1>
<TR><TD>Ligne 1, Colonne 1</TD><TD>Ligne 1, Colonne 2</TD></TR>
<TR><TD>Ligne 2, Colonne 1</TD><TD>Ligne 2, Colonne 2</TD></TR>
</table>

Ligne 1, Colonne 1Ligne 1, Colonne 2
Ligne 2, Colonne 1Ligne 2, Colonne 2
Code:
<table border cellspacing=3>
<TR><TD>Ligne 1, Colonne 1</TD><TD>Ligne 1, Colonne 2</TD></TR>
<TR><TD>Ligne 2, Colonne 1</TD><TD>Ligne 2, Colonne 2</TD></TR>
</table>
Ligne 1, Colonne 1Ligne 1, Colonne 2
Ligne 2, Colonne 1Ligne 2, Colonne 2
Code:
<table border cellspacing=20>
<TR><TD>Ligne 1, Colonne 1</TD><TD>Ligne 1, Colonne 2</TD></TR>
<TR><TD>Ligne 2, Colonne 1</TD><TD>Ligne 2, Colonne 2</TD></TR>
</table>

Cellpadding
Cette valeur défini la grandeur entre la bordure et le texte à l'intérieur de la cellule. Toute comme la valeur précédente, on l'ajoute à la suite de Table.

Ligne 1, Colonne 1Ligne 1, Colonne 2
Ligne 2, Colonne 1Ligne 2, Colonne 2
Code:
<table border cellpadding=0>
<TR><TD>Ligne 1, Colonne 1</TD><TD>Ligne 1, Colonne 2</TD></TR>
<TR><TD>Ligne 2, Colonne 1</TD><TD>Ligne 2, Colonne 2</TD></TR>
</table>

Ligne 1, Colonne 1Ligne 1, Colonne 2
Ligne 2, Colonne 1Ligne 2, Colonne 2
Code:
<table border cellpadding=5>
<TR><TD>Ligne 1, Colonne 1</TD><TD>Ligne 1, Colonne 2</TD></TR>
<TR><TD>Ligne 2, Colonne 1</TD><TD>Ligne 2, Colonne 2</TD></TR>
</table>

Ligne 1, Colonne 1Ligne 1, Colonne 2
Ligne 2, Colonne 1Ligne 2, Colonne 2
Code:
<table border cellpadding=20>
<TR><TD>Ligne 1, Colonne 1</TD><TD>Ligne 1, Colonne 2</TD></TR>
<TR><TD>Ligne 2, Colonne 1</TD><TD>Ligne 2, Colonne 2</TD></TR>
</table>

Donc voila, ensuite il n'y a que vous qui pouvez déterminer vos tableaux. Je met quelque exemples des tableaux existants sur le forums pour vous aider.
Revenir en haut Aller en bas
Jonathan Crane/Scarecrow

Jonathan Crane/Scarecrow


Localisation dans Gotham : Arkham Asylum

Création d'un tableau Empty
MessageSujet: Re: Création d'un tableau   Création d'un tableau Mininew-3561a9aSam 15 Sep - 12:24

Administrateurs :


Jonathan Crane / ScareCrowDamian Wayne / Robin

Code:
[size=18][color=#294257][b]Administrateurs :[/b] [/color][/size]
<table align="center"><tr><td ALIGN="center"><a href="http://univers-gotham.fra.co/u6"><img src="http://img15.hostingpics.net/pics/715597crane.jpg"></a></td><td ALIGN="center"><a href="http://univers-gotham.fra.co/u2"><img src="http://img15.hostingpics.net/pics/219255Dam.jpg"></a></td></tr>
<tr><td width="250" ALIGN="center">[color=white]Jonathan Crane / ScareCrow[/color]</td><td width="250" ALIGN="center">[color=white]Damian Wayne / Robin[/color]</td></tr>
</table>

Création d'un tableau 856916ParaSaut en haute voltige : Vous devez réaliser un saut d'un point haut de la ville ou du ciel.
Date de création : 01/09/12
Mode : Actif

Création d'un tableau 856916ParaSaut en haute voltige : Vous devez réaliser un saut d'un point haut de la ville ou du ciel.
Date de création : 01/09/12
Mode : Actif

Code:
<table><tr><td width=80 HEIGHT=80>[img]http://img11.hostingpics.net/pics/856916Para.jpg[/img]</td><td>[color=#028FB2][b]Saut en haute voltige[/b][/color] : Vous devez réaliser un saut d'un point haut de la ville ou du ciel.
[b]Date de création[/b] : 01/09/12
[b]Mode[/b] : [color=green]Actif[/color]</td></tr></table>
Revenir en haut Aller en bas
Contenu sponsorisé





Création d'un tableau Empty
MessageSujet: Re: Création d'un tableau   Création d'un tableau Mininew-3561a9a

Revenir en haut Aller en bas
 
Création d'un tableau
Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» Création de cadres et fonds

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Univers Gotham :: Hors jeu :: Amusement :: Tutoriaux-
Sauter vers: