Ce chapitre est un chapitre qui 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.
Visuellement ce que donne les deux exemples de code html:

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

Pour supprimer la bordure, il faut mettre 0 pour valeur.
Voici le code pour que vous puissiez tester. (Voici le code)

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".

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">

Nous allons faire un petit exercice pour visualiser les effet du %.
Voici le code pour que vous puissiez tester.
Ne vous préoccupez pas du code, copiez- collez le mettez deux fois, rajoutez les attributs WIDTH et HEIGHT en % pour le premier et en pixel pour le second.
Réduisez et augmentez la fenêtre et observez le premier tableau qui est en %.

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>.

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.
Voici le code si vous n'y arrivez pas