HTML
Les tableaux

Conclusion

Table des matières de la conclusion:

les principaux marqueurs
les principaux paramètres
le partie style, ou comment faire bien
l'utilité, ou à quoi ça sert ?
et un exemple.

Principaux marqueurs

Les marqueurs <TABLE> et </TABLE> sont indispensables pour définir un tableau. Notez que si vous omettez le marqueur de fermeture </TABLE>, votre table ne s'affichera pas du tout.
Le marqueur <CAPTION> donne un titre à un tableau.
Le marqueur <TR> définit le début d'une ligne. Il n'est donc pas toujours nécessaire de la terminer par une marqueur </TR> (ça le devient lorsque vous insérez un tableau dans une cellule d'un tableau).
Le marqueur <TD> définit une cellule et peut "s'étendre" sur plusieurs lignes ou colonnes.
Le marqueur <TH> qui permet de définir une cellule comme étant le titre d'une ligne ou d'une colonne.

Un tableau peut contenir de nombreux marqueurs: des titres, listes, formulaires, paragraphes, images, texte préformatté, et même d'autres tableaux (dans ce dernier cas, il faut fermer chacun des lignes et des cellules par, respectivement les marqueurs </TR> et </TD>).

Principaux paramètres

Le marqueur <TABLE> supporte les paramètres suivants:
- BORDER, qui définit l'épaisseur des bordures autours du tableau
- CELLSPACING, qui permet de contrôler l'espacement entre deux cellules
- CELLPADDING, qui permet quant à lui de fixer la distance se trouvant entre le bord d'une cellule et le texte qui s'y trouve (le "rembourrage")
- WIDTH, qui permet de forcer la largeur qu'occupe le tableau sur la page.
Le marqueur <CAPTION> supporte le paramètre ALIGN, qui peut prendre les valeurs top ou bottom.
Le marqueur <TR> supporte les paramètres suivants:
- ALIGN, qui peut prendre les valeurs left, center et right
- VALIGN, qui peut prendre les valeures suivantes: top, middle, bottom ou baseline
Le marqueur <TD> , de même que le marqueur <TH>, accepte les paramètres suivants:
- WIDTH permet de spécifier la largeur d'une cellule, et s'applique également à toute la colonne
- ROWSPAN détermine le nombre de lignes qu'occupe une cellule (autrement dit, ce paramètre spécifie le nombre de cellules verticales adjacentes sur lesquelles elle s'étale).
- COLSPAN permet de définir une cellule qui occupe plusieurs colonnes (autrement dit, ce paramètre spécifie le nombre de cellules horizontales adjacentes sur lesquelles elle s'étale).
- ALIGN peut prendre les valeurs left, center et right.
- VALIGN peut prendre les valeurs top, middle, bottom ou baseline
lorsque vous utilisez les paramètre ROWSPAN et COLSPAN, la valeur que vous leur donnez (correspondant au nombre de lignes/colonnes que la cellule devra recouvrir) remplace la nécessité d'avoir le même nombre de marqueurs TD par ligne. Autrement dit, la règle qui dit qu'il faut définir le même nombre de cellule par ligne reste valable, mais il n'est pas nécessaire d'insérer autant de marqueurs TD pour chaque ligne si des paramètres rowspan et/ou colspan sont présents et correctement paramètré.

Pour une liste plus exhaustive des paramètre dans les tableaux, voir le bare bones guide to HTML.

Style

Il est recommandé d'ajouter un saut de ligne (<br>) dans la dernière cellule de la ligne. En effet, certains browsers textuels n'ont pas implémenté le marqueur <TABLE>, il faut donc indiquer un passage à la ligne pour que votre tableau soit également lisible par ce type de browser.
Pour des raisons de style et de lisibilité, et en particulier lorsque vous insérez un tableau dans la cellule d'un tableau, il est fortement recommandé d'utiliser les marqueurs de fermeture: </TR>, </TD>, </TH> et bien sûr </TABLE> et </CAPTION>. Pour les même raisons, il est également conseillé d'indenter le code source (décaler le texte vers la droite en fonction de la profondeur du niveau de description).

Utilité

Les tableaux sont utiles pour:

Présenter des données numériques ou des tables de correspondance, ce qui permet d'interpréter plus facilement des données, de les comparer entre elles. Ceci correspond à l'utilisation traditionnelle des tableaux.
Donner aux documents un impact supplémentaire en permettant de placer les différents éléments sur une page de manière précise. Ceci permet de mettre en page un document sur plusieurs colonnes. Un exemple fameux d'utilisation de tableaux pour la mise en page se trouve sur le serveur de la Virtual Library (journal on-line) http://www.edoc.com/ejournal/.

Exemple

Un tableau permet de nombreux types de mise en page, et ceci de manière très simple:

Tableau

Code correspondant

	W E L C O M E	Informaticien Psychologue Assistant Etudiant Musicien Eclair ailleurs :-)

See Guest Book Add Guest book

<TABLE BORDER=0>
<TR ALIGN=center>
  <TD VALIGN=top>
     <IMG SRC="images/gael.gif">
  </TD>
  <TD ROWSPAN=3 VALIGN=center>
     <H1>W<br>E<br>L<br>C<br>O<br>M<br>E</H1>
  </TD>
  <TD ROWSPAN=3 VALIGN=bottom>
     <H4>Informaticien<br>
     Psychologue<br>
     Assistant<br>
     Etudiant<br>
     Musicien<br>
     Eclair ailleurs :-)</H4>
  </TD>
</TR>
 
<TR>
  <TD VALIGN=top ALIGN=center>
     <IMG SRC="images/compteur.gif">
  </TD>
</TR>

<TR>
  <TD VALIGN=top ALIGN=center>
     <A HREF="http://tecfa..../4875/">See Guest Book</a><br>
     <A HREF="http://tecfa..../4833/">Add Guest book</A>
  </TD>
</TR>
</TABLE>

Cet exemple est librement inspiré de la homepage de Gael.

Il est également très simple d'obtenir un effet visuel en mettant en page du texte sur 3 colonnes:

Tableau

Code correspondant (structure)

Mximum orem psum inkum maxmum. Orem ipsum winku ximum. Lorem ipsum winkm maxuw mxmu. Lorem ipsum mamum. Lrem ium in kum ? Loem ipsum wikum maxi. Rem ipsum wkum mxiu. Lorem ipsum win kumm. Lorem ipsum wikum maxim. Lorem ipsum winum mum rem ipsum wikum.	Ipsum winkum maximum. Lorem winkum maximum. Lorem ipsum winkum ximum. Lorem ipsum wikm maxm. Lorem ipsum winkum maxium. Lorem ipsu winkum maximum. Lorem ipsum winku.	Wium mximum. Lorem ipsum aximum. Lorem ipsum vinum maximum. Lorem ip winkum maximum. Lorem sum winkum maximum. Lorem ipsum winkum.

<TABLE BORDER=0 CELLPADDING=3>
  <TR>
    <TD ROWSPAN=2>
      2 paragraphes de texte
    </TD>
    <TD>
      du texte
    </TD>
    <TD>
      encore du texte
    </TD>
  </TR>
  <TR>
    <TD COLSPAN=2 ALIGN=CENTER>
      image 
    </TD>
  </TR>
</TABLE>

Lorsque vous aurez tout lu (et tout mémorisé ;), nous pouvons passer au questionnaire.

HTMLLes tableaux

Conclusion

Principaux marqueurs

Principaux paramètres

Style

Utilité

Exemple

W E L C O M E

Informaticien Psychologue Assistant Etudiant MusicienEclair ailleurs :-)

HTML
Les tableaux

W
E
L
C
O
M
E

Informaticien
Psychologue
Assistant
Etudiant
Musicien
Eclair ailleurs :-)