HTML
Les tableaux

Les paramètres du marqueur TD

Pour cette séquence, attachez vos ceintures, éteignez vos mégots, il va falloir s'accrocher. 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 les paramètres du marqueur TD:

Introduction

Objectif:
A la fin de cette séquence, vous saurez utiliser les différents paramètres (et les valeurs qu'ils peuvent prendre) du marqueur TD.
Utilité des paramètres du marqueur TD:
Ces différents paramètres vous permettent d'"étaler" plusieurs cellules sur une ligne ou une colonne. Ceci est utile pour la mise en forme de tableaux, souvent lorsque la bordure n'est pas affichée, vous pourrez centrer le contenu d'une cellule sur plusieurs colonnes (ou lignes).
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. 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 et le marqueur CAPTION.

Exercice d'observation

Vous trouverez ci-dessous deux exercice. Essayez de déduire les réponses correctes en observant les exemples.
Exercice 1
abc
def
a
def

Exercice 2
abc
de
<TABLE BORDER CELLPADDING=5>
  <TR>
     <TD COLSPAN=2>a</TD>
     <TD>b</TD>
  </TR>
  <TR>
     <TD>c</TD>
     <TD>d</TD>
     <TD>e</TD>
  </TR>
</TABLE>
 
<TABLE BORDER CELLPADDING=5>
  <TR>
     <TD>a</TD>
     <TD ROWSPAN=2>b</TD>
     <TD>c</TD>
  </TR>
  <TR>
     <TD>d</TD>
     <TD>e</TD>
  </TR>
</TABLE>
 
<TABLE BORDER CELLPADDING=5>
  <TR>
     <TD ROWSPAN=2>a</TD>
     <TD>b</TD>
     <TD>c</TD>
  </TR>
  <TR>
     <TD>d</TD>
     <TD>e</TD>
  </TR>
</TABLE>

Théorie

Comme nous l'avons vu précédemment, le marqueur TD définit une cellule à l'intérieur d'une ligne. Il est possible de spécifier la taille d'une colonne en utilisant le paramètre WIDTH à l'intérieur de <TD>. De plus, il est souvent utile qu'une cellule occupe plusieurs lignes ou plusieurs colonnes, ceci étant faisable avec les paramètres ROWSPAN et COLSPAN.

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

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>. Le marqueur <TD> Comme vous l'avez certainement remarqué, il faut toujours qu'il y ait le même nombre de marquer TD par ligne, pour un tableau donné. Mais chaque règle a son exception: 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 le même nombre de marqueurs TD pour chaque ligne si des paramètres rowspan et/ou colspan sont présents et correctement paramètrés.

Lorsque vous etes satisfait de l'allure de votre tableau, nous pouvons passer a l'étape suivante.