Création d'un tableau

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 1

Colonne 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 1	Ligne 1, Colonne 2
Ligne 2, Colonne 1	Ligne 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.

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 1	Ligne 1, Colonne 2
Ligne 2, Colonne 1	Ligne 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 1	Ligne 1, Colonne 2
Ligne 2, Colonne 1	Ligne 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>

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 colonne	Ligne 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 1	Colonne 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

a			b
c	d	e	f
	g	h
	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 :

Tableau

Tableau

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.

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éfaut	aligné en haut
aligné à gauche	centré verticalement
centré horizontalement	aligné en bas
aligné à droite	basé 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>

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 1	Ligne 1, Colonne 2
Ligne 2, Colonne 1	Ligne 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 1	Ligne 1, Colonne 2
Ligne 2, Colonne 1	Ligne 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 1	Ligne 1, Colonne 2
Ligne 2, Colonne 1	Ligne 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 1	Ligne 1, Colonne 2
Ligne 2, Colonne 1	Ligne 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 1	Ligne 1, Colonne 2
Ligne 2, Colonne 1	Ligne 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 1	Ligne 1, Colonne 2
Ligne 2, Colonne 1	Ligne 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 1	Ligne 1, Colonne 2
Ligne 2, Colonne 1	Ligne 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.

Administrateurs :

Jonathan Crane / ScareCrow	Damian 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>

Saut 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

Saut 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>