Fondement du Web

Licence Fondamentale en Sciences

de l’Informatique
Cours 6 : les tableaux

1
 Les tableaux

2
Les tableaux (1/3)

Un tableau est tout simplement une suite de lignes et de colonnes qui
forment un ensemble de cellules.

Les tableaux servent avant tout à présenter des données tabulaires ainsi que
dans un objectif de mise en page de document.

Un tableau est délimité par la balise <table>. Le contenu d'un tableau
HTML est généré horizontalement. C'est-à-dire qu'il n'est pas créé colonne
par colonne mais ligne par ligne.

3
Les tableaux (2/3)

Pour créer un tableau, nous commençons par créer des lignes

grâces aux balises <tr>. Puis nous insérons dans ces lignes les
cellules du tableau grâce aux balises <td> et <th>.
Le contenu (textes, images, autres balises) se trouve uniquement
dans les balises <td> et <th> et ne doit se trouver en aucun cas
en dehors.
La balise "TD" (table data en anglais) définit le début et la fin d'une
cellule.
La balise "TH" s'utilise comme "TD" mais le résultat à l'affichage est un
texte mis en évidence (apparaissant par exemple en gras)

4
 Les tableaux (3/3)

Exemple :

<table border="1">
<tr>
<td>Cellule 1-1</td>
<td>Cellule 1-2</td>
</tr>
<tr>
<td>Cellule 2-1</td>
<td>Cellule 2-2</td>
</tr>
</table>

5
 La légende

• Syntaxe : <CAPTION> ma légende </CAPTION>

• Place : avant le premier TR ;

• Attributs :
• align="left /right / center" pour la position du titre horizontalement par
rapport au tableau
• valign="top / bottom" pour la position verticale (dessus ou dessous le
tableau).

6
 La balise TABLE
Les paramètres inclus dans <TABLE>

 <TABLE BORDER=n>donne au tableau un contour d'épaisseur n; une valeur assez

grande de n donne l'illusion du relief.
 <TABLE BORDER=2 BORDERCOLOR= blue >donne au tableau un contour
d'épaisseur 2 et de couleur bleue.
 <TABLE WIDTH=80%>fixe la largeur du tableau à 80% de la largeur de la fenêtre du
navigateur.
 <TABLE WIDTH=200>fixe la largeur du tableau exactement à 200 pixels quelle que
soit la largeur de la fenêtre du navigateur.
 <TABLE CELLSPACING=n>Défini l'épaisseur du trait en pixels entre les cellules
 <TABLE CELLPADDING=n>Défini l'espace en pixels entre l'objet et le contour d'une
cellule
 <TABLE BGCOLOR="#RRGGBB">Défini la couleur de fond de tout le tableau.
RR, GG et BB sont les valeurs hexadécimales du Rouge(RR), Vert(GG) et Bleu(BB).
 <TABLE BORDER BACKGROUND="image.gif"> Permet d’ajouter une image
comme un arriére plan du tableau

7
 La balise TR
Les paramètres inclus dans <TR>: ils agissent sur toute la
ligne
• <TR ALIGN=LEFT | CENTER | RIGHT>Tous les
contenus des cellules de la ligne ont l'alignement précisé.
• <TR VALIGN=TOP | MIDDLE | BOTTOM >Tous les
contenus des cellules de la ligne sont placés en haut , au
centre ou en bas.
• <TR BGCOLOR="#RRGGBB">Défini la couleur de fond
des cellules de cette ligne.

8
 Les balises TD et TH
Les paramètres inclus dans <TD> ou dans <TH>
• <TD ALIGN=LEFT | CENTER | RIGHT>La cellule
concernée a l'alignement horizontal précisé.
• <TD VALIGN=TOP | MIDDLE | BOTTOM >Agit sur
l'alignement vertical; le contenu de la cellule est placé en
haut , au milieu ou en bas.
• <TD BGCOLOR="#RRGGBB">Définit la couleur de fond
de la cellule.
• Remarque : : Ces paramètres agissent sur une seule cellule.

9
 Les tableaux
Par défaut, la bordure n'est pas visible, dans le code précédent on a rajouté
l'attribut border à la balise <table> pour la faire apparaître. On peut
évidemment modifier la bordure en augmentant la valeur.
On peut voir sur les tableaux affichés précédemment que le texte n'est pas
directement collé à la bordure. Il s'agit là d'un espace interne par défaut des
navigateurs. Pour le supprimer, on doit renseigner l'attribut cellpadding et lui
mettre la valeur "0". <table border="1" cellpadding="30">

De la même manière, la bordure ne fait pas effectivement 1 pixel de large

alors qu'on lui a renseigné la valeur 1. Il persiste un espace par défaut entre
chaque cellule que l'on peut faire disparaître en affectant la valeur "0" à
l'attribut cellspacing. <table border="1" cellspacing="30">

10
 Les tableaux

Le paramètre ALIGN="LEFT ou CENTER ou RIGHT": Il contrôle

l'alignement horizontal du texte à l'intérieur de toutes les cellules d'une ligne
s'il est spécifié dans une balise "tr" ou à l'intérieur d'une seule cellule s'il se
trouve dans les balises "td" ou "th".
Le paramètre VALIGN ="TOP ou MIDDLE ou BOTTOM ou BASELINE" :
contrôle l'alignement vertical du texte à l'intérieur des cellules.
Exemple: <TR VALIGN=TOP> (toutes les colonnes contenues dans
cette ligne seront alignées vers le haut)

11
 Les tableaux
<TABLE BORDER width=100%> <TR>
<TR> <TD valign=middle>
<TH>1</TH> Ici<BR>
<TH>2</TH> on test l'attribut valign pour l'alignement
<TH>3</TH> <b>V</b>Verticale<BR>
<th>4</th>
regarder je suis aligné verticalement au milieu à cause du
</TR>
<TR > middle
<TD align=center> </TD>
Ici<BR> <TD valign=bottom>
on<BR> Ici<BR>
test<BR> on test l'attribut valign pour l'alignement
l'attribut align = center pour l'horizontale <b>V</b>erticale<BR>
</TD>
regarder je suis aligné verticalement en bas à cause du
<TD align=right>
Ici<BR> bottom
on test l'attribut align =right pour l'horizentale<BR> </TD>
regarder je suis aligné à droite <TD valign=top>
</TD> Ici<BR>
<TD align=left> on test l'attribut valign pour l'alignement
Ici<BR> <b>V</b>erticale<BR>
on test l'attribut align = left pour l' l'horizontale
regarder je suis aligné verticalement en haut cause du top
<BR>
regarder je suis aligné à gauche </TD>
</TD> <td>1<br>2<br>3<br>4<br>5<br></td>
<td>1<br>2<br>3<br>4<br>5<br></td>
</TR> </TR>
</TABLE>
 Les tableaux : Fusion
Le paramètre ROWSPAN pour la fusion : détermine le nombre de lignes
qu'une cellule occupe et s'introduit à l'intérieur des balises "td" ou "th". L'on
peut ainsi "étirer" une cellule vers le bas. Lorsque vous définissez les cellules
de la ligne suivante (dans la prochaine balise "tr") il ne sera pas nécessaire de
redéfinir cette cellule.
ROWSPAN="n" où n est un nombre de lignes
Exemple: <TD ROWSPAN=2> (pour une cellule qui occupe deux
lignes)
Le paramètre COLSPAN pour la fusion: permet de définir une cellule qui
occupe plusieurs colonnes. Le résultat est l'étirement de la cellule en largeur.
COLSPAN="m" où m est un nombre de cellules
<TD COLSPAN=2>
13
 Les tableaux
Exemple d’application de ROWSPAN:
<table border="1">
<tr>
<td rowspan="2">Cellule sur deux lignes</td>
<td>Ligne 1 - Colonne 2</td>
<td>Ligne 1 - Colonne 3</td>
<td>Ligne 1 - Colonne 4</td>
</tr>
<tr>
<td>Ligne 2 - Colonne 2</td>
<td>Ligne 2 - Colonne 3</td>
<td>Ligne 2 - Colonne 4</td>
</tr>
</table>
14
 Les tableaux
Exemple d’application de COLSPAN:
<table border="1">
<tr>
<td colspan="5">Cellule qui se répand sur 5 colonnes</td>
</tr>
<tr>
<td>Colonne 1</td>
<td>Colonne 2</td>
<td>Colonne 3</td>
<td>Colonne 4</td>
<td>Colonne 5</td>
</tr>
</table>

15
 Les tableaux
Exemple d’application de ROWSPAN et COLSPAN:
<table border="1">
<tr>
<td colspan="3">Cellule 1</td>
<td>Cellule 2</td>
</tr>
<tr>
<td rowspan="3">Cellule 3</td>
<td>Cellule 4</td>
<td>Cellule 5</td>
<td>Cellule 6</td>
</tr>
<tr>
<td>Cellule 7</td>
<td colspan="2" rowspan="2">Cellule 8</td>
</tr>
<tr>
<td>Cellule 9</td>
</tr>
16 </table>
 exemple

17