Les tableaux


Généralités sur les tableaux

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 liées au tableau

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.

Le premier tableau

<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


Attributs des balises <TABLE> et <TD>

Balise <TABLE>

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.

Balise <TD>

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.


Deuxième exemple de tableau

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


Exercice

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.