La balise <TABLE>

Tout ce qui sera dans un tableau est écris dans la source (bloc-notes) entre les deux balises <TABLE> et </TABLE>.
Le marqueur <TABLE> est extensible: pour obtenir une bordure taper tout simplement <TABLE BORDER="la taille de la bordure désirée">, pour ne pas avoir de bordure il suffit de laisser <TABLE> sans rien.

<TABLE> a encore un autre extension qui permet de choisir la largeur du tableau avec <TABLE WIDTH="un nombre ou un pourcentage qui sera la largeur">.

<TABLE BORDER="1" WIDTH="250">
<TR>
<TD>Tableau de largeur 250 pixels</TD>
</TR>
</TABLE>

Tableau de largeur 250 pixels

Ajouter une ligne

Pour ajouter une ligne c'est <TR> et pour finir cette ligne c'est évidemment </TR>

Une ligne seule ne constitue pas un tableau, il lui faut au moins une colonne.

Ajouter une colonne

Pour découper cette ligne en colonnes c'est <TD> et </TD>

<TABLE BORDER="1">
<TR>
<TD>Colonne 1 de la ligne 1</TD>
<TD>Colonne 2 de la ligne 1</TD>
</TR>
</TABLE>

Colonne 1 de la ligne 1

Colonne 2 de la ligne 1

A l'intérieur de <TD> et </TD>, on peut mettre du texte, des marqueurs de mise en forme (<B>, <I>), des liens, des images, du JavaScript, d'autres tableaux, ... En fait on peut tout mettre !

<TD> est extensible par VALIGN qui prend les valeurs "TOP" (en haut), "MIDDLE"(au milieu) et "BOTTOM" (en bas).

<TABLE BORDER="1">
<TR>
<TD VALIGN="TOP">Texte aligné en haut de la case<BR><BR><BR></TD>
<TD VALIGN="MIDDLE">Texte aligné au milieu de la case</TD>
<TD VALIGN="BOTTOM">Texte aligné en bas de la case</TD>
</TR>
</TABLE>

Texte aligné en haut de la case

Texte aligné au milieu de la case

Texte aligné en bas de la case

<TD> est aussi extensible par ALIGN qui cette fois aligne le texte sur le plan l'horizontale. ALIGN prend les valeurs "LEFT" par défaut (à gauche), "CENTER" (au centre) et "RIGHT" (à droite).

<TABLE BORDER="1">
<TR>
<TD VALIGN="TOP">Texte aligné en haut de la case<BR><BR><BR></TD>
<TD VALIGN="MIDDLE">Texte aligné au milieu de la case</TD>
<TD VALIGN="BOTTOM">Texte aligné en bas de la case</TD>
</TR>
<TR>
<TD ALIGN="LEFT">Texte aligné à droite</TD>
<TD ALIGN="CENTER">Texte aligné au centre</TD>
<TD ALIGN="RIGHT">Texte aligné à gauche</TD>
</TR>
</TABLE>

Texte aligné en haut de la case	Texte aligné au milieu de la case	Texte aligné en bas de la case
Texte aligné à droite	Texte aligné au centre	Texte aligné à gauche

On peut régler la largeur d'une colonne. Ainsi <TD> devient <TD WIDTH="un nombre ou un pourcentage qui sera la largeur">.

<TABLE BORDER="1">
<TR>
<TD WIDTH="50%">Largeur=50%</TD>
<TD>Largeur normale</TD>
<TD>Largeur normale</TD>
</TR>
</TABLE>

Largeur=50%

Largeur normale

Largeur normale

Ajouter un intitulé

Pour ajouter un intitulé c'est <TH> et </TH>. Ils sont situé a l'intérieur des marqueurs <TR> et </TR>.

<TABLE BORDER="1">
<TR>
<TH>Colonne 1 : Intitulé de la colonne</TH>
<TH>Colonne 2 : Intitulé de la colonne</TH>
</TR>
</TABLE>

Colonne 1 : Intitulé de la colonne	Colonne 2 : Intitulé de la colonne

En fait le navigateur met le texte en gras.

<TH> est extensible de le même façon que <TD> par ALIGN et VALIGN (voir plus haut les remarques sur "Ajouter une colonne").

Ajouter une légende

Pour mettre une légende c'est <CAPTION> et </CAPTION>.

<TABLE BORDER>
<CAPTION>Tableau 1 - Légende du tableau</CAPTION>
<TR>
<TH>Colonne 1 : Intitulé de la colonne</TH>
<TH>Colonne 2 : Intitulé de la colonne</TH>
</TR>
<TR>
<TD>Colonne 1 de la ligne 1</TD>
<TD>Colonne 2 de la ligne 1</TD>
</TR>
</TABLE>

Tableau 1 - Légende du tableau

Colonne 1 : Intitulé de la colonne	Colonne 2 : Intitulé de la colonne
Colonne 1 : Ligne 1	Colonne 2 : Ligne 1

<CAPTION> est extensible par ALIGN qui permet de placer la légende soit en haut, par défaut, ("TOP") soit en bas ("BOTTOM") mais pas par "MIDDLE".

<TABLE BORDER>
<CAPTION ALIGN="MIDDLE">Tableau 1 - Légende du tableau</CAPTION>
<TR>
<TH>Colonne 1 : Intitulé de la colonne</TH>
<TH>Colonne 2 : Intitulé de la colonne</TH>
</TR>
<TR>
<TD>Colonne 1 de la ligne 1</TD>
<TD>Colonne 2 de la ligne 1</TD>
</TR>
</TABLE>

Tableau 1 - Légende du tableau

Colonne 1 : Intitulé de la colonne	Colonne 2 : Intitulé de la colonne
Colonne 1 : Ligne 1	Colonne 2 : Ligne 1

Faire fusionner des lignes

Pour faire fusionner des lignes c'est en faite un extension de <TD> ou <TH>. En effet on peut faire fusionner des lignes mais aussi des intitulés (ils sont considérés comme des lignes).
C'est donc :
<TD RAWSPAN="nombres de lignes à faire fusionner"> pour les lignes.
<TH RAWSPAN="nombres de lignes à faire fusionner"> pour les intitulés.

<TABLE BORDER="1">
<CAPTION>Fusion de 2 lignes</CAPTION>
<TR>
<TD ROWSPAN="2">Fusion des 2 lignes</TD>
<TD>1<SUP>ère</SUP> ligne</TD>
</TR>
<TR>
<TD>2<SUP>ème</SUP> ligne</TD>
</TR>
<TR>
<TD>Pas de fusion(une seule ligne)</TD>
<TD>3<SUP>ème</SUP> ligne</TD>
</TR>
</TABLE>

Fusion de 2 lignes

Fusion des 2 lignes	1ère ligne
	2ème ligne
Pas de fusion(une seule ligne)	3ème ligne

Faire fusionner des colonnes

Idem qu'au dessus ("Faire fusionner des lignes"). C'est en fait des extension de <TD> et <TH>
<TD COLSPAN="nombres de colonnes à faire fusionner"> pour les colonnes.
<TH COLSPAN="nombres de colonnes à faire fusionner"> pour les intitulés.

<TABLE BORDER="1">
<CAPTION>Fusion de 2 colonnes</CAPTION>
<TR>
<TD COLSPAN="2">Fusion des 2 colonnes</TD>
<TD>Pas de fusion(une seule colonne)</TD>
</TR>
<TR>
<TD>1<SUP>ère</SUP> colonne</TD>
<TD>2<SUP>ème</SUP> colonne</TD>
<TD>3<SUP>ème</SUP> colonne</TD>
</TR>
</TABLE>

Fusion de 2 colonnes

Fusion des 2 colonnes		Pas de fusion(une seule colonne)
1ère colonne	2ème colonne	3ème colonne

Changer la couleur de fond

Pour changer la couleur, c'est la même extension que pour <BODY> à savoir <TABLE BGCOLOR="couleur en anglais ou en code html (par defaut blanc) ">.

<TABLE BGCOLOR="orange">
<TR>
<TD>Fond en gris</TD>
</TR>
</TABLE>

Fond en orange

Mettre une image d'arrière plan

Tout comme pour la couleur de fond, c'est la même extension que pour <BODY>. C'est donc <TABLE BACKGROUND="adresse+image">.

<TABLE BACKGROUND="images/ver.gif">
<TR>
<TD>
Hooo un ver</TD>
</TR>
</TABLE>

Hooo un ver

Changer l'espace entre les cellules

Changer l'espace entre plusieurs cellules est une extension de <TABLE>. C'est <TABLE CELLSPACING="nombre de pixels">.

<TABLE BORDER CELLSPACING=20>
<TR>
<TD>L'espace entre les</TD>
<TD>cellules est de 20 pixels</TD>
</TR>
</TABLE>

L'espace entre les

cellules est de 20 pixels

Changer le retrait du contenu d'une cellule par rapport à sa bordure

La aussi c'est une extension de <TABLE>. C'est <TABLE CELLPADDING="nombre de pixels">.

<TABLE BORDER="1" CELLPADDING=20>
<TR>
<TD>L'espace entre la bordure</TD>
<TD>et les cellules est de 20 pixels</TD>
</TR>
</TABLE>

L'espace entre la bordure

et les cellules est de 20 pixels

Pour finir n'oublier pas que tous les codes sont mélangeables, c'est ça le HTML :)