Leçon n°5 : Les tableaux

La création de tableaux avec un logiciel est commode, mais pouvoir corriger ou modifier un code source s'avère souvent très utile.
Nous vous proposons de vous familiariser avec les balises ci-desous.
 

Les balises permettant la réalisation d'un tableau :
Balises : Fonctions : Attributs :
<table>    </table> Début et fin du tableau.
  • cols : nombre de colonnes pour l'ensemble du tableau ex. : cols="3"
  • border : largeur du trait (utilisée avec d'autres balises).
  • width : largeur du tableau, peut être indiquée en pixels ou en pourcentages ex. width= "200" ou width="50%"
  • cellpadding : determine l'espace libre, en pixels, entre le texte et le bord de la cellule ex : cellpadding = "5"
  • cellspacing : espace vide entre deux cellules ex : cellpspacing "5"
  • align : alignement de la table par rapport au document (left, center, right), comme pour une image.
  • bgcolor : permet de sélectionner une couleur de fond.
<tr>         </tr> Nouvelle ligne
  • valign (top, middle, bottom) : positionne le texte en hauteur dans la cellule (concerne toute la ligne).
  • align (left,center, right) : positionne le texte en largeur dans la celulle.
<td>        </td> Nouvelle cellule
  • valign (top, middle, bottom) : positionne le texte en hauteur dans la cellule (concerne seulement la cellule)..
  • align (left,center, right) : positionne le texte en largeur dans la cellule.
  • colspan : oblige le browser à afficher une celulle sur plusieurs colonnes. ex : colspan = "3" (utilisé pour réaliser la première cellule de ce tableau).
  • rowspan :oblige le browser à afficher une cellule sur plusieurs lignes.

Exemple :
 

<table border="1"
<tr>
<td>cellule 1</td>
<td>cellule 2</td>
</tr>
<tr>
<td>cellule 3</td>
<td>cellule 4</td>
</tr>
</table>		 Le résultat est le suivant :
 
cellule 1 cellule 2
cellule 3 cellule 4

Remarque : les tableaux avec une bordure 0 sont très souvent utilisés pour effectuer la mise en page de document.

Exercice : réalisez un tableau simple, puis un tableau plus complexe en vous servant de colspan et rowspan. Ce tableau plus complexe est difficilement réalisable autrement.
 
 

Leçon 6 - Sommaire