Les tableaux

Le tableau est un outil essentiel pour faire de belles pages. En effet, il permet d'organiser correctement tous les éléments qui la composent. N'hésite donc pas à en user et en abuser.

Un tableau qu'est-ce ? C'est très simple : c'est un ensemble de cases qui permet de découper sa page en différentes parties. Par exemple:

   
     
     
 

Remarque : ici j'ai fait apparaître les bordures mais ce n'est pas obligatoire, le découpage peut rester invisible!!!

Programmer un tableau

La syntaxe est très simple : il y a trois balises à utiliser :


<TABLE></TABLE>: délimitent le tableau.
<TR></TR> : délimitent une ligne dans le tableau.
<TD></TD> : délimitent une case dans une ligne.

On remarque qu'il y a un ordre d'imbrication particulier: d'abord on ouvre le tableau, puis on ouvre une ligne, puis on ouvre une case, on met son contenu, puis on la referme; on peut créer de même d'autres cases dans la ligne, puis on referme la ligne, puis on peut créer d'autres lignes avec des cases puis on referme le tableau. Exemple:

Il est indispensable que chaque ligne comporte le même nombre de cases !!!!

Fusionner des cellules

Cependant ces instructions très basiques ne permettent que de faire des tableaux à cases alignées. Pour faire des tableaux plus biscornus tel que celui présenté plus haut on peut fusionner des cases. Pour cela on rajoute des attributs (COLSPAN pour une fusion horizontale et ROWSPAN pour une verticale) dans la balise de la case supérieure gauche du paquet à fusionner et on supprime les balises des autres cases qui sont fusionnées avec cette dernière. Nous allons étudier cela sur un exemple en construisant pas à pas le tableau ci-dessous. Les groupes de cases fusionnées sont d'une même couleur


Les instructions sont alors:


<TABLE> (ouverture du tableau)
<TR> (ouverture de la 1ère ligne)
<TD COLSPAN=2 ROWSPAN=2> (ouverture de la case bleu marine en haut à gauche montrant qu'elle est fusionnée en un rectangle de deux cases sur deux cases)
</TD> (fermeture de la case)
<TD> (ouverture de la case jaune)
</TD> (fermeture)
<TR> (2ème ligne)
<TD ROWSPAN=2> (ouverture de la case verte supérieure gauche fusionnée avec celle du dessous)
</TR> fin de ligne
<TR>
<TD COLSPAN=2> ouverture de la case bleu ciel de gauche et fusion avec celle de droite
</TD>
</TR>
</TABLE>

Autres attributs

On peut utiliser des attributs supplémentaires dans les balises pour gérer certains paramètres du tableau:

Attributs de TABLE

  • ALIGN = left (ou right) : permet d'aligner le tableau à gauche ou à droite de la page, laissant ainsi le texte s'écouler autour.
  • WIDTH = taille : permet de donner la largeur totale du tableau en pixels ou en pourcents de largeur de page(WIDTH=100 donne 100 pixels et WIDTH=100% donne 100% de la page. (par défaut le tableau s'adapte à la taille du contenu de celui-ci)
  • HEIGHT=taille : a la meme utilisation que WIDTH pour la hauteur
  • BORDER = nbdepixels : permet de spécifier la taille de la bordure (zéro par défaut)
  • BORDERCOLOR="#couleur" : permet de spécifier la couleur de la bordure (code couleur en héxadecimal)

Attributs de TD

  • HEIGHT et WIDTH : largeur et hauteur de la case
  • BGCOLOR="#couleur" : spécifie la couleur d'arrière plan.