informatique

• Syntaxe de base
• Améliorations
• Un exemple
• Une cellule particulière

Un tableau est défini par les balises <TABLE> et </TABLE>.

Un tableau est constitué de lignes, chacune étant définie par les balises <TR> et </TR>.

Une ligne est constituée de cellules, chacune étant définie par les balises <TD> et </TD>.

Il n'y a pas de notion de colonne. Une colonne est définie de manière implicite par la superposition des cases correspondantes dans chaque ligne.

Ainsi ce code :

<TABLE>
 <TR>
      <TD>aaa aaa<BR>aaa aaa aaa<BR>aaa aaa</TD>
      <TD>bbb bbb bbb</TD>
      <TD>ccc</TD>
   </TR>
   <TR>
      <TD>ddd</TD>
      <TD>eee eee</TD>
      <TD>fff fff fff</TD>
   </TR>
</TABLE>

produira ce résultat :

On peut remarquer que le résultat ci-dessus ne correspond pas forcément à ce qu'on nomme communément tableau.

Il n'y a par exemple pas de bords...

Le tableau de base n'est qu'une série de cellules, arrangées selon une grille (qui n'est pas visualisée) et dont les contenus sont alignés à gauche dans les cellules.

Les balises <TABLE>, <TR> et <TD> peuvent contenir des attributs qui en modifient le comportement.

Ainsi on peut :

• mettre un bord : avec « BORDER="xxx" », utilisable dans <TABLE>.
  xxx désigne alors un entier représentant l'épaisseur du bord.
• changer la couleur du fond : avec « BGCOLOR="xxx" », utilisable dans <TABLE>, <TR>, <TD>.
  xxx désigne alors une couleur.
  Les éléments pour lesquels aucune couleur n'est définie sont supposés transparents.
  Pour obtenir la couleur qu'aura finalement une case, il faut la voir comme un empilement de :
  • la page en bas,
  • le tableau,
  • la ligne,
  • et la case en haut.
  Le plus haut placé de ces éléments qui possède une couleur la donnera à la cellule.
• changer l'alignement horizontal du texte dans une case : avec « ALIGN="xxx" », utilisable dans <TD>.
  xxx est une des valeurs left, right et center.
• changer l'alignement vertical des cases dans une ligne : avec « VALIGN="xxx" », utilisable dans <TR>.
  xxx est une des valeurs top, bottom et middle.
• changer l'alignement du tableau sur sa ligne : avec « ALIGN="xxx" », utilisable dans <TABLE>.
  xxx est une des valeurs left, right et center.
• imposer une largeur : avec « WIDTH="xxx" », utilisable dans <TABLE>, <TD>.
  xxx est un pourcentage de la taille de l'écran si l'attribut est appliqué à <TABLE>, tandis qu'il s'agit d'un pourcentage de la largeur du tableau quand il est appliqué à <TD>.
• faire déborder une cellule sur plusieurs colonnes : avec « COLSPAN="xxx" », utilisable dans <TD>.
  xxx désigne alors un entier représentant le nombre de colonnes occupées par la cellule
• faire déborder une cellule sur plusieurs lignes : avec « ROWSSPAN="xxx" », utilisable dans <TD>.
  xxx désigne alors un entier représentant le nombre de lignes occupées par la cellule

Ce tableau, qui est celui vu plus haut qu'on a modifié avec quelques uns des attributs que nous venons de voir, s'obtient par :

<TABLE WIDTH="75%" BGCOLOR="yellow" BORDER="6" ALIGN="center">
   <TR VALIGN="top"> 
      <TD BGCOLOR="pink" ALIGN="right">aaa aaa<BR>aaa aaa aaa<BR>aaa aaa</TD>
      <TD WIDTH="50%">bbb bbb bbb</TD>
      <TD>ccc</TD>
   </TR>
   <TR BGCOLOR="lightgray">
      <TD ALIGN="center">ddd</TD>
      <TD BGCOLOR="pink">eee eee</TD>
      <TD>fff fff fff</TD>
   </TR>
</TABLE>

On peut remplacer les balises <TD> et </TD> par <TH> et </TH>.

Ce qui change : le texte est automatiquement centré dans la cellule (au lieu d'etre aligné à gauche) et mis en gras.

Ce qui ne change pas : tout le reste...