Ce chapitre va vous demander beaucoup d'attention.

Maîtriser les tableaux, c'est maîtriser la mise en page de votre document. Cependant l'apparition du xhtml a fait évoluer cette technique de mise en page avec les tableaux qui n'est plus conseillée mais a mon avis elle reste plus abordable pour les débutants.

Le tableau est composé de trois Balises :

La balise <TABLE> qui définit le début et la fin du tableau.
La balise <TR> qui définit le début d'une ligne et la fin de cette ligne.
La balise <TD> qui définit une cellule dans une ligne.

Dans l'exemple ci-dessus, le tableau est composé d'une ligne contenant une cellule.

Voici un exemple d'un tableau composé d'une ligne contenant deux cellules.

Voir le résultat final

Il est possible de définir la taille de la bordure grâce à l'attribut BORDER de la balise <TABLE>.

Voir le résultat final

Pour supprimer la bordure, il faut mettre 0 pour valeur.

Comme vous avez pu remarquer l'attribut BORDER ne supprime que le relief de la bordure.
Pour supprimer "définitivement" la bordure il faut ajouter l'attribut CELLSPACING avec la valeur 0.

Retester avec ces deux attributs avec la valeur 0.

Puis avec CELLSPACING="0" et BORDER="1".

Voir le résultat final

En conclusion :

- l'attribut BORDER définit l'épaisseur du relief,
- l'attribut CELLSPACING définit l'épaisseur de la bordure

Comme nous l'avons vue précédemment, la balise <TR></TR> définit une ligne.

Elle doit obligatoirement contenir une balise <TD> et ne doit jamais contenir une autre balise <TR>.

Le nombre de balises <TR> dépend du nombre de lignes désirées.

Pour une ligne on aura un <TR>, pour deux lignes on aura deux <TR> à la suite, pour trois lignes on aura trois <TR>...

Dans cette partie nous allons étudier les attributs HEIGHT et WIDTH de la balise <TABLE>.

La hauteur d'un tableau : HEIGHT.

La hauteur d'un tableau peut être en %, alors la taille du tableau dépendra de la taille de la fenêtre.
A prendre en compte, les fenêtres réduites par l'utilisateur, la taille de l'écran 640 X 480 ou 800 X 600...
On écrira <TABLE HEIGHT="100%">, le tableau prendra toute la hauteur de la fenêtre.
La hauteur peut être aussi en pixel.
On écrira <TABLE HEIGHT="100">

Il est rare de définir la hauteur d'un tableau.

La longueur d'un tableau : WIDTH.

La longueur d'un tableau peut être en %, alors la taille du tableau dépendra de la taille de la fenêtre.
A prendre en compte, les fenêtres réduites par l'utilisateur, la taille de l'écran 640 X 480 ou 800 X 600...
On écrira <TABLE WIDTH="100%">, le tableau prendra toute la longueur de la fenêtre.

La longueur peut être aussi en pixel. On écrira <TABLE WIDTH="100">

Si vous écrivez en % cela donnera :

Voir le résultat final

Si vous écrivez en pixel cela donnera :

Voir le résultat final

Les colonnes d'un tableau sont définies par la balise <TD></TD>.

Une balise <TD> ne doit jamais contenir une autre balise <TD>.

Le nombre de balises <TD> dépend du nombre de colonnes désirées.
Pour une colonne on aura un <TD>, pour deux colonnes on aura deux <TD> à la suite, pour trois colonnes on aura trois <TD>...

Pour les tableaux simple (sans fusion de cellules), vous devez avoir le même nombre de <TD> dans chaque balise <TR>. Si vous avez un tableau de trois colonnes et de six lignes alors vos six balises <TR> doivent avoir trois balises <TD>.

Exercice :

Voici deux tableaux à faire :

- Un tableau 5 lignes 3 colonnes, hauteur de 40% et 40 px de largeur sans épaisseur.
- Un tableau 3 lignes 5 colonnes, hauteur de 60% et 100% de largeur.

Voir le résultat final

On peut définir la hauteur et largeur de chaque cellule.

La hauteur d'une cellule : HEIGHT.

La hauteur d'une cellule peut être en % si le tableau est en %. La somme des % des hauteurs des lignes doit être égale au % de la hauteur du tableau.

On écrira <TD HEIGHT="10%">, la cellule prendra 10% de la hauteur du tableau.

La hauteur peut être aussi en pixel. Les cellules sans % se partageront le reste de la hauteur du tableau de façon égale.
La hauteur d'une cellule peut être en Pixel si le tableau est en Pixel. Dans ce cas là, la somme des hauteurs des lignes doit être égale à la hauteur du tableau, sauf si la hauteur du tableau n'a pas été définie. On écrira <TD HEIGHT="100">

Attention, dans un tableau simple (sans fusion de colonnes) toutes les cellules de la même ligne doivent avoir la même hauteur.

La longueur d'une cellule : WIDTH.

La longueur d'une cellule peut être en % si le tableau est en %. La somme des % des longueurs des colonnes doit être égale au % de la longueur du tableau. Les cellules sans % se partageront le reste de la longueur du tableau de façon égale.
On écrira :
<TD WIDTH="10%">, la cellule prend 10% de la longueur du tableau

La longueur peut être aussi en pixel.

La longueur d'une cellule peut être en Pixel si le tableau est en Pixel. Dans ce cas là, la somme des longueurs des colonnes doit être égale à la longueur du tableau, sauf si la longueur du tableau n'a pas été définie.

On écrira :

Vous pouvez définir la marge intérieur des cellules mais pas d'une cellule seulement.

Pour cela il faut utiliser l'attribut CELLPADDING de la balise <TABLE>.

On écrira (en px):

Chaque cellule peut être mis en couleur, grâce à l'attribut BGCOLOR de la balise <TD>.

On écrira :

Je mets à votre disposition les couleurs web.

Netscape, ne tient pas compte de la couleur de la cellule si celle-ci est vide :

Il faut donc écrire :

Pour créer ce document, il faut utiliser les balises ainsi que leurs attributs :

<TABLE>
<FONT>
<BR>
<IMG> l'image à utiliser <img src="vignette.png" width="154" height="46">
<P>

Ce qu'il faut reproduire (Voici le texte)

Nous allons aborder les fusions de cellules.

Sachez que plus un tableau comporte des cellules fusionnées, plus il y a des risques que le navigateur l'interprète mal.
Pour éviter ce problème, j'insère des tableaux dans la cellule.
Si vous montez les tableaux à la main, je vous conseille fortement de faire un petit dessin avant. Avec ce croquis, vous pouvez déterminer le nombres de colonnes et de lignes de base de votre tableau, et visualiser les cellules à fusionner. Pour les exemples nous nous servirons de ce croquis.

Votre premier exercice consiste à créer ce tableau de base sans fusion de cellules avec les chiffres, d'une hauteur de 200 et d'une longueur de 200.

Voir le résultat

Pour la fusion de cellule verticale, faut utiliser l'attribut ROWSPAN de la balise <TD>, dont la valeur est égale au nombre de cellules fusionnées.

On l'écrit : <TD ROWSPAN="2"> pour deux cellules fusionnés.

Nous allons fusionner la cellule 1 avec la cellule 5.

La cellule 1 reste et la cellule 5 se fusionne avec elle, la cellule 5 n'a plus lieu d'être.
Donc dans le code, vous allez d'abord écrire dans la balise <TD> qui correspond à la cellule 1 : <TD ROWSPAN="2"> (on fusionne 2 cellules) et vous allez supprimer la cellule 5 donc la balise <TD> 5 </TD>.

Voir le résultat

Nous allons fusionner la cellule 4 avec la cellule 8,12 et 16.

C'est la même démarche. La cellule 4 reste, la cellule 8,12 et 16 se fusionnent à la cellule 4 et n'ont plus lieu d'être.

Voir le résultat final

Pour la fusion de cellule horizontale, il faut utiliser l'attribut COLSPAN de la balise <TD>, dont la valeur est égale au nombre de cellules fusionnées.

On l'écrit : <TD COLSPAN="2"> pour deux cellules fusionnés.

Nous allons fusionner la cellule 13 avec la cellule 14 et 15.

Le principe est le même qu'avec ROWSPAN. La cellule 13 reste, la cellule 14 et15 se fusionnent à la cellule 13 et n'ont plus lieu d'être.

Voir le résultat final