3. Les tableaux

On arrive là dans des commandes qui commencent à devenir un peu moins évidentes.

Pour définir un tableau, on a les commandes <TABLE> et </TABLE>. Jusque là c'est simple.
Mais il va falloir indiquer dans le paramètre BORDER= la largeur de la bordure. Par défaut, BORDER=0 et on ne verra donc rien en fait (ce qui peut dans certains cas être interressant).

Pour définir une ligne, on va avoir les commandes <TR> (TR pour Table Row) et </TR>.

<TABLE BORDER=1>
<TR>
Ligne
</TR>
</TABLE>

Ligne

	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.

 

---

Exemple à consulter : affichage du ... TABLEAU ... réduit à sa plus simple expression.

Il est temps de passer à un autre aspect : les liens à un endroit précis d'une page,
Ou de revenir au menu.