HTML
Les tableaux

L'alignement

Si vous n'avez pas encore fait la première partie (l'introduction aux tableaux), et que vous débutez en HTML, nous vous conseillons de faire la première séquence avant celle-ci et de les visiter dans l'ordre prévu.

Table des matières de la séquence sur l'alignement des tableaux:

une introduction
un exercice d'observation
une partie théorique
une partie exercice
et une conclusion.

Introduction

Objectif:: Cette séquence vous apprend les différents paramètres qui vous permettent de spécifier l'alignement dans un tableau.
Utilité de l'alignement:: Les paramètres qui définissent l'alignement sont utiles pour affiner d'avantage la présentation, la mise en forme d'un tableau. Vous pourrez aligner le tableau en entier, par rapport au texte qui l'entoure, vous pourrez aligner le contenu d'une cellule ou encore appliquer un alignement à toute une ligne.
Prérequis:: Il faut que vous ayez des notions de base en HTML, notamment savoir ce qu'est un marqueur et comment cela s'utilise, en particulier le marqueur de saut de ligne (BR) et celui de mise en gras (STRONG). Il faut, en plus, que vous ayez fait les séquences précédentes qui posent les bases des tableaux en HTML, à savoir les options du marqueur TABLE, le marqueur CAPTION, les paramètres du marqueur TD, le marqueur TH, ...

Exercice d'observation

Ne vous laissez pas impressionner par l'apparente impression d'anarchie que donne le code de l'exemple ci-desssous ;) On va le décortiquer tranquillement et vous verrez que tout s'organise parfaitement.

Tableau

Code correspondant

un texte ici	W E L C O M E	Bonjour Comment Allez- Vous ?
Un autre texte ici
du texte

<TABLE BORDER=1>
 <TR ALIGN=center>
  <TD VALIGN=top>
     un texte ici </TD>
  <TH ROWSPAN=3>
    W<br>E<br>L<br>C<br>O<br>M<br>E </TH>
  <TD ROWSPAN=3 VALIGN=bottom>
    Bonjour<br>
    Comment<br>
    Allez-<br>
    Vous ?<br> </TD>
 </TR>
 <TR>
  <TD VALIGN=top>
    Un autre texte ici </TD>
 </TR>
 <TR>
  <TD VALIGN=bottom ALIGN=center>
    du texte </TD>
 </TR>
</TABLE>

Théorie

L'alignement est capital pour la mise en forme d'un tableau. On peut spécifier l'alignement d'un tableau, du contenu d'une ligne ou du contenu d'une seule cellule. Il suffit pour ce faire d'utiliser correctement les paramètres ALIGN et VALIGN qui correspondent respectivement à l'alignement horizontal et vertical.
Il est important de noter que l'alignement spécifié dans une cellule aura priorité sur l'alignement défini pour une ligne.

Selon les différents marqueurs, on pourra spécifier différentes valeurs pour les paramètres ALIGN et VALIGN.

Le marqueur <TABLE> supporte le paramètre ALIGN et les valeurs left ou right. Ces valeurs alignent toute la table à gauche ou à droite par rapport au texte qui l'entourre.
Le marqueur <TR> définit une ligne.
- Il accepte le paramètre ALIGN, qui peut prendre les valeurs left, center et right. Ces paramètres auront pour effet d'aligner les contenu des cellules sur toute une ligne.
- Le paramètre VALIGN peut prendre les valeures suivantes: top, middle, bottom ou baseline. Cette dernière valeure a pour effet d'aligner le contenu des cellules de toute la ligne sur le haut de la ligne la plus haute. Si vous n'avez pas compris, un exemple sera plus parlant (voir ci-dessous).
Le marqueur <TD>, de même que le marqueur <TH>, accepte les paramètres ALIGN et VALIGN.
- ALIGN peut prendre les valeurs left, center et right.
- VALIGN peut prendre les valeurs top, middle, bottom ou baseline.

Exercice

Essayez maintenant de reproduire le tableau ci-dessous:

Consigne: Entrez le code correspondant au tableau ci-dessus, puis cliquez sur le bouton Comparer pour obtenir un apperçu de ce que vous aurez fait.

Conclusion

En résumé, et pour représenter les choses de manière plus simple, retenez que le paramètre ALIGN spécifie l'alignement horizontal:

et le paramètre VALIGN spécifie l'alignement vertical:

Lorsque vous êtes satisfait de l'allure de votre tableau, nous pouvons passer à la conclusion générale.