Un tableau est un ensemble de cellules structurées en lignes
et en colonnes.
En HTML les tableaux ont une grande importance car ils servent à
la mise en page. Ils permettent :
Les balises principales sont <TABLE>...</TABLE>. Elles entourent
le tableau. Entre ces balises seront définies les cellules, ligne
par ligne.
Les balises <TR>...</TR> entourent les cellules qui forment une
ligne du tableau.
Les balises <TD>...</TD> entourent une cellule.
Il est important de comprendre qu'une cellule du tableau peut contenir
toute structure HTML : texte simple, paragraphes, listes, tableaux, images,
....
On peut aussi utiliser les balises <TH>...</TH> pour définir
des cellules d'entête de ligne ou de colonne.
<html>
<head;>
<title>Mon premier tableau</title>
</head>
<body>
Voici mon premier tableau :
<table border=1>
<tr>
<td>Cellule L1C1</td>
<td>Cellule L1C2</td>
<td>Cellule L1C3</td>
</tr>
<tr>
<td>Cellule L1C1</td>
<td>Cellule L1C2</td>
<td>Cellule L1C3</td>
</tr>
</table>
</body>
</html>
Ce qui donne :
Cellule L1C1 | Cellule L1C2 | Cellule L1C3 |
Cellule L1C1 | Cellule L1C2 | Cellule L1C3 |
La balise <TABLE> peut contenir un certain nombre d'attribut qui définissent son positionnement, sa taille et son aspect.
1 BORDER
L'attribut BORDER permet de fixer la taille en pixels des lignes qui
délimitent les cellules du tableau. Si cette taille est 0, ces lignes
ne sont pas affichées.
2 WIDTH
L'attribut WIDTH permet de fixer la largeur du tableau en pixels ou
en pourcentage de la largeur disponible.
3 ALIGN
L'attribut ALIGN permet de définir l'alignement du tableau dans
la largeur de l'espace disponible. Les valeurs possibles sont LEFT, CENTER
et RIGHT.
4 CELLSPACING
L'attribut CELLSPACING permet de définir en pixels l'espace
de séparation des cellules.
5 CELLPADDING
L'attribut CELLPADDING permet de définir en pixels l'espace
séparant le bord des cellules de leur contenu.
La balise <TD> peut contenir un certain nombre d'attribut définissant le comportement d'une cellule.
1 WIDTH
L'argument WIDTH permet de définir la largeur de la cellule
en pixels ou en pourcentage de la largeur du tableau.
2 BGCOLOR
L'attribut BGCOLOR permet de définir la couleur de fond de la
cellule.
3 VALIGN
L'attribut VALIGN permet de définir l'alignement vertical dans
la cellule. Les valeurs possibles sont TOP, MIDDLE et BOTTOM.
4 COLSPAN
L'attribut COLSPAN permet de définir le nombre de colonnes de
tableau que devra occuper la cellule.
5 ROWSPAN
L'attribut ROWSPAN permet de définir le nombre de lignes de
tableau que devra occuper la cellule.
Utilisation de colspan et de rowspan.
<table border=1 cellpadding=3 cellspacing=1>
<tr>
<td colspan=3>J'occupe les 3 colonnes.</td>
</tr>
<tr>
<td width=70 rowspan=2>Sur deux lignes</td>
<td>Cellule simple</td>
<td>Cellule simple</td>
</tr>
<tr>
<td>Cellule simple</td>
<td>Cellule simple</td>
</tr>
</table>
Ce qui donne :
J'occupe les 3 colonnes. | ||
Sur deux lignes | Cellule simple | Cellule simple |
Cellule simple | Cellule simple |
La mission consiste à réaliser un répertoire de sites que vous pourrez consulter lors des prochaines séances pour trouver des renseignements sur le langage HTML et sur JAVASCRIPT.