13. Tableaux

Tout récemment (avril 95), la mise en pages de tableaux a été rendue possible dans la version 1.1N de Netscape. L'information détaillée à ce sujet peut être consultée à l'URL suivant: http://home.mcom.com/assist/net_sites/tables.html

13.1 Commandes de base

Les commandes de base pour créer des tableaux en HTML sont les suivantes:
<TABLE></TABLE>
Cette commande est la commande principale pour ouvrir une zone de tableaux.

<TR></TR>
Commande pour définir une rangée. Il faut utiliser une séquence <TR></TR> pour chacune des rangées requises, à l'intérieur de la zone <TABLE></TABLE> comme dans l'exemple ci-dessous:
    1234
    5678

<TD></TD>
Commande pour spécifier les données pour chaque rangée comme dans l'exemple ci-dessus. Le code pour produire ce tableau s'écrira donc:
<TABLE>
<TR><TD>1</TD><TD>2</TD><TD>3</TD><TD>4</TD></TR>
<TR><TD>5</TD><TD>6</TD><TD>7</TD><TD>8</TD></TR>
</TABLE>

Les paramètres par défaut sont l'alignement à gauche (ALIGN=LEFT) et l'alignement vertical au centre (VALIGN=MIDDLE).

<TH></TH>
Commande pour ajouter une rangée en entête. Les paramètres par défaut des entêtes (TH= "Table header") sont l'usage du caractère gras et la position centrée.

<CAPTION></CAPTION>
Commande permettant de mettre un titre au-dessus <CAPTION ALIGN=TOP> ou en-dessous <CAPTION ALIGN=BOTTOM> d'un tableau. La commande doit être placée directement sous la commande TABLE et avant la première rangée de données.

Exemple de tableau sans bordures avec titre et entêtes

Le code:

<TABLE border=1>
<CAPTION ALIGN=TOP> Titre placé en haut </CAPTION>
<TR>
<TH>jour de la semaine</TH><TH>montant</TH><TH>Total</TH>
</TR>
<TR>
<TD>Lundi</TD><TD>$456.00</TD><TD>$456.00</TD>
</TR>
<TR>
<TD>Mardi</TD><TD>$200.00</TD><TD>$656.00</TD>
</TR>
</TABLE>
donne:

Titre placé en haut
jour de la semainemontantTotal
Lundi$456.00$456.00
Mardi$200.00$656.00

ou

Titre placé en bas
jour de la semainemontantTotal
Lundi$456.00$456.00
Mardi$200.00$656.00

13.2 Attributs

Les attributs des tableaux sont:

BORDER
L'attribut BORDER se place dans la commande TABLE et permet de définir une ligne d'épaisseur variable entourant le tableau.

Exemple de tableau avec bordure simple

Le code:
<TABLE BORDER>
<TR>
<TH>jour de la semaine</TH><TH>montant</TH><TH>Total cumulé</TH>
</TR>
<TR>
<TD>Lundi</TD><TD>$456.00</TD><TD>$456.00</TD>
</TR>
<TR>
<TD>Mardi</TD><TD>$200.00</TD><TD>$656.00</TD>
</TR>
</TABLE>
donne:

jour de la semainemontantTotal cumulé
Lundi$456.00$456.00
Mardi$200.00$656.00

Exemple de tableau avec bordure d'épaisseur variable

Le code:

<TABLE BORDER=10>
<TR>
<TH>jour de la semaine</TH><TH>montant</TH><TH>Total cumulé</TH>
</TR>
<TR>
<TD>Lundi</TD><TD>$456.00</TD><TD>$456.00</TD>
</TR>
<TR>
<TD>Mardi</TD><TD>$200.00</TD><TD>$656.00</TD>
</TR>
</TABLE>

donne:

jour de la semainemontantTotal cumulé
Lundi$456.00$456.00
Mardi$200.00$656.00

ALIGN
La commande ALIGN utilisée dans la zone de CAPTION permet de placer le titre au-dessus ou en-dessous du tableau.
Cette même commande utilisée dans les sections <TH>, <TR> ou <TD> permet plutôt d'aligner le contenu des cellules à gauche ALIGN=LEFT, à droite ALIGN=RIGHT ou au centre ALIGN=CENTER.

VALIGN
Cette commande est utilisée à l'intérieur des cellules TR TH ou TD et permet d'aligner verticalement le contenu en haut TOP , au centre MIDDLE , au bas BOTTOM ou sur la même ligne BASELINE .

NOWRAP
Cette commande, lorsqu'utilisée dans les cellules TH ou TD empêche que le texte ne soit brisé en deux ou plusieurs lignes. Comparez les deux tableaux suivants pour voir la la différence.

La commande s'écrit comme suit: <td nowrap> ou <th nowrap> selon le cas.

contenu très long sans nowrap

contenu très long avec nowrap

COLSPAN
La commande colspan dans un tableau permet d'ajouter une rangée qui s'étend sur toute la largeur du nombre de colonnes que l'on désigne. Ainsi, une valeur de <td colspan=2> affichera une boîte d'une largeur de 1 colonne et de 2 rangées (voir exemple 1). Une valeur de <td colspan=10> affichera une longue colonne de 1 colonne par 10 rangées (voir exemple 2). Les variantes sont visibles dans les exemples ci-dessous:

Les commandes s'appliquent indifféremment avec <td> ou <th>.

exemple 1
remarquejoli coup d'oeil

exemple 2
remarquesjolicoupd'oeil n'estcepasaveccetattribut

On peut également placer la colonne supplémentaire n'importe où dans le tableau comme à l'exemple 3 complètement en bas, ou dans l'exemple 4 au centre.

remarquejoli coup d'oeil
exemple 3

remarquejoli coup d'oeil
exemple 4
autre remarquefantastique

ROWSPAN
La commande rowspan dans un tableau permet d'ajouter une colonne qui s'étend sur toute la largeur du nombre de rangées que l'on désigne. Ainsi, une valeur de <td rowspan=2> affichera une boîte d'une largeur de 1 colonne et de 2 rangées (voir exemple 5). Une valeur de <td rowspan=10> affichera une longue colonne de 1 colonne par 10 rangées (voir exemple 6). Les variantes sont visibles dans les exemples ci-dessous:

Les commandes s'appliquent indifféremment avec <td> ou <th>.

exemple 5remarque
joli coup d'oeil

exemple 6remarques
joli coup d'oeil
joli coup d'oeil
joli coup d'oeil
joli coup d'oeil
joli coup d'oeil
joli coup d'oeil
joli coup d'oeil
joli coup d'oeil
joli coup d'oeil

On peut également placer la colonne supplémentaire n'importe où dans le tableau comme à l'exemple 7 complètement à droite, ou dans l'exemple 8 au centre.

remarqueexemple 7
joli coup d'oeil

remarqueexemple 8autre remarque
joli coup d'oeiln'est-ce-pas

Dans l'exemple 9 qui suit, une combinaison des commandes rowspan et colspan sont utilisés.

exemple 9
remarquessuperextrafantastique
superextrafantastique
superextrafantastique

CELLSPACING
La commande cellspacing détermine l'épaisseur de la bordure. Elle doit être définie avec la commande border.

Comparer ces deux tableaux, le premier a une valeur d'espacement des bordures de 0 alors que le deuxième a une valeur de 5.

100200300
400500600

100200300
400500600

CELLPADDING
La commande cellpadding détermine l'espacement entre les données dans les cellules et la bordure. Elle doit être définie avec la commande border.

Comparer ces deux tableaux, le premier a une valeur d'espacement des cellules de 0 alors que le deuxième a une valeur de 5.

100200300
400500600

100200300
400500600

Les commandes cellspacing et cellpadding peuvent être utilisées de façon combinée comme dans l'exemple ci-dessous avec des valeurs respectives de 0 et de 5.

100200300
400500600

100200300
400500600

WIDTH
Variation de la largeur totale d'un tableau.

Voici trois tableaux configurés avec une largeur respective de 30, 60 et 90%. Les pourcentages sont calculés selon la largeur de la fenêtre. Ainsi, si vous redimensionnez cette fenêtre plus large ou plus étroite, les tableaux se recalculeront en conséquence. Les commandes pour les obtenir sont:

<table border=1 width="30%">
<table border=1 width="60%">
<table border=1 width="90%">

567891123
765981321

567891123
765981321

567891123
765981321

L'ajustement précis de la largeur des colonnes peut être obtenu en utilisant un nombre de pixels au lieu de pourcentages. On peut utiliser une valeur globale pour l'ensemble du tableau ou encore des valeurs fixes pour chaque colonne.

Dans l'exemple A, le tableau a une largeur globale de 300 pixels.

Exemple A
567891123
765981321

Dans l'exemple B, chaque colonne a une largeur fixe de 30 pixels. Le tableau a donc une largeur globale de 90 pixels.

Exemple B
567891123
765981321

Dans l'exemple C, la première colonne a une largeur fixe de 30 pixels, la deuxième, une largeur de 50 pixels et la troisième, une largeur de 70 pixels. Le tableau a donc une largeur globale de 150 pixels.

Exemple C
567891123
765981321

Dans les exemples B et C les valeurs de largeur de colonne se placent dans la commande <td> ou <th> comme suit <td width="30">.

13.3 Insertion d'images dans un tableau

L'insertion d'une ou de plusieurs images dans un tableau est aussi possible.
Dans le premier exemple ci-dessous, une seule image est emprisonnée dans un tableau. La commande suivante est insérée pour obtenir ce qui suit:
<table border cellpadding=0
<tr><td><IMG SRC="images/Benseignement.gif"></tr></td>
</table>

On peut aussi insérer plusieurs images, côte à côte, ou en mosaïque, selon l'effet désiré.

Exemple de tableau complexe avec images et cellules disposées en mosaïque

Dans cet exemple, on utilise les commandes et attributs suivants: BORDER, WIDTH, COLSPAN, ALIGN=CENTER, ALIGN=RIGHT TR, TH, TD, et IMG SRC. Remarquez que l'on peut dessiner des carrés vides en tapant les commandes TD et /TD sans y entrer de données. On peut aussi augmenter la taille du caractère à l'intérieur d'une cellule.

types de tracteurs
2 roues motrices4 roues motrices
Caractéristiques des tracteurs Coût $25 000$45 000
couleurrougerouge
remorquedisponible disponible
toituresupplément supplément
programme d'entretieninclus supplément
disponibleouidébut 1996

Le code de ce tableau est: 


<center>

<table border=2 width=70%>

<tr><th colspan=2 align=center><IMG SRC="images/imprimante.GIF"></th> 

<th colspan=2><FONT SIZE="+2">types de tracteurs</FONT SIZE="+2"></th></tr>  

<tr><td></td><td></td><th>2 roues motrices</th><th>4 roues motrices</th></tr>

 <tr><th rowspan=6> Caractéristiques des

tracteurs </th><th>Coût;/th><td

align=center> $25 000</td><td align=center>$45 000</td></tr>

<tr><th>couleur</th><td align=center>rouge</td><td align=center>rouge</td></tr> 

<tr><th>remorque</th><td align=center>disponible</td>

<td align=center>disponible</td></tr> <tr><th>toiture</th><td align=center>suppl&eacute;ment</td><td

align=center>suppl&eacute;ment</td></tr>

<tr><th>programme d'entretien</th><td align=center>inclus</td><td

align=center>supplément;/td></tr> 

<tr><th>disponible</th><td

align=center>oui</td><td align=center>début 1996</td></tr>  

<tr><td></td><td colspan=3 align=right><IMG

SRC="photos/machinerie8.jpeg"></td></tr>   

</TABLE>

</center>

13.4 Insertion de pointeurs dans un tableau

L'incorporation de pointeurs ou liens est aussi possible dans un tableau. Il suffit de définir une commande A HREF dans une cellule.

Alérion
FSAA
Serveur Yahoo

Le code requis est:


<table border=3 width="35%">

<tr><th><A HREF="http://www.ulaval.ca/">Al&eacute;rion</A></th></tr>

<tr><th><A HREF="http://www.fsaa.ulaval.ca">FSAA</A></th></tr> 

<tr><th><A HREF="http://www.yahoo.com">Serveur Yahoo</A></th></tr>

</table>

13.5 Insertion de listes dans un tableau

Il est également possible d'insérer des listes dans des cellules en tapant les commandes <UL><OL> et <LI> à l'intérieur de cellules comme dans l'exemple ci-dessous:

Liste des items en vente ce mois-ci
  • Cartes à la Mac, volume 1
  • Cartes à la Mac, volume 2
  • WriteNow 4.0

    • Le code pour obtenir ce tableau avec liste est:

    
<table border=2>

<tr><td> Liste des items en vente ce mois-ci</td></tr>

<tr><td>

<LI>Cartes &agrave; la Mac, volume 1

<LI>Cartes &agrave; la Mac, volume 2

<LI>WriteNow 4.0

</td></tr>

</table>

    13.6 Insertion d'un tableau dans un tableau

    La commande <table> permet également d'insérer un tableau dans un tableau. Il s'agit tout simplement de préparer un tableau et de mettre toutes les commandes dans une cellule. L'exemple ci-dessous correspond au code suivant:

    Tableau dans un tableau
    Ceci est très intéressant n'est-ce-pas?

    Le code requis est: 

    
<table border=1>

<tr><th>Tableau dans un tableau</th></tr>

<tr><td>

<table border=3><tr><th>Ceci est tr&egrave;s int&eacute;ressant n'est-ce-pas?</th></tr></table>

</td></tr>

</table>

    Chapitre suivant
    1 2 3 4 5 6 7
    8 9 10 11 12 13 14
    15 16 17 18 19 20
    Retour à la page principale