| Posons la table... |
|
||||||||||||||||
| ...et révolutionnons complètement les pages web ordinaires |
|||||||||||||||||
Après cette leçon, vous pourrez :
Note : Si vous n'avez pas les documents des leçons précédentes, téléchargez une copie maintenant. Vous pouvez également essayer de vous référer à la page de test pour voir si votre navigateur supporte les tags utilisés dans cette leçon.
Les tables furent introduites avec le HTML 3.0 puis améliorées par Netscape afin d'ajouter une autre dimension à la conception des pages web. Elles apportent une structure pour organiser les autres éléments HTML en "quadrillage" sur la page. Une des plus fréquentes utilisations des tables est quand vous devez formater... des colonnes de texte ! Mais les tables ouvrent la porte à bien d'autres options de mise en page.
Le code HTML pour concevoir des tables peut sembler très complexe -- mais nous allons démarrer doucement et construire petit à petit des tables pour notre leçon Web Volcan.
Pour commencer, gardez à l'esprit ce concept :
Les tables sont construites depuis le coin en haut à gauche, puis les colonnes de la première ligne, puis la deuxième ligne et ses colonnes de gauche è droite...
--> --> --> --> --> -->
___________________________|
|
--> --> --> --> -->
Nous appellerons chaque quadrillage d'une table une cellule.
Le HTML pour la structure d'une table standard est présenté ci-dessous :
| HTML | Résultat | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|
<table border=1> <tr> <td>Ligne 1 colonne 1</td> <td>Ligne 1 colonne 2</td> <td>Ligne 1 colonne 3</td> </tr> <tr> <td>Ligne 2 colonne 1</td> <td>Ligne 2 colonne 2</td> <td>Ligne 2 colonne 3</td> </tr> <tr> <td>Ligne 3 colonne 1</td> <td>Ligne 3 colonne 2</td> <td>Ligne 3 colonne 3</td> </tr> </table> |
|
L'attribut border=1 dans le tag <table> indique au navigateur de tracer une ligne d'1 pixel d'épaisseur autour de la table. Remarquez que chaque ligne est définie par des tags Table Row (Ligne de Table) <tr>...</tr> et les cellules de chaque ligne par des tags Table Data (Donnée de Table) <td>...</td>. Chaque tag <td>...</td> peut contenir n'importe lesquelles des balises HTML étudiées dans ce didacticiel -- des entêtes, du texte stylisé, des liens hypertexte, des images incluses, etc. Vous pouvez, à l'intérieur de ce tag, utiliser plusieurs attributs pour contrôler l'alignement des éléments dans une cellule :
| Alignement Horizontal | Alignement Vertical |
|---|---|
|
|
Vous pouvez combiner ces attributs :
<td align=left valign=bottom>
Ce code HTML créera une cellule avec des éléments alignés en bas et à gauche de la cellule.
La table présentée ci-dessus est très simple et carrée -- trois lignes par trois colonnes. Regardez ce que l'on peut faire avec les attributs colspan et rowspan dans les tags <td>...</td>.
| HTML | Résultat | ||||||||
|---|---|---|---|---|---|---|---|---|---|
<table border> <tr> <td>Ligne 1 colonne 1</td> <td align=center colspan=2> Ligne 1 colonnes 2-3</td> </tr> <tr> <td>Ligne 2 colonne 1</td> <td>Ligne 2 colonne 2</td> <td>Ligne 2 colonne 3</td> </tr> <tr> <td>Ligne 3 colonne 1</td> <td>Ligne 3 colonne 2</td> <td>Ligne 3 colonne 3</td> </tr> </table> |
** Notez l'attribut pour la deuxième cellule de la première ligne -- il étend (span) la cellule sur 2 colonnes. Nous avons aussi aligné le texte au centre de cette cellule. |
||||||||
|
|||||||||
| Ok, maintenant que nous avons étendu une cellule sur deux colonnes, essayons de créer une cellule s'étendant sur deux lignes. Souvenez-vous qu'il faut construire le HTML du coin en haut à gauche, puis de gauche à droite, puis en dessous de gauche à droite... | |||||||||
| HTML | Résultat | ||||||||
<table border=1> <tr> <td>Ligne 1 colonne 1</td> <td align=center colspan=2> Ligne 1 colonnes 2-3</td> </tr> <tr> <td>Ligne 2 colonne 1</td> <td valign=top rowspan=2> Ligne 2 colonne 2</td> <td>Ligne 2 colonne 3</td> </tr> <tr> <td>Ligne 3 colonne 1</td> <td>Ligne 3 colonne 3</td> </tr> </table> |
|
||||||||
Il y a encore pas mal de choses à couvrir, mais arrêtons ces exemples ennuyeux et travaillons sur notre page web...
Notre page Introduction contient une table ("Volumes de Quelques Eruptions Volcaniques Célèbres") que nous avons d'abord créée dans la leçon 9 en utilisant les tags preformat <pre>...</pre>. Nous allons maintenant améliorer ce tableau grâce aux tags de table.
<table border> <tr> <th>Eruption</th> <th>Date</th> <th>Volume en km<sup>3</sup></th> </tr> <tr> <td>Paricutin, Mexique</td> <td align=center>1943</td> <td align=center>1.3</td> </tr> <tr> <td>Mt. Vésuve, Italie</td> <td align=center>79 av. J.C.</td> <td align=center>3</td> </tr> <tr> <td>Mont St. Helens,<br>Washington</td> <td align=center>1980</td> <td align=center>4</td> </tr> <tr> <td>Krakatoa, Indonésie</td> <td align=center>1883</td> <td align=center>18</td> </tr> <tr> <td>Long Valley, Californie</td> <td align=center>préhistorique</td> <td align=center>> 450 & < 700</td> </tr> <tr> <td>Yellowstone, Wyoming</td> <td align=center>préhistorique</td> <td align=center>400</td> </tr> </table>
NOTE : Regardez le HTML de la première ligne. Les tags Table Header Titre de Table) <th>...</th> fonctionnent exactement comme les tags <td>...</td>, excepté le fait que le texte est automatiquement gras et tous les éléments centrés.
Notez également que, dans les cellules de "Long Valley", vous devez utiliser les caractères spéciaux HTML pour afficher les symboles "<", ">" et "&" (Voir la leçon 10)
NOTE : La table ne sera peut-être pas complètement visible sur un arrière-plan noir.
Maintenant, ajoutons des choses à notre table.
Certains navigateurs vous permettent de spécifier d'autres paramètres pour les lignes d'une table. Ce sont les attributs des tags de table :
<table border=X cellpadding=Y cellspacing=Z>
où X est la largeur (en pixels) de la bordure externe de la table. L'attribut cellpadding définit "l'espace vide" existant entre les éléments des cellules et les bords des cellules -- des valeurs plus grandes pour Y feront des cellules plus larges ("remplissage" de cellule). L'attribut cellspacing définit (en pixels) la largeur des lignes divisant les cellules à l'intérieur de la table.
Modifiez votre tag de <table> comme suit :
<table border=3 cellpadding=4 cellspacing=8>
<table border=3 cellpadding=4 cellspacing=8> <caption><b><font size=+1> Volumes de Quelques Eruptions Volcaniques Célèbres</font></b></caption>Vous pouvez inclure n'importe quel tag HTML à l'intérieur de la balise <caption> ; assurez-vous simplement que ces tags sont à l'intérieur des tags <table>...</table>.
<tr> <th><font color=#EE8844>Eruption</font></th> <th><font color=#EE8844>Date</font></th> <th><font color=#EE8844>Volume en km<sup>3</sup></font></th> </tr>
<tr> <th></th> <th><font color=#EE8844>Eruption</font></th> <th><font color=#EE8844>Date</font></th> <th><font color=#EE8844>Volume en km<sup>3</sup></font></th> </tr>
<tr> <td rowspan=4> <font color=#EE8844> <i>éruptions<br> observées par<br> les humains</i> </font></td> <td>Paricutin, Mexique</td> <td align=center>1943</td> <td align=center>1.3</td> </tr>
NOTE : Nous avons ajouté quelques tags <br> pour que la première colonne ne soit pas trop large. Vous pouvez essayer de voir ce que ça fait quand vous enlevez ces balises.
<tr> <td rowspan=2> <font color=#EE8844> <i>déduits<br> par l'étude<br> des dépôts</i> </font></td> <td>Long Valley, Californie</td> <td align=center>préhistorique</td> <td align=center>> 450 & < 700</td> </tr>
Une table avec des bordures est utile pour des tableaux et des données mais il se peut que nous voulions parfois positionner des éléments dans une matrice sans bordures. On se plait à appeler cela une table "fantôme" car, pour le lecteur, il n'est pas toujours évident qu'il regarde une table !
Une table fantôme est construite de la même manière que la table ci-dessus à l'exception du tag <table> qui ressemble à :
<table border=0>
Si vous regardez tout en haut de cette page, vous constaterez peut-être que c'est une table fantôme qui contient dans une de ses cellules une seconde table avec des bordures ! Néanmoins, nous sautons des étapes. Pour notre exemple, nous allons reformater le fichier usa.html (Volcans aux USA) en deux colonnes. Plutôt que d'avoir des paragraphes de la largeur de la page, empilés verticalement, nous allons les positionner côte-à-côte comme ceci :
| XXXXX [titre] |
XXXXX
[titre] |
||
xxxxx xxxxx xxxx xxx xx xxxxx xx xx xxxx xxxxx xxxxx |
xxx xx x xxxx xxx xx x x xx xx xxxx xxxxx xx x xxxxx xxx xxxxx |
_______ | img | | | |_____| |
[lien image vers une grosse image] |
| xxx xx xx [lien hypertexte vers une grosse image] |
|||
Notez que la colonne de droite contient une image adjacente qui est un hyperlien vers une image plein écran (voir la leçon 8e).
<font size=+1><B>Mont St Helens</B></font><br> Le 18 Mai 1980, après une longue période de repos, cette paisible montagne de l'état de Washington a fourni <a href="msh.html">des observations détaillées</a> sur le mécanisme d'éruptions hautement explosives. <p> <font size=+1><B>Long Valley</B></font><br> Ce sismographe mesure les tremblements de terre représentant des forces volcaniques souterraines et peut aider à prévoir des évènements futurs. Il se trouve sur un plateau appelé "Table Volcanique" formé par une énorme éruption il y a 600.000 ans.<p> <a href="../pictures/seismo.jpg"> <img src="../pictures/stamp.gif"> -- [full size image] --</a>et remplacez-le par le HTML suivant :
<table border=0 cellpadding=6 cellspacing=2> <tr> <td><font size=+1><B>Mont St Helens</B></font></td> <td colspan=2><font size=+1><B>Long Valley</B></font></td> </tr> <tr> <td valign=top>Le 18 Mai 1980, après une longue période de repos, cette paisible montagne de l'état de Washington a fourni <a href="msh.html"> des observations détaillées</a> sur le mécanisme d'éruptions hautement explosives. </td> <td valign=top> Ce sismographe mesure les tremblements de terre représentant des forces volcaniques souterraines et peut aider à prévoir des évènements futurs. Il se trouve sur un plateau appelé "Table Volcanique" formé par une énorme éruption il y a 600.000 ans. </td> <td valign=top><a href="../pictures/seismo.jpg"> <img src="../pictures/stamp.gif"></a> </td> </tr> <tr> <td colspan=3 align=right> <a href="../pictures/seismo.jpg"> -- [full size image] --</td> </tr> </table>
NOTE : Regardez attentivement le HTML ici. Nous utilisons réellement une table de 3 colonnes -- le premier paragraphe (Mont St Helens) devient la colonne de gauche. La colonne de droite inclut une colonne de texte et une autre colonne pour une petite image. La ligne du bas, alignée à droite et s'étendant sur 3 colonnes, est utilisée pour positionner le lien hypertexte qui relie à la même photo que la petite image
Une autre manière bien pratique d'utiliser les tables invisibles est de transformer une longue liste d'éléments (créée avec les tags listes, voir la leçon 6). Les listes prennent de la place et peuvent gâcher un précieux espace sur le coté droit d'une page.
Le but est de transformer une liste :
| Longue Liste Linéaire | Colonne 1 | Colonne 2 | |
|---|---|---|---|
<ul> <li> xxxxxx <li> xxxx xxxx <li> xxx x xxxx <li> xxx xxxxx <li> xx x xxxxx <li> xxx xx <li> xxxx x <li> xxx x xxx </ul> |
en |
<ul> <li> xxxxxx <li> xxxx xxxx <li> xxx x xxxx <li> xxx xxxxx </ul> |
<ul> <li> xxx xx <li> xxxx x <li> xxx x xxx </ul> |
Nous allons maintenant casser la liste de ressources de notre page Ressources Projet (fichier proj.html).
<table border=0 cellpadding=2 cellspacing=2> <tr> <td valign=top> <ul> <li><A HREF="http://www.avo.alaska.edu/"> Observatoire de Volcans d'Alaska</A> <li><A HREF="http://vulcan.wr.usgs.gov/home.html"> Observatoire de Volcans de Cascades</A> <li><A HREF="http://www.dartmouth.edu/~volcano/"> Le Volcan Electronique</A> <li><A HREF="http://www.geo.mtu.edu/volcanoes/"> Page Volcans de Michigan Tech</a> <li><A HREF="http://volcano2.pgd.hawaii.edu/eos/"> Equipe Volcanologue IDS du SystÈme d'Observation de la Terre (Earth Observing System - EOS) de la NASA</A> <li><A HREF="http://www.geol.ucsb.edu/~fisher/"> Centre d'Information sur les Volcans</a> </ul> </td> <td valign=top> <ul> <li><A HREF="http://vulcan.wr.usgs.gov/Servers/earth_servers.html"> Serveurs Scientifiques Volcans/Terre</A> <li><A HREF="http://volcanoes.usgs.gov/"> Programme de Dangers Volcaniques du US Geological Survey</a> <li><a href="http://www.nmnh.si.edu/gvp/"> Programme Global de Volcanisme du Smithsonian (GVP)</a> <li><a href= "http://hvo.wr.usgs.gov/volcanowatch/"> Newsletter de Surveillance des Volcans</a> <li><a href="http://library.advanced.org/17457/"> Volcans Online</a> <li><A HREF="http://volcano.und.edu/"> Le Monde des Volcans</A> </ul> </td> </tr> </table>
NOTE : Nous avons simplement pris une liste <ul>...</ul> et l'avons divisé en 2 listes, chacune d'elles dans la cellule d'une table invisible contenant une ligne et deux colonnes.
La majorité des navigateurs web supporte maintenant le code HTML pour colorer les tables, les lignes et les cellules individuelles de tables. En fait, nous avons utilisé cela tout au long de ce didacticiel -- dans la page A propos du Didacticiel, dans l'index des leçons et dans toutes les leçons quand nous affichons des exemples de code HTML.
C'est un moyen efficace d'ajouter des éléments graphiques ou de couleur dans une page web sans attacher des images très gourmandes en bande passante.
Vous voudrez peut-être jeter un coup d'oeil au dernier exemple sur la page de test pour voir si votre navigateur supporte les tables en couleur.
Nous allons utiliser les codes couleur hexa décrits dans la leçon 16 pour colorer l'arrière-plan des pages web et dans la leçon 18 pour colorer du texte.
C'est tout ce qu'il y a de plus simple : inserez l'attribut bgcolor=#FF0000 dans les différents tags <table> :
| Zone de la Table | HTML |
|---|---|
| table colore l'arrière-plan de la table entière |
<table bgcolor=#880000> |
| row colore l'arrière-plan d'une ligne seulement |
<tr bgcolor=#880000> |
cell colore l'arrière-plan d'une seule cellule |
<td bgcolor=#880000> |
Maintenant, nous allons ajouter de la couleur à la table que vous avez créée pour la page d'Introduction. On ne va pas ajouter des débauches de couleurs (mais n'hésitez pas à tester sur vos propres pages). Dans notre cas, nous allons simplement ajouter le code HTML pour colorer les cellules des titres de lignes et de colonnes d'un gris un peu plus clair que le fond noir.
<th><font color=#EE8844>Eruption</font></th> <th><font color=#EE8844>Date</font></th> <th><font color=#EE8844>Volume en km<sup>3</sup></font></th>et ajoutez-leur l'attribut pour colorer les cellules en gris (#222222):
<th bgcolor=#222222><font color=#EE8844>Eruption</font></th> <th bgcolor=#222222><font color=#EE8844>Date</font></th> <th bgcolor=#222222><font color=#EE8844>Volume en km<sup>3</sup></font></th>
<td bgcolor=#222222 rowspan=4>
<font color=#EE8844>
<i>éruptions<br>
observées<br>
par des humains</i>
</font></td>
:
:
:
<td bgcolor=#222222 rowspan=2>
<font color=#EE8844>
<i>déduits<br>
de l'étude<br>
des dépôts</i>
</font></td>
Et vous pouvez même faire mieux qu'utiliser un arrière-plan de couleur pour les cellules de tables. Dans la leçon 16, nous avons vu comment insérer une image en mosaïque (une image qui se répète pour remplir un espace) comme fond d'écran pour une page entière via le tag BODY. Vous pouvez utiliser la même méthode pour préciser que les cellules de tables doivent être remplies avec des motifs répétés. Faites attention aux différences de comportement entre les tags de Netscape et ceux d'Internet Explorer :
| Zone de Table | HTML | Notes |
|---|---|---|
| table remplit toutes les cellules avec le même motif |
<table background="image.gif"> |
Dans les navigateurs de Netscape, ceci remplira toutes les cellules de la table ; dans Internet Explorer, la table entière (y compris les bordures de cellules) seront coloriées avec le motif. |
| ligne remplit toutes les cellules d'une ligne avec le même motif |
<tr background="image.gif"> |
Ne marche pas dans Internet Explorer | cellule remplit une seule cellule avec le motif |
<td background="image.gif"> |
Marche dans Netscape et dans Internet Explorer. |
Si vous regardez la table du haut de cette leçon, vous verrez que certaines cellules ont un fond en couleur, mais la cellule qui s'étend sur la deuxième ligne utilise une image avec un motif de papier froissé pour remplir l'arrière-plan derrière les mots la table :
| une table |
Nous allons maintenant modifier la table que vous avez faite précédemment pour insérer un arrière-plan derrière les titres dans notre tableau des volcans.
<tr> <th></th> <th bgcolor=#222222><font color=#EE8844>Eruption</font></th> <th bgcolor=#222222><font color=#EE8844>Date</font></th> <th bgcolor=#222222><font color=#EE8844>Volume en km<sup>3</sup></font></th> </tr>Nous allons changer l'arrière-plan en couleur des cellules de la première ligne pour utiliser le fichier pattern.gif :
<tr>
<th></th>
<th background="../pictures/pattern.gif">
<font color=#EE8844>Eruption</font></th>
<th background="../pictures/pattern.gif">
<font color=#EE8844>Date</font></th>
<th background="../pictures/pattern.gif">
<font color=#EE8844>Volume en km<sup>3</sup></font></th>
</tr>
Comparez vos pages web avec cet exemple du document-type. Si vos pages sont différentes de l'exemple ou que les liens hypertexte ne fonctionnent pas correctement, vérifiez le texte que vous avez tapé dans l'éditeur de texte. Les tables deviennent rapidement compliquées. Donc, vérifiez que vous avez défini les lignes et les colonnes correctement.
Revoyons les grandes lignes de cette leçon :
Regardez vos propres pages web et cherchez un endroit où une table vous permettrait une meilleure présentation. Ou, ajoutez un tableau ou une liste de données à vos pages web et créez une table pour les mettre en forme. Essayez de créer une table avec des cellules colorées ou, comme dans ce didacticiel, utilisez les couleurs dans une table invisible pour afficher des blocs dans une page web.
Les tables sont aujourd'hui la norme dans la conception de pages web. En fait, vous pouvez regarder les sources web de bien des sites et y trouver des tables à l'intérieur de tables à l'intérieur de... Il existe quand même un inconvénient aux pages lourdement dépendantes de tables... la structure entière de la table, depuis le premier tag <table> jusqu'au dernier </table>, doit être complètement téléchargée avant que le contenu apparaisse. Par conséquent, si vous avez beaucoup de choses à l'intérieur de votre table, un internaute accèdant à votre page pourra comtempler longtemps (spécialement si elle/il se connecte via un modem très lent) une page blanche pendant que tout arrive. Nous avons vu des sites web qui mettent plus de 2 minutes pour afficher leur contenu du fait de grandes tables compliquées.
Que faire ? Testez toujours vos pages sur une connexion plus lente ou sur l'ordinateur le plus ancien que vous avez ! Si votre page entière est composée de tables, assurez-vous que tous les attributs width= and height= sont définis dans les tags <img...> (cela aide le navigateur à afficher la page plus rapidement si il connait les dimensions des images). Si possible, essayez de mettre au moins une ligne de texte avant une grande table afin qu'au moins quelque chose apparaisse dès qu'un internaute arrive sur votre page.
Et maintenant, que diriez-vous d'apprendre un petit truc en plus sur les tables ? Vous pouvez vous servir de tables pour créer une page dont tout le contenu sera toujours centré, quelle que soit la taille de votre fenêtre de navigateur. Si vous ne nous croyez pas, essayez de regarder un exemple.
Comment avons-nous fait ? Le "truc" des tables est que vous pouvez spécifier des tailles relatives de largeur et hauteur. Voici le HTML pour produire l'exemple :
<html> <head> <title>Toujours Centré</title> </head> <body bgcolor=#000000 text=#FFFFFF link="#CC9966" vlink="#9999FF"> <table border=0 width=100% height=100%> <tr> <td align=center valign=middle> <img src="../pictures/lava.gif" alt="lava!" width="300" height="259"> <p> Que vous réduisiez ou agrandissiez la fenêtre, je reste centré ! </td> </tr> </table> </body> </html>
Le tag table contient des options pour dimensionner la table de la taille entière de la fenêtre du navigateur. Sa seule cellule <td>..</td> est définie pour être centrée horizontalement et verticalement. Essayez et testez-le !
Vous en voulez encore ? Regardez cet autre exemple d'utilisation d'un dimensionnement de table pour créer un titre qui s'étend toujours sur toute la largeur de l'écran. Dans ce cas, nous faisons une table avec une largeur de 100%. Chaque cellule de table contient une lettre, et nous divisons 100 par le nombre de lettres pour la taille proportionnelle de chaque cellule :
<html> <head> <title>Texte Extensible</title> </head> <body bgcolor=#000000 text=#FFFFFF link="#CC9966" vlink="#9999FF"> <table border=0 width=100%> <tr> <td align=center width=13%><font size=+3>V</font></td> <td align=center width=13%><font size=+3>O</font></td> <td align=center width=13%><font size=+3>L</font></td> <td align=center width=13%><font size=+3>C</font></td> <td align=center width=13%><font size=+3>A</font></td> <td align=center width=13%><font size=+3>N</font></td> <td align=center width=12%><font size=+3>!</font></td> </tr> </table> </body> </html>
Nous avons trouvé ces astuces sur le site glassdog design-o-rama. Amusez-vous avec et voyez ce que vous pouvez faire d'autre !
Mais attendez ! Voici encore autre chose ! Vous pouvez également ajouter l'attribut bordercolor à votre tag <table> pour ombrer les couleurs de la table avec des bordures visibles. Comparez :
| une table à bordures tristes |
avec celle avec les bordures colorées :
| une table à bordures colorées |
(Ca peut ne pas marcher sur certains navigateurs web). Cela crée un aspect ombré 3D en couleur en affichant les cotés haut et gauche de la table d'une couleur plus claire que les cotés droit et bas. Créer cela est aussi simple que de modifier notre tag <table> :
<table border=8 cellpadding=8 cellspacing=2 bordercolor="#663300">
Pour plus de ressources sur les tables HTML, consultez les sites listés dans la section références.
Encore plus de choses à inclure pour vos listes et vos images.
Ecrire le HTML : Leçon 21 : Tables
©1994-2003
Maricopa Center for Learning and Instruction (MCLI)
Maricopa Community Colleges
La 'net connection (en anglais) à MCLI est
Alan Levine
Suggestions en Français à Bernard Bensoussan
URL: http://www.mcli.dist.maricopa.edu/tut/tut21.html