Introduction
Info
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.
Toutes les pages que vous avez vue sont mises en page grâce à un tableau.
La composition d'un tableau
Info
Le tableau est composé de trois Balises :<TABLE>
<TR>
<TD>
</TD>
</TR>
</TABLE>
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.
L
a 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.
<TABLE>
<TR>
<TD>
</TD>
<TD>
</TD>
</TR>
</TABLE>
Visuellement :
La bordure d'un tableau
Info
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. (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.
Retestez 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
Les lignes
Info
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>...
Les paramètres de hauteur et largeur
Info
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">
Exercice
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
Info
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 aurra 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.
Voici le code si vous n'y arrivez pas