Les tableaux :: Partie 1

par owenho Dim 18 Oct - 8:17

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

La composition d'un tableau:
Le tableau est composé de trois Balises :

Code:: <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.
-La balise <TD> qui définit une cellule dans une ligne.

La bordure d'un tableau:
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.
exemple:

Code:: <table border="1"> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> </table>

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

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

Les lignes :
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 :
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">.

Les colonnes :
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>.
* voila un exemple d'un tableau qui contient 5 lignes 3 colonnes, hauteur de 40% et 40 px de largeur sans épaisseur.

Code:: <table width="40" border="1" height="40%" cellspacing="0"> <tr> <td>Vinciforum</td> <td> </td> <td> </td> </tr> <tr> <td>cours HTML</td> <td> </td> <td> </td> </tr> <tr> <td>les tableaux</td> <td> </td> <td> </td> </tr> <tr> <td>préparé par M.owenho </td> <td> </td> <td> </td> </tr> <tr> <td>modérateur</td> <td> </td> <td> </td> </tr> </table>