Pour définir une ligne, on va avoir les commandes <TR> (TR pour Table Row) et </TR>. <TABLE BORDER=1>
<TR>
Ligne
</TR>
</TABLE> Ce qui va donner :

Ligne

Si on veut plusieurs lignes, on ajoutera autant de bloc <TR> - </TR>.
Pour les colonnes, à l'intérieur d'une ligne, on va utiliser les commandes <TD> et </TD> (TD pour Table Data) <TABLE BORDER=1>
<TR>
<TD>
Colonne 1
</TD>
<TD>
Colonne 2
</TD>
</TR>
</TABLE> Ce qui donne :

Colonne 1

Colonne 2

Les tailles de colonnes sont réglées automatiquement. Mais on peut les fixer avec les paramètres WIDTH= et HEIGHT= dans la commande <TD>. <TABLE BORDER=1>
<TR>
<TD WIDTH=100 HEIGHT=20>
Colonne 1
</TD>
<TD WIDTH=60>
Colonne 2
</TD>
</TR>
</TABLE> Ce qui donne :

Colonne 1

Colonne 2

Une autre série de paramètres permettent de définir la position du texte dans chaque "boite". ALIGN= qui peut prendre les valeurs CENTER, RIGHT ou LEFT (défaut LEFT) et VALIGN= qui peut prendre les valeurs CENTER, TOP ou BOTTOM (défaut CENTER). <TABLE BORDER=1>
<TR>
<TD WIDTH=50 HEIGHT=50 VALIGN=TOP>A</TD>
<TD WIDTH=50 VALIGN=TOP ALIGN=CENTER>B</TD>
<TD WIDTH=50 VALIGN=TOP ALIGN=RIGHT>C</TD>
</TR>
<TR>
<TD HEIGHT=50>D</TD>
<TD ALIGN=CENTER>E</TD>
<TD ALIGN=RIGHT>F</TD>
</TR>
<TR>
<TD HEIGHT=50 VALIGN=BOTTOM>G</TD>
<TD VALIGN=BOTTOM ALIGN=CENTER>H</TD>
<TD VALIGN=BOTTOM ALIGN=RIGHT>I</TD>
</TR>
</TABLE> Ce qui donne :

A	B	C
D	E	F
G	H	I

Encore un ou deux éléments et on va être capable de réaliser un tableau composé ! Il nous manque la définition du fond de couleur d'une "boite" : paramètre BGCOLOR=, déjà connu !
Un peu plus délicat, la fusion de "boites" que nous allons voir maintenant : il s'agira de réaliser un tableau composé à gauche du logo de LINC avec d'autres boites plus petites à droite...

 

	UNISYS ET UUA
	ActiveLINC
	La Compagnie	Accès Rapide au Sommaire
	C'est beau ... LINC !!!	Allez! Cliquez!

Les paramètres à utiliser sont ROWSPAN= et COLSPAN=. Le nombre à indiquer est le nombre de lignes ou de colonnes à regrouper. Mais nous allons voir ça ci dessous avec l'exemple de cette première page. Ca sera plus simple.

L'astuce c'est d'être méthodique. Il faut commencer par compter le nombre de lignes maximum.
Ici, il y en a 4.
Puis pareil avec les colonnes : 3.
La boite à gauche où il y a le logo va donc regrouper 4 lignes (ROWSPAN=4) mais elle est sur une seule colonne.
Notre table va donc commencer ainsi : <TABLE BORDER=2>
<TR>
<TD ALIGN=CENTER WIDTH=300 ROWSPAN=4>
<IMG SRC="../trombi/lincart.gif" border=0 width=300 height=300 > </TD> Cette boite ne contient rien d'autre qu'une image, qu'on insère de manière classique.
NB: Le logo est un peu trop grand pour notre boite qu'on ne veut pas plus large que 300 (paramètre WIDTH=300 dans la commande <TD>), on peut remarquer qu'on peut le réduire en indiquant sa taille : paramètres WIDTH= et HEIGHT= dans la commande <IMG>.

On est toujours sur la première ligne, puisqu'on n'a toujours pas inséré de commandes </TR>. On va donc définir la boite de droite qui couvre tout le reste du tableau, soit 2 colonnes, donc COLSPAN=2 !

  <TD ALIGN=CENTER WIDTH=300 COLSPAN=2>
<B><FONT SIZE=6 color=#000080>UNISYS ET UUA</FONT></B> </TD> Là, on met du texte, donc on définit sa forme <FONT> et <B>.
Du coup la ligne est terminée : </TR>

  On va passer à la deuxième. La boite du logo, on ne s'en occupe pas, on va juste décrire la boite de droite qui est encore un regroupement de 2 colonnes. <TR>
<TD ALIGN=CENTER COLSPAN=2>
<B><FONT SIZE=5 color=#000080>ActiveLINC</FONT></B> </TD>
</TR>

  On va passer à la 3ème ligne. Toujours le logo pour la 1ère colonne, donc on ne va définir que les boites à droite : pas de regroupement là ! <TR>
<TD ALIGN=CENTER BGCOLOR="#ffff00"><FONT face="ARIAL"><a href="http://www.unisys.com"><b>La Compagnie</b></a></TD>
<TD ALIGN=CENTER><FONT face="ARIAL"><a href="../Html/JPpage.htm"> ><b>Accès Rapide</b></a><br>au Sommaire</TD>
</TR> Notons le BGCOLOR= pour définir le fond jaune. Et l'usage de la commande <A HREF=..., on peut vraiment mettre n'importe quelle commande HTML dans les "boites" de tableau.

La 4ème ligne est identique et le tableau est fini.

Voici donc le code complet du tableau : <TABLE BORDER=2>
<TR>
<TD ALIGN=CENTER WIDTH=300 ROWSPAN=4>
<IMG SRC="../trombi/lincart.gif" border=0 width=300 height=300> </TD>
<TD ALIGN=CENTER WIDTH=300 COLSPAN=2>
<B><FONT SIZE=6 color=#000080>UNISYS ET UUA</FONT></B> </TD>
<TR>
<TD ALIGN=CENTER COLSPAN=2>
<B><FONT SIZE=5 color=#000080>ActiveLINC</FONT></B> </TD>
</TR>
<TR>
<TD ALIGN=CENTER BGCOLOR="#ffff00"><FONT face="ARIAL"><a href="http://www.unisys.com"><b>La Compagnie</b></a></TD>
<TD ALIGN=CENTER><FONT face="ARIAL"><a href="../Html/JPpage.htm"><b>Accès Rapide</b></a><br>Au Sommaire</TD>
</TR>
<TR>
<TD ALIGN=CENTER><FONT face="ARIAL" size=-1><>C'est beau ...<br>LINC !!!"</A></TD>
<TD ALIGN=CENTER><FORM><INPUT TYPE="button" Value="Aide"
onClick="alert('Coucou ici JP: Pour appeler la page précédente ou suivante, vous pouvez utiliser la combinaison ALT + Flèches de direction. De même, essayez CTRL + P pour imprimer un article.')")> </FORM><FONT face="ARIAL" size=-2>Allez! Cliquez<></TD>
</TR>
</TABLE> NB: La dernière boite contient une commande <FORM> que je ne décrirai pas ici (peut-être dans un prochain module). C'est un petit gadget dont on peut fort bien se passer, ici ça définit un bouton qui déclenche l'ouverture d'une fenêtre.

Voila. Vous savez tout ou presque sur les tableaux. C'était peut-être un peu ardu, j'espère que le dernier exemple vous a convaincu qu'on pouvait facilement réalisé des tableaux très complexes de manière très simple.