Guide pratique et progressif du langage HTML

Les tables

Pas seulement pour des tableaux

Les tables sont en fait la seule façon de gérer convenablement la présentation, même si elles ne sont pas vraiment prévues pour ça. Elles permettent de diviser de l'espace en zones et les remplir avec des objets (textes, images, couleurs), ce qui permet un meilleur contrôle de la position de ces objets.

L'utilisation normale prévue par la loi

Les tables peuvent avoir un fond et des bords visibles ou non, cette dernière possibilité étant la plus utile pour la présentation graphique, tandis qu'on privilégiera plutôt les bords pour des tables contenant des chiffres, des titres ou des tableaux de données (mais c'est vos oignons).

Les tables ont une autre propriété qui les rend encore plus intéressantes, on peut les imbriquer à l'infini (en théorie en tout cas, que celui qui en trouve la limite m'en fasse part (il n'y a rien à gagner)).
Les marqueurs sont

<TABLE> et </TABLE> pour définir une table (quelle surprise hein ?)
<TR> et </TR> pour définir une ligne (une rangée en suisse)
<TH> et </TH> pour les cellules du bord de ligne/colonne (facultatif)
<TD> et </TD> pour une cellule "normale"

La pratique

Exemple simple, deux cellules horizontales au milieu de l'écran:

le petit écran

Je sais, à part les bords et la couleur de fond (et encore) pas besoin de table pour faire ça, mais commençons simplement, voici donc visuellement comment faire une table à deux cellules...

...pour les autres c'est ici.

<CENTER>

+-table                                           fin table-+
|      +-ligne                               fin ligne-+    |
|      |   +-------cellule 1--------+    +cellule2+    |    |
|      |   |                        |    |        |    |    |
<TABLE><TR><TD><IMG SRC="image.gif"></TD><TD>Texte</TD></TR></TABLE>

</CENTER>

A l'intérieur d'une cellule (entre <TD> et </TD>) tout est bien sûr possible, comme mettre plusieurs lignes de texte (avec <BR>, <P> ou autre), changer la couleur des caractères, celle du fond de la cellule, de mettre des liens, des images, d'autres tables, etc...

Maintenant que vous avez compris le fonctionnement d'une table, voilà le contenu complet de l'exemple ci-dessus.

<CENTER>
  <TABLE WIDTH="50%" BORDER="1">
    <TR>
      <TD BGCOLOR="#8080C0" ALIGN="CENTER"><IMG SRC="pics/tv.gif"></TD>
      <TD BGCOLOR="#C0FFFF" ALIGN="CENTER">le petit écran</TD>
    </TR>
  </TABLE>
</CENTER>

Pour s'y retrouver, il vaut mieux employer l'indentation (le décalage) et/ou les commentaires, cette remarque est de toutes façons valable pour toutes les autres fonctions HTML.

Encore quelques explications:

<TABLE WIDTH="50%">: Si la taille de la table n'est pas fixée elle s'ajustera sur le plus gros des objets qu'elle contient, si celle-ci n'avait été fixée à 50% elle n'aurait pas été si large, la hauteur n'est pas réglable en HTML 3.2 et dépend aussi du contenu de la plus grosse cellule (on peut quand même tricher avec des lignes de texte vides (<BR>)).
<TABLE BORDER="1">: Taille des bords (0=pas de bords).
<TABLE BGCOLOR="#rrvvbb">, <TR BGCOLOR="#rrvvbb"> et <TD BGCOLOR="#rrvvbb">: Règle la couleur de fond de la table, ligne ou cellule.

Plusieurs lignes/colonnes

Avant d'attaquer les choses sérieuses, voici encore un autre exemple simple, une table avec plusieurs lignes et plusieurs colonnes (la maison ne recule devant aucun sacrifice):

Quantité	Matériel	Prix
1	Raton laveur	Sur demande
1210	lavabo	245.45

Voilà le secret de cette petite merveille:


<TABLE BORDER="1">               (table)
  <TR>                           (ligne)
    <TH>Quantité</TH>            (cellule)
    <TH>Matériel</TH>            (cellule)
    <TH>Prix</TH>                (cellule)
  </TR>                          (fin ligne)
  <TR>                           (ligne)
    <TD>1</TD>                   (cellule)
    <TD>Raton laveur</TD>        (cellule)
    <TD>Sur demande</TD>         (cellule)
  </TR>                          (fin ligne)
  <TR>                           (ligne)
    <TD>1210</TD>                (cellule)
    <TD>lavabo</TD>              (cellule)
    <TD>245.45</TD>              (cellule)
  </TR>                          (fin ligne)
</TABLE>                         (fin table)

<TH> peut remplacer <TD> pour marquer l'entête de table (horizontal et/ou vertical) celui-ci est alors affiché d'une manière un peu plus marquée, comme dans l'exemple ci-dessus.

Plus difficile

Il est aussi possible de définir le nombre de lignes et de colonnes d'une table et d'attribuer à une cellule plusieurs lignes (ROWSPAN="") ou plusieurs colonnes (COLSPAN=""), ou les deux ensemble:

	Moyenne		Autre catégorie	Divers
	hauteur	poids	Autre catégorie	Divers
hommes	1.9	0.003
femmes	1.7	0.002

Les cellules vides peuvent très bien ne pas être représentées (quand elles sont sur les bords) en omettant les marqueurs de fin de cellule (hélas, net$crade version 4 semble avoir tendance de toutes façons à escamoter les cellules vides automatiquement, le cuistre ! J'ai aussi essayé Internet explo$er, bien que le résultat soit légèrement différent, il fait aussi des trucs sordides...).

Le contenu d'une cellule peut être placé à gauche (ALIGN="LEFT"), au centre (ALIGN="CENTER"), à droite (ALIGN="RIGHT"), justifié (ALIGN="JUSTIFY"), ou aligné sur n'importe quel caractère (ALIGN="DECIMAL" DP="." ici sur le point ".").

L'alignement peut se faire dans toute la table (<TABLE ALIGN="XXX">), la ligne (<TR ALIGN="XXX">) ou dans une seule cellule (<TD ALIGN="XXX">).

On peut aussi régler le nombre de colonnes d'une cellule et l'alignement avec l'option COLSPEC, il reste encore pas mal d'autres options (surtout utiles pour la présentation), mais tout ceci devrait être suffisant pour le moment.

Voici maintenant comment a été construite la table ci-dessus:


<TABLE BORDER BGCOLOR="#F08080">                           (table)
  <TR>                                                     (ligne)
    <TH ROWSPAN="2"></TH>                                  (cellule de 2 lignes)
    <TH COLSPAN="2" BGCOLOR="#8080FF">Moyenne</TH>         (cellule de 2 colones)
    <TH ROWSPAN="2">Autre<BR>catégorie</TH>                (cellule de 2 lignes)
    <TH ROWSPAN="2">Divers</TH>                            (cellule de 2 lignes)
  </TR>                                                    (fin de ligne)
  <TR>                                                     (ligne)
    <TH>hauteur</TH>                                       (cellule)
    <TH>poids</TH>                                         (cellule)
  </TR>                                                    (fin de ligne)
  <TR>                                                     (ligne)
    <TH ALIGN="LEFT">hommes</TH>                           (cellule)
    <TD>1.9</TD>                                           (cellule)
    <TD>0.003</TD>                                         (cellule)
    <TD></TD>                                              (cellule)
    <TD></TD>                                              (cellule)
  </TR>                                                    (fin de ligne)
  <TR>                                                     (ligne)
    <TH ALIGN="LEFT">femmes</TH>                           (cellule)
    <TD>1.7</TD>                                           (cellule)
    <TD>0.002</TD>                                         (cellule)
    <TD></TD>                                              (cellule)
    <TD></TD>                                              (cellule)
  </TR>                                                    (fin de ligne)
</TABLE>                                                   (fin de table)

A vous de vous débrouiller pour que le compte de cellules "normales" et de cellules multiples soit toujours correct dans chaque ligne et colone, le mieux étant de partir d'une table simple et d'introduire chaque cellule multiple et de retirer l'excédent pas à pas (à moins que vous ne soyez un mutant ou que vous ayez un QI de plus de 100).

Et si le texte se met en boule, ou la cellule n'apparait pas

On peut empêcher le texte de "wrapper" c'est-à-dire de passer à la ligne quand la place horizontale est insuffisante, grâce à l'option NOWRAP dans la cellule, ceci fera apparaître une glissière horizontale de positionnement dans la fenêtre du navigateur dès que la taille horizontale maximum de la page sera dépassée (on ne fait pas de miracles).

On peut aussi forcer l'apparition des cellules vides avec les navigateurs récalcitrants en insérant un simple <BR> dans la cellule.

Ne soyez pas égoïstes

Quand le contenu d'une table est complexe, il est possible dans une certaine mesure d'en faciliter l'accès ou au moins de faire comprendre quel en est le contenu aux non-voyants grâce à une option des tables pas vraiment prévue pour ça. Cette option est: SUMMARY="", elle permet normalement de documenter la table d'une manière invisible au lecteur "ordinaire", mais certains terminaux spéciaux ou boites vocales ne l'en reconnaissent pas moins et en fournissent le contenu à la demande.

Il est inutile d'utiliser cette option pour répéter le titre éventuel qui se trouve juste au dessus de la table, mais plus judicieux d'en décrire le contenu et son organisation.

C'est tout ?

Une autre utilisation des tables est en général la gestion d'un panneau de navigation dans les pages, mais il vaut mieux (à mon humble avis) utiliser les frames car la partie bouton n'aura pas besoin d'être rechargée (en général c'est du graphique et c'est gros) et surtout elle reste immobile dans la page même si on utilise la glissière du document et ceci contrairement aux tables où la page est toujours d'une seule pièce.

De toutes façons une utilisation excessive de l'un ou l'autre est ODIEUSE !

Effets de texte

Voyons maintenant quelques techniques d'utilisation des tables

Pour faire un effet de couleur sur le texte comme ci-dessus:

<TABLE><TR><TD BGCOLOR="#D0FFE0">De toutes façons une utilisation excessive de l'un ou l'autre est ODIEUSE !</TD></TR></TABLE>

Alignement texte et images vertical

Pour aligner du texte et des images verticalement:

Bienvenue sur ma page Web

Comme ceci:

<TABLE BORDER="0" ALIGN="CENTER"><TR>
  <TD VALIGN="CENTER"><IMG SRC="pics/titre1.gif" ALT="Logo1"></TD>
  <TD VALIGN="CENTER"><BR><H2>Bienvenue sur ma page Web</H2></TD>
  <TD VALIGN="CENTER"><IMG SRC="pics/titre2.gif" ALT="Logo2"></TD>
</TR></TABLE>

Alignement texte et images horizontal

Ou horizontalement:

le petit écran

Comme cela:

<TABLE ALIGN="CENTER" BORDER="0">
<TR><TD BGCOLOR="#8080C0" ALIGN="CENTER"><IMG SRC="pics/tv.gif"></TD></TR>
<TR><TD BGCOLOR="#C0FFFF" ALIGN="CENTER">le petit écran</TD></TR>
</TABLE>

Contournement

Pour placer du texte à coté d'une image:

Il ne faut pas mettre trop de texte dans les cellules, parce que la taille du texte est variable, comme expliqué ici: AVERTISSEMENT NO 3.

Et pourquoi pas du texte de ce coté-ci aussi. Notez que l'on peut aussi fixer la taille des colonnes textes (c'est le cas dans cet exemple 50/50 %).

Grâce à ça:

<TABLE ALIGN="CENTER" BORDER="0">
  <TR>
    <TD ALIGN="JUSTIFY">Blabla</TD>
    <TD BGCOLOR="#8080C0"><IMG WIDTH="50" HEIGHT="39" SRC="pics/aide/tv.gif"></TD>
    <TD ALIGN="JUSTIFY">Blablabla.</TD>
  </TR>
</TABLE>

Et si vous placez du texte dessus et dessous cet exemple...

Répartition d'objets

Autre exemple d'utilisation des tables, le bas de cette page, une table à bords invisibles permet de mettre trois choses sur la même "ligne" horizontale, une à gauche, une au centre et une à droite sans qu'elles ne se touchent grâce aux options de placement à l'intérieur de chaque cellule (ceci est expliqué plus loin, pas de panique, ni de précipitation).

Cette méthode peut aussi être utilisée de manières les plus diverses, pour un titre, pour encolonner du texte, etc...

NB: quand vous tombez dans une page contenant quelque chose d'intéressant, n'hésitez pas à en regarder la source pour en comprendre le mécanisme.

Ouf, c'est fini ! (provisoirement)

Et voilà, il ne vous reste plus qu'à remplir vos pages de tables, mais essayez d'en user sans trop abuser...

Avant de gérer la mise en page attendez d'avoir vu les autres options des tables, les techniques de placements, ainsi que la démo table à la fin du guide, et avant de créer un bandeau de navigation sur vos 200 pages, lisez la page suivante, grâce aux frames (appelées cadres en français) vous n'aurez besoin que d'une seule page de plus pour gérer la navigation et celle-ci restera fixe dans la fenêtre.

Retour Suite

Dernière mise à jour de cette page: 10/08/2002, visiteurs:

depuis le 6 avril 2002