Un tableau HTML est une structure dans laquelle vous pourrez ranger des textes, voire des images. Un tableau sera défini par un tag, nommé <TABLE>. Celui-là, il vaut mieux que vous le fermiez bien à la fin par un </TABLE>, sinon, gros problèmes en vue.

Puis déclarez la première ligne de votre tableau, avec le tag <TR>. Tout ce qui sera entre <TR> et </TR> constituera donc votre première ligne. Dans cette ligne, vous allez mettre des colonnes. Mettons que vous en vouliez trois, vous écrirez trois fois <TD></TD>. A chaque fois, le contenu du tag TD sera le contenu de la case correspondante. Si vous voulez deux lignes, il suffira de refaire une autre ligne similaire. Si on met dans chaque case le numéro de ligne et de colonne correspondant, on obtient :

Ce qui à la sortie nous donne :

Pour mettre des titres en haut des colonnes et à gauche des lignes. On va donc créer une ligne et une colonne supplémentaires, employer la paire <TH> </TH> et mettre le titre dedans. Pour plus de clarté, les bordures des lignes et colonnes seront soulignées, par le paramètre BORDER placé dans le tag TABLE :

C'est mieux, mais on note que la colonne lundi est plus mince que les deux autres. C'est gênant. On va donc forcer la largeur des colonnes en mettant dans les <TH> un paramètre WIDTH (largeur), qui sera de 30%. Ca donnera :

Souvent, on a besoin de répéter les WIDTH dans les lignes suivantes pour garder les largeurs voulues, surtout si on met des images. On en profitera pour mettre les nombres au milieu de leurs cellules grâce aux paramètres ALIGN="(LEFT, CENTER ou RIGHT)" pour l'alignement horizontal et VALIGN="TOP, MIDDLE ou BOTTOM)" pour l'alignement vertical. Ici, de simples <TD ALIGN="CENTER"> suffiront. On obtiendra:

Au fait, on a oublié de mettre un titre à notre tableau. Ce sera chose faite quand nous aurons inséré juste sous le <TABLE> une ligne <CAPTION>MON JOLI TABLEAU</CAPTION>.

Il est tout à fait possible d'élargir le tableau autant qu'on veut! Pour ce faire, il suffit d'ajouter dans le tag TABLE un paramètre WIDTH="x%". Ici, on va l'élargir à 100% afin qu'il prenne toute la largeur de la page. De même, le paramètre HEIGHT permet d'ajuster la hauteur totale du tableau. Les WIDTH et HEIGHT fonctionnent en pourcentages de l'espace total proposé par le navigateur, ou bien en pixels. WIDTH=100 vous donnera une largeur de 100 pixels. Si on veut augmenter la taille des bordures du tableau, on peut mettre un nombre à BORDER. Ici, on met BORDER=5. Tant qu'on y est, on va augmenter les espaces entre les cellules, avec le paramètre CELLSPACING=5 que nous écrirons dans <TABLE>. Le paramètre CELLPADDING, qui se met au même endroit, permet d'augmenter la marge autour du texte. En gros, il gonfle les cellules autour de leur contenu. Ici, nous ne l'utiliserons pas. Notez qu'en mettant simultanément les paramètres CELLSPACING et BORDER à zéro, vous collez les cellules les unes contre les autres.

MON JOLI TABLEAU

Bien, maintenant, supposons que nous voulions fondre en UNE SEULE cellule les 1-1 et 1-2. Nous allons tout simplement mettre, dans le <TD> de la 1-1, le paramètre ROWSPAN=2 qui signale que la cellule en question s'étale sur deux lignes. N'oublions pas d'effacer la cellule 1-2 et son TD, sinon il y a confusion. De la même manière, le paramètre COLSPAN nous servira à fusionner les cellules 2-1 et 3-1 :

MON JOLI TABLEAU

Et puisque nous sommes équipés d'un browser récent (Nestcape 3 par ex.), on va pouvoir colorier ces jolies cases! On utilise, dans les <TD>, la variable bgcolor="#RRVVBB" qui définit le fond de la case.

MON JOLI TABLEAU

Ouf! On a un tableau bien compliqué. Normalement, si vous avez suivi, vous êtes à même de comprendre tout ce qui suit, et de disserter longuement à ce sujet :

• Le GIF
  Le GIF est un format non destructif, c'est-à-dire qu'il ne dégrade pas la qualité de l'image, mais comme tout se paie, il compresse moins que les formats destructifs. Sachez en outre que le format GIF permet de mettre des transparences et des animations. Ces GIFs animés ou transparents s'utilisent exactement comme des GIFs normaux, c'est uniquement leur conception qui est différente. Ils s'affichent correctement dans tous les navigateurs. Si vous souhaitez fabriquer vous-même de telles images, sachez que la plupart des logiciels de dessin récents permettent de faire des GIFs transparents, et que pour les animés, il faut un logiciel appelé "GIF construction set".
  Notons aussi un sous-format particulièrement adapté au web, le GIF entrelacé, qui apparaît progressivement (flou, puis de plus en plus fin) dans le navigateur. Malheureusement, ce format est limité à 256 couleurs, ce qui le rend impropre au rendu des photographies. Les GIF sont destinées aux images faites de surfaces pleines et unies.
• Le JPG
  Le format JPG (prononcer jpeg) est destiné aux images photos numérisées. Il est possible de modifier le taux de compression de l'image, et donc la qualité de celle-ci. Le sous-format " JPG progressif " est l'équivalent du GIF entrelacé. Le format "JPEG animé" s'appelle le MPEG, c'est une de ses versions qui est utilisée par la télévision numérique et les films sur DVD. Il est malheureusement impossible de le fabriquer simplement, sans logiciels coûteux.
• Autres formats
  
  Par exemple le PNG et le TIF. Dans la mesure où ils ne sont pas toujours reconnus par les navigateurs les plus répandus tels Netscape et Internet Explorer, il est préférable de les éviter.

 Pour mettre des images dans une page Web, on va utiliser une commande (qui n'est pas un tag, donc elle ne se ferme pas) <IMG SRC="nom_image">, ou nom_image est le nom de l'image. Si l'image est dans votre répertoire, comme je vous y encourage, et s'appelle IMAGE1.GIF, vous devez inscrire :

Notez que l'image peut être au format GIF ou au format JPG. Pour les autres formats, vous pouvez essayer, mais l'effet n'est pas garanti. L'image qui va me servir à illustrer ce chapitre est typique de ce qu'il faut mettre en GIF.

L'image s'affichera à gauche de l'écran, et si vous tapez un texte juste à coté, vous aurez quelque chose de pas beau. Voici pourquoi on peut aligner le texte par rapport à l'image, avec l'option ALIGN.

Les options ALIGN les plus utiles sont "left" et "right".

XXXXXXXXXXXXX XXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXX XXXXXXXXX XXXXXXXXXXXXX XXXXXXXXXXXXXXXXX XXXXXXXXXXXXXX XXXXXXXXXXXXXX XXXXXXXXXXXXXX XXXXXXXXXXXXXX XXXXXXXXXXX XXXXXXXXXX XXXXX

XXXXXXXXXXXXX XXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXX XXXXXXXXX XXXXXXXXXXXXX XXXXXXXXXXXXXXXXX XXXXXXXXXXXXXX XXXXXXXXXXXXXX XXXXXXXXXXXXXX XXXXXXXXXXXXXX XXXXXXXXXXX XXXXXXXXXX XXXXX

Si on met plusieurs images sans options ALIGN, elles se rangent gentiment à la queue leu leu :

Bref, on peut faire pas mal de choses. On peut aussi modifier la taille des images avec les paramètres WITDH et HEIGHT.

Un dernier mot avant de clore ce chapitre, on peut utiliser une image comme lien. Pour ce faire, on met l'image normalement, et on entoure le <IMG> par les tags <A HREF="machin"> et </A>. L'image est alors entourée de la couleur définie pour les liens. Pour enlever cette bordure, utilisez le paramètre BORDER=0. Vous pouvez aussi, si vous le souhaitez, augmenter la taille de la bordure avec une autre valeur que zéro.