Présentation
des tableaux
Création
de tableaux
Alignement
des éléments du tableau
Fusion
de lignes et de colonnes
|
 |
 1.
Présentation des tableaux
Dans les pages web, les tableaux ont deux utilités importantes
:
- Créer des tables de données tout à
fait classique afin de présenter des résultats
sous forme de lignes et de colonnes (comme on peut le faire
sous Excel ).
- Permettre une meilleure présentation des
informations en positionnant les éléments
de la mise en page à l'endroit de son choix, qu'il
s'agisse d'images ou de texte.
La quasi totalité des sites web fait appel aux tableaux
pour afficher les divers éléments en en faisant
une utilisation quelque peu détournée. |
|
 2.
Création de tableaux
Pour créer un tableau, vous devez définir au moins
une ligne et une colonne ! vous pouvez positionner votre tableau
n'importe où dans votre page.
Voyons les principales balises à utiliser:
- La balise <TABLE>
qui indique au navigateur la création du tableau
- La balise <TH> qui définit l'en-tête
de chaque colonne ( très peu utilisé )
- La balise <TR>
qui définit une ligne
- La balise <TD>
qui définit une cellule
Attention, ces balises doivent être refermées
obligatoirement et ce dans l'ordre dans lequel elles ont été
ouvertes.
Remarque : Il faut savoir qu'on ne définit pas
le nombre de colonnes du tableau; il suffit de comptabiliser
le nombre de cellules ( TD ) figurant dans une ligne
( TR ) pour en déduire le nombre de colonnes du
tableau. |
|
 |
|

Exemple :
|
Janvier |
Février |
Nord |
48000 |
72000 |
Sud |
30000 |
34500 |
Total |
78000 |
106500 |
Code source HTML du tableau :

|
<TABLE>
<TR>
<TH></TH>
<TH>Janvier</TH>
<TH>Février</TH>
</TR>
<TR>
<TD>Nord</TD>
<TD>48000</TD>
<TD>72000</TD>
</TR>
<TR>
<TD>Sud</TD>
<TD>30000</TD>
<TD>34500</TD>
</TR>
<TR>
<TD>Total</TD>
<TD>78000</TD>
<TD>106500</TD>
</TR>
</TABLE>
|
 |
On peut remarquer que les textes des en-têtes apparaissent
automatiquement en gras.
- Dans l'exemple du dessus, l'attribut "BORDER"
a été rajouté à la balise <TABLE>.
cet attribut permet d'ajouter une bordure avec une épaisseur
que vous définissez allant de 0 à ...
A noter qu'à partir de 2 pixels d'épaisseur,
seul le contour du tableau prend cette épaisseur
alors que les bordures de cellules ne dépassent jamais
1 pixel .
Si vous définissez une bordure d'épaisseur
1 ou 2, sans préciser la couleur, IE et Netscape
assigne la couleur grise par défaut comme vous pouvez
le voir dans l'exemple ci-dessus.
- Avec l'attribut BORDERCOLOR, vous pouvez assigner
une couleur à la bordure de votre tableau.
Soit vous écrivez le nom de la couleur en Anglais
bien sûr ( red, yellow, blue etc... ), soit vous donnez
le code hexadécimal de la couleur ( ex : 990000 ).
Nous reviendrons plus en détail sur les couleurs
un peu plus loins dans ce cours.
Attention, sous IE, la couleur apparaît non
seulement autour du tableau mais égalemment au niveau
des bordures de chaques cellules.
Sous Netscape, seul le bord du tableau prend la couleur
et les bordures de cellules se voient assignées une
couleur grise pas des plus harmonieuse !!
|
|
 |
|
D'autres attributs à
la balise <TABLE> :
- l'attribut CELLPADDING
Vous pouvez spécifier en nombre de pixel la distance
entre le bord de la cellule et son contenu.
Cela va permettre d'espacer la bordure de la cellule par
rapport au texte ou à l'image qu'elle contient.
Vous aurez une composition ainsi plus "aérée".
- l'attribut CELLSPACING
Avec ce paramètre, vous définissez le nombre
de pixel entre les différentes cellules de votre
tableau.
Passons tout de suite à un petit exemple :
Voici un tableau avec aucun espacement de cellule ( CELLSPACING
), aucun remplissage de cellule ( CELLPADDING ), une
largeur de 250 px ( WIDTH ), une bordure de 1 px ( BORDER
) et une couleur de bordure rouge ( BORDERCOLOR ). |
cellule 1 |
cellule 2 |
cellule 3 |
cellule 4 |
cellule 5 |
cellule 6 |
cellule 7 |
cellule 8 |
cellule 9 |
Voici le code HTML du 1er tableau :
|
<TABLE WIDTH="250"
BORDER="1" BORDERCOLOR="red"
CELLSPACING="0" CELLPADDING="0">
<TR>
<TD>cellule
1</TD>
<TD>cellule
2 </TD>
<TD>cellule
2</TD>
</TD>
<TR>
<TD>cellule
4 </TD>
<TD>cellule
5 </TD>
<TD>cellule
6 </TD>
</TR>
<TR>
<TD>cellule
7 </TD>
<TD>cellule
8 </TD>
<TD>cellule
9 </TD>
</TR>
</TABLE>
|
|
 |
|
Voici le même tableau avec un espacement de cellule
de 10 px et un remplissage de cellule de 5 px : |
cellule 1 |
cellule 2 |
cellule 3 |
cellule 4 |
cellule 5 |
cellule 6 |
cellule 7 |
cellule 8 |
cellule 9 |
Voici le code HTML du second tableau :
|
<TABLE WIDTH="250"
BORDER="1" BORDERCOLOR="red"
CELLSPACING="10" CELLPADDING="5">
<TR>
<TD>cellule
1</TD>
<TD>cellule
2 </TD>
<TD>cellule
2</TD>
</TD>
<TR>
<TD>cellule
4 </TD>
<TD>cellule
5 </TD>
<TD>cellule
6 </TD>
</TR>
<TR>
<TD>cellule
7 </TD>
<TD>cellule
8 </TD>
<TD>cellule
9 </TD>
</TR>
</TABLE>
|
|
- Les attributs de largeur ( WIDTH ) et de hauteur ( HEIGHT ) :
L'unité utilisé peut être le pixel;
vous aurez alors une largeur de tableau fixe quelle que
soit la largeur de la fenêtre du navigateur.
Si vous redimensionnez la fenêtre du navigateur de
manière importante, vous devez utiliser la barre
de défilement horizontale pour visualiser la partie
droite du tableau :
L'unité peut être exprimée en pourcentage.
La largeur du tableau est alors proportionnelle à
la largeur de la fenêtre du navigateur.
Un tableau de largeur 75% fera toujours les 3/4 de la largeur
de la fenêtre, même si vous redimensionnez la
fenêtre du navigateur; la limite est la taille nécessaire
à l'affichage du contenu des cellules.
Si le contenu est plus grand que le contenant, si vous insérez
par exemple, une image de 200 pixels de large dans une cellule
qui est prévue à 150 pixels de large, le contenu
totalement visible car le tableau va s'adapter.
|
|
 |
|
 3. Alignement
des éléments du tableau
Deux attributs permettent de spécifier l'alignement
des données d'un tableau :
Pour l'alignement horizontal, on utilise l'attribut ALIGN.
- ALIGN="LEFT" : Alignement par défaut;
Les données sont alignées à gauche
de la cellule ( pour TD ) ou de toutes les cellules
( pour TH ou TR ).
- ALIGN="RIGHT" : Les données
sont alignées à droite de la cellule ( pour
TD ) ou de toutes les cellules ( pour TH OU
TR ).
- ALIGN="CENTER" : Les données
sont centrées à l'intérieur ( pour
TD ) ou de toutes les cellules ( pour TH ou
TR ).
Pour l'alignement vertical, l'attribut VALIGN possède
4 valeurs :
- VALIGN="MIDDLE" : Alignemenr par
défaut; Les données sont centrées verticalement
à l'intérieur de la cellule ( pour TD
) ou de toutes les cellules ( pour TH ou TR
).
- VALIGN="TOP" : Les données
sont en haut de la cellule ( pour TD ) ou de toutes
les cellules ( pour TH ou TR ).
- VALIGN="BOTTOM" : Les données
sont en bas de le cellule ( pour TD ) ou de toutes
les cellules ( pour TH ou TR ).
- VALIGN="BASELINE" : Toutes les
données des cellules sont alignées sur une
ligne commune ( uniquement pour TH ou TR ).
Exemple :
Haut
gauche |
Milieu
Haut |
Droit
Haut |
Centre
gauche |
Centre |
Centre
droit |
Bas
gauche |
Bas
centre |
Bas
droit |
|
Voir le code HTML :  |
|
 |
|
 4. Fusion de
lignes et de colonnes
Les lignes et les colonnes peuvent être fusionnées
afin d'obtenir des cellules plus ou moins grandes pour accueillir
les données . On utilise les attributs ROWSPAN
et COLSPAN.
- Pour fusionner 2 cellules adjacentes ( qui se touchent
) sur une ligne, on utilise COLSPAN (pour TD).
- Pour fusionner 2 cellules adjacentes sur une colonne,
on utilise ROWSPAN (pour TD).
Ces attributs sont très utiles notamment pour réaliser
des tableaux complexes mais il s'agit de les manier avec précaution
sous peine de voir la structure de votre tableau exploser!!
Passons tout de suite à un exemple :
Titre du tableau sur deux cellules |
Cellule 3 |
Cellule 4 |
Cellule 5 |
Cellule 6 |
Ici, les cellules 1 et 2 ont été fusionnées
sur la première ligne.
Voici le code HTML :
<table width="300" border="1"
cellspacing="2" cellpadding="4" bordercolor="#990000">
<tr valign="middle" align="center">
<td colspan="2"><font
face="Arial, Helvetica, sans-serif" size="3"
color="#990000"><b>Titre
du tableau sur deux cellules</b></font></td>
</tr>
<tr>
<td><font face="Arial,
Helvetica, sans-serif" size="2" color="#990000">Cellule
3</font></td>
<td><font face="Arial,
Helvetica, sans-serif" size="2" color="#990000">Cellule
4</font></td>
</tr>
<tr>
<td><font face="Arial,
Helvetica, sans-serif" size="2" color="#990000">Cellule
5</font></td>
<td><font face="Arial, Helvetica, sans-serif"
size="2" color="#990000">Cellule
6</font></td>
</tr>
</table>
Autre exemple :
cellule 1 |
cellules 2, 4 et 6 fusionnées sur une même colonne |
Cellule 3 |
Cellule 5 |
Code HTML :
<table width="300" border="1"
cellspacing="2" cellpadding="4" bordercolor="#990000">
<tr>
<td><font face="Arial,
Helvetica, sans-serif" size="2" color="#990000">cellule
1</font></td>
<td rowspan="3" align="center"
valign="middle"><font face="Arial, Helvetica,
sans-serif" size="2" color="#990000">cellules
2, 4 et 6 fusionnées sur une même colonne</font></td>
</tr>
<tr>
<td><font face="Arial,
Helvetica, sans-serif" size="2" color="#990000">Cellule
3</font></td>
</tr>
<tr>
<td><font face="Arial,
Helvetica, sans-serif" size="2" color="#990000">Cellule
5</font></td>
</tr>
</table>
|
|
 |
|
Titre du
tableau |
 |
San
Francisco |
Voici
3 lignes fusionnées |
 |
Tout
en haut |
au
centre |
en
bas |
|
Fin
du tableau |
|
|
Exercice :
Essayez de reproduire ce tableau en utilisant les images de
votre choix.
Pour vous aidez, il faut savoir qu'au départ, ce tableau
comporte 6 lignes et 3 colonnes. |
|