Serveur © IRCAM - CENTRE POMPIDOU 1996-2005.
Tous droits réservés pour tous pays. All rights reserved.

Introduction au langage HTML:
comment composer des pages pour un serveur WWW
2. Directives de structuration

Michel Fingerhut
2e édition, © Ircam 1995, 1996

Structure générale d'un document en HTML

On voit que la directive <HTML> a pour champ d'action tout le document: elle indique que c'est de l'HTML, du début à la fin. À l'intérieur, il y a deux parties: l'en-tête (<HEAD> ... </HEAD>) comprenant un titre ou intitulé (<TITLE> ... </TITLE>), et le corps du document (<BODY> ... </BODY>).

L'intitulé est un texte (bref) qui est destiné à apparaître en tête de la fenêtre dans laquelle le document s'affiche. L'espace y étant réduit, on ne peut y utiliser que quelques mots. Dans le cas de la page d'accueil du serveur du Centre, on voit sur son écran "Centre National d'Art et de Culture Georges Pompidou". C'est donc que le document comporte:

<HTML> <HEAD> <TITLE>Centre National d'Art et de Culture Georges Pompidou</TITLE> </HEAD> <BODY> ... ... </BODY> </HTML>

Cet intitulé est aussi récupéré par les outils de recherche automatique: il est important qu'il décrive correctement et succinctement le contenu du document.

Le mot, la phrase

Le texte est tapé au kilomètre. Même si l'on fait un retour de charriot à un endroit (pour rendre le document-source plus lisible), ce retour n'apparaîtra pas forcement dans le document mis en page.

Une directive (voir paragraphe suivant) permet de "forcer" un retour de charriot dans la mise en page (qu'il ne faut pas confondre avec, ni utiliser à la place de, la directive de début de paragraphe).

Des directives permettent de changer l'apparence du texte: gras, italiques et souligné (cette dernière option n'est pas encore standardisée); exposants et indices.

Il n'est pas possible de contrôler le choix de la police (par exemple: Helvetica ou Times), mais il est possible de demander une police à largeur fixe ("police de machine à écrire"). Les polices utilisées par défaut sont en général à largeur variable (le "i" prend moins de place que le "w" etc.).

Les multiples espaces (ainsi que les tabulations) sont traités de façon imprévisible (en d'autres mots, chaque navigateur les traite différemment). Il est donc recommandé de s'abstenir de les utiliser. Il en va de même pour les retours charriots, qui sont, en général, ignorés par le navigateur.

effet souhaité directive résultat notes

gras fermer la porte <B>doucement</B> en sortant fermer la porte doucement en sortant

italique Les <I>tags HTML</I> sont des directives Les tags HTML sont des directives

souligné <U>Le formatage</U> d'un document permet de le lire Le formatage d'un document permet de le lire non standard, à éviter pour le moment

exposant a<SUP>2</SUP>+b<SUP>2</SUP> La 3<SUP>ème</SUP> ligne a²+b²
La 3^ème ligne

indice B<SUB>2n</SUB> B_2n

police de largeur fixe La commande à effectuer est <CODE>mosaic -kiosk</CODE> La commande à effectuer est mosaic -kiosk

effet souhaité	directive	résultat	notes
gras	`fermer la porte <B>doucement</B> en sortant`	fermer la porte doucement en sortant
italique	`Les <I>tags HTML</I> sont des directives`	Les tags HTML sont des directives
souligné	`<U>Le formatage</U> d'un document permet de le lire`	Le formatage d'un document permet de le lire	non standard, à éviter pour le moment
exposant	`a<SUP>2</SUP>+b<SUP>2</SUP> La 3<SUP>ème</SUP> ligne`	a²+b² La 3^ème ligne
indice	`B<SUB>2n</SUB>`	B_2n
police de largeur fixe	`La commande à effectuer est <CODE>mosaic -kiosk</CODE>`	La commande à effectuer est `mosaic -kiosk`

Caractères spéciaux

L'alphabet et signes de base (présents sur un clavier QWERTY) peuvent être saisis dans un document à l'aide de la touche correspondante sur le clavier.

Le problème se complique pour les autres signes (lettres accentuées, signes du genre E par exemple): la même touche (é par exemple), sur un PC et sur un Mac peut produire deux codes différents, qui ne sont pas forcément reconnus correctement par des navigateurs différents; d'autre part, nombreux caractères spéciaux n'ont pas de touche correspondante.

Il existe des directives spéciales pour coder ces caractères: par exemple, é (point-virgule y compris) servira à représenter un é qui sera affiché correctement à l'écran du lecteur. Ces directives ne comprenent pas de crochet, elles commencent toutes par une esperluette et se terminent par un point-virgule.

Les tableaux suivants donnent les directives et le résultat pour la plupart des signes spéciaux:

Lettres accentuées et diacritiques

Sauf exceptions, ces signes ont un nom symbolique qui en rappelle la forme. Les autres sont obtenues à l'aide d'un code numérique (par exemple, Å pour Å).

dir. rés. dir. rés. dir. rés. dir. rés. dir. rés. dir. rés. dir. rés. dir. rés.

á á é é í í ó ó ú ú ý ý

à à è è ì ì ò ò ù ù

â â ê ê î î ô ô û û

ä ä ë ë ï ï ö ö ü ü ÿ ÿ

ã ã ñ ñ õ õ

å å

æ æ ç ç ø ø

Á Á É É Í Í Ó Ó Ú Ú Ý Ý

À À È È Ì Ì Ò Ò Ù Ù

Â Â Ê Ê Î Î Ô Ô Û Û

Ä Ä Ë Ë Ï Ï Ö Ö Ü Ü

Ã Ã Ñ Ñ Õ Õ

Å Å

Æ Æ Ç Ç &216; &216;

dir.	rés.	dir.	rés.	dir.	rés.	dir.	rés.	dir.	rés.	dir.	rés.	dir.	rés.	dir.	rés.
`á`	á			`é`	é	`í`	í			`ó`	ó	`ú`	ú	`ý`	ý
`à`	à			`è`	è	`ì`	ì			`ò`	ò	`ù`	ù
`â`	â			`ê`	ê	`î`	î			`ô`	ô	`û`	û
`ä`	ä			`ë`	ë	`ï`	ï			`ö`	ö	`ü`	ü	`ÿ`	ÿ
`ã`	ã							`ñ`	ñ	`õ`	õ
`å`	å
`æ`	æ	`ç`	ç							`ø`	ø
`Á`	Á			`É`	É	`Í`	Í			`Ó`	Ó	`Ú`	Ú	`Ý`	Ý
`À`	À			`È`	È	`Ì`	Ì			`Ò`	Ò	`Ù`	Ù
`Â`	Â			`Ê`	Ê	`Î`	Î			`Ô`	Ô	`Û`	Û
`Ä`	Ä			`Ë`	Ë	`Ï`	Ï			`Ö`	Ö	`Ü`	Ü
`Ã`	Ã							`Ñ`	Ñ	`Õ`	Õ
`Å`	Å
`Æ`	Æ	`Ç`	Ç							`&216;`	&216;

Autres signes

Le tableau ci-dessous regroupe tous les signes spéciaux. On y retrouvera aussi les lettres accentuées et diacritiques, qui peuvent donc être obtenues de deux façons différentes: par nom symbolique (e.g., É pour É) ou par code numérique (e.g., É, aussi pour É).

dir. rés. dir. rés. dir. rés. dir. rés. dir. rés. dir. rés. dir. rés. dir. rés. dir. rés. dir. rés.
¡ ¡ ¢ ¢ £ £ ¤ ¤ ¥ ¥ ¦ ¦ § § ¨ ¨ © ©

ª ª « « ¬ ¬  ® ® ¯ ¯ ° ° ± ± ² ² ³ ³

´ ´ µ µ ¶ ¶ · · ¸ ¸ ¹ ¹ º º » » ¼ ¼ ½ ½

¾ ¾ ¿ ¿ À À Á Á Â Â Ã Ã Ä Ä Å Å Æ Æ Ç Ç

È È É É Ê Ê Ë Ë Ì Ì Í Í Î Î Ï Ï Ð Ð Ñ Ñ

Ò Ò Ó Ó Ô Ô Õ Õ Ö Ö × × Ø Ø Ù Ù Ú Ú Û Û

Ü Ü Ý Ý Þ Þ ß ß à à á á â â ã ã ä ä å å

æ æ ç ç è è é é ê ê ë ë ì ì í í î î ï ï

ð ð ñ ñ ò ò ó ó ô ô õ õ ö ö ÷ ÷ ø ø ù ù

ú ú û û ü ü ý ý þ þ ÿ ÿ Ā Ā

dir.	rés.	dir.	rés.	dir.	rés.	dir.	rés.	dir.	rés.	dir.	rés.	dir.	rés.	dir.	rés.	dir.	rés.	dir.	rés.
		`¡`	¡	`¢`	¢	`£`	£	`¤`	¤	`¥`	¥	`¦`	¦	`§`	§	`¨`	¨	`©`	©
`ª`	ª	`«`	«	`¬`	¬	``		`®`	®	`¯`	¯	`°`	°	`±`	±	`²`	²	`³`	³
`´`	´	`µ`	µ	`¶`	¶	`·`	·	`¸`	¸	`¹`	¹	`º`	º	`»`	»	`¼`	¼	`½`	½
`¾`	¾	`¿`	¿	`À`	À	`Á`	Á	`Â`	Â	`Ã`	Ã	`Ä`	Ä	`Å`	Å	`Æ`	Æ	`Ç`	Ç
`È`	È	`É`	É	`Ê`	Ê	`Ë`	Ë	`Ì`	Ì	`Í`	Í	`Î`	Î	`Ï`	Ï	`Ð`	Ð	`Ñ`	Ñ
`Ò`	Ò	`Ó`	Ó	`Ô`	Ô	`Õ`	Õ	`Ö`	Ö	`×`	×	`Ø`	Ø	`Ù`	Ù	`Ú`	Ú	`Û`	Û
`Ü`	Ü	`Ý`	Ý	`Þ`	Þ	`ß`	ß	`à`	à	`á`	á	`â`	â	`ã`	ã	`ä`	ä	`å`	å
`æ`	æ	`ç`	ç	`è`	è	`é`	é	`ê`	ê	`ë`	ë	`ì`	ì	`í`	í	`î`	î	`ï`	ï
`ð`	ð	`ñ`	ñ	`ò`	ò	`ó`	ó	`ô`	ô	`õ`	õ	`ö`	ö	`÷`	÷	`ø`	ø	`ù`	ù
`ú`	ú	`û`	û	`ü`	ü	`ý`	ý	`þ`	þ	`ÿ`	ÿ	`Ā`	Ā

Signes spéciaux

Enfin, les signes & < > servant à identifier les directives, on ne peut les utiliser telles quelles dans le texte... Si, voulant obtenir (dans le cadre d'une équation, par exemple)

j < i

on écrivait littéralement j < i il y aurait confusion... Le < i serait interprété comme le début de la directive de passage en italiques, <i> (pour lesquelles la casse ne joue pas: <I> et <i> produisent le même effet). Il faut donc utiliser des directives spéciales pour ces trois signes.

Enfin, il existe aussi la possibilité de spécifier un espace insécable. Deux mots reliés par un tel espace ne seront pas séparés dans la mise en page (par exemple, avec un mot en fin de ligne, et le second au debut de la ligne suivante), mais seront considérés comme une seule entité.

dir. rés.

& &

< <

> >

  espace insécable

dir.	rés.
`&`	&
`<`	<
`>`	>
` `	espace insécable

Séparateurs et paragraphes

HTML n'offre pas (pour le moment) la possibilité de gérer la longueur des lignes ni la justification des paragraphes. Cela devrait changer.

Un paragraphe est un regroupement de texte sur une ou plusieurs lignes, séparé des lignes avoisinantes par un espace plus important que l'interligne dans le paragraphe lui-même.

On peut forcer un retour à la ligne dans le paragraphe: le mot suivant la directive <BR> s'affichera sur la ligne suivante, même s'il restait de la place sur la même ligne. Il est vivement recommandé de ne pas utiliser plusieurs <BR> à la suite (pour "faire plus d'espace").

La directive <P> de saut de paragraphe force un retour de charriot suivi d'un espacement vertical plus important.

Il est vivement recommandé de ne pas utiliser plusieurs <P> à la suite.

Le paragraphe de base est un texte aligné à gauche. On ne peut forcer un alignement à droite, ni un premier alinéa (ou une indentation ou exdentation). On peut toutefois obtenir des indentations de types divers en utilisant d'autres types de paragraphe, ou même des listes.

effet souhaité directive résultat notes

retour à la ligne à l'intérieur d'un paragraphe Le Centre National<BR>d'Art et de Culture Le Centre National
d'Art et de Culture ne pas utiliser plusieurs à la suite (<BR><BR>...)

saut (ou fin) de paragraphe Il est préférable de bien mettre en page le texte; il n'en sera que plus lisible. <P> Certaines directives servent à couper la présentation. Il est préférable de bien mettre en page le texte; il n'en sera que plus lisible.
Certaines directives servent à couper la présentation.
ne pas utiliser plusieur à la suite; on peut le mettre sur une ligne séparée pour rendre le code plus lisible, mais cela ne change en rien le résultat

règle (ligne horizontale séparatrice) Il est préférable de bien mettre en page le texte; il n'en sera que plus lisible. <HR> Certaines directives servent à couper la présentation. Il est préférable de bien mettre en page le texte; il n'en sera que plus lisible.
Certaines directives servent à couper la présentation.

paragraphe indenté Comme le dit Virilio: <BLOCKQUOTE> Nous aimerons notre lointain au lieu d'aimer notre prochain. </BLOCKQUOTE> C'est l'effet pervers des réseaux. Comme le dit Virilio:
Nous aimerons notre lointain au lieu d'aimer notre prochain.
C'est l'effet pervers des réseaux. On peut découper le texte indenté (entre les <BLOCKQUOTE> ... </BLOCKQUOTE>) à l'aide de sauts de fin de ligne ou de paragraphe.

effet souhaité	directive	résultat	notes
retour à la ligne à l'intérieur d'un paragraphe	`Le Centre National<BR>d'Art et de Culture`	Le Centre National d'Art et de Culture	ne pas utiliser plusieurs à la suite (<BR><BR>...)
saut (ou fin) de paragraphe	`Il est préférable de bien mettre en page le texte; il n'en sera que plus lisible. <P> Certaines directives servent à couper la présentation.`	Il est préférable de bien mettre en page le texte; il n'en sera que plus lisible. Certaines directives servent à couper la présentation.	ne pas utiliser plusieur à la suite; on peut le mettre sur une ligne séparée pour rendre le code plus lisible, mais cela ne change en rien le résultat
règle (ligne horizontale séparatrice)	`Il est préférable de bien mettre en page le texte; il n'en sera que plus lisible. <HR> Certaines directives servent à couper la présentation.`	Il est préférable de bien mettre en page le texte; il n'en sera que plus lisible. Certaines directives servent à couper la présentation.
paragraphe indenté	`Comme le dit Virilio: <BLOCKQUOTE> Nous aimerons notre lointain au lieu d'aimer notre prochain. </BLOCKQUOTE> C'est l'effet pervers des réseaux.`	Comme le dit Virilio: Nous aimerons notre lointain au lieu d'aimer notre prochain. C'est l'effet pervers des réseaux.	On peut découper le texte indenté (entre les <BLOCKQUOTE> ... </BLOCKQUOTE>) à l'aide de sauts de fin de ligne ou de paragraphe.

Les listes

Les listes sont des regroupement de paragraphes, indentés à droite, et précédés ou non d'une numérotation. Il en existe 3 types:

La liste non-numérotée. Voir, pour exemple, celles de la page d'accueil du Centre. Chaque élément y est précédé d'un .
La liste numérotée. Les éléments en sont numérotés 1, 2, ... automatiquement.
La liste avec intitulés. Les éléments ne sont précédés d'aucun symbole ou chiffre, mais d'un intitulé exdenté par rapport à l'élément.

effet souhaité	directive	résultat	notes
liste non numérotée	`Voici une liste de ce type: <UL> <LI>le premier élément de cette liste est séparé des autres <LI>et ainsi de suite <LI>l'un après l'autre </UL> jusqu'à la fin de la liste.`	Voici une liste de ce type: le premier élément de cette liste est séparé des autres et ainsi de suite l'un après l'autre jusqu'à la fin de la liste.	`UL` sont les initiales de Unnumbered List.
liste numérotée	`Voici une liste de ce type: <OL> <LI>le premier élément de cette liste est séparé des autres et numéroté automatiquement, <LI>le second, <LI>et ainsi de suite </OL> jusqu'à la fin de la liste.`	Voici une liste de ce type: le premier élément de cette liste est séparé des autres et numéroté automatiquement, le second, et ainsi de suite jusqu'à la fin de la liste.	`OL` sont les initiales de Ordered List.
liste avec intitulés	`Voici une liste de ce type: <DL> <DT>Chaque intitulé recouvre: <DD>un ou plusieurs items, ceci est le premier; <DD>ceci est le second; <DD>ceci est le troisième. <DT>Le second intitulé recouvre: <DD>un seul item. </DL> jusqu'à la fin.`	Voici une liste de ce type: Chaque intitulé recouvre: un ou plusieurs items, ceci est le premier; ceci est le second; ceci est le troisième. Le second intitulé recouvre: un seul item. jusqu'à la fin.	Les "items" sont indentés, et commencent à la ligne. Pour mieux distinguer les intitulés et/ou les éléments, on peut rajouter des directives (par exemple, faire ressortir les intitulés en gras, les précéder d'une séparation de paragraphes, etc.)

Listes et sous-listes

Les listes peuvent être imbriquées l'une dans l'autre, pour créer des sous-listes.

Une sous-liste n'est pas forcément du même type que la liste-"mère".

Exemple de liste et de sous-listes:

effet souhaité directive résultat notes

liste dans une liste, ou sous-liste Le Centre est composé de deux départements: <UL> <LI>le MNAM/CCI, dont les domaines de compétences sont: <UL> <LI>la peinture <LI>la sculpture <LI>le dessin <LI>... </UL> <LI>le DDC, dans les domaines de: <OL> <LI>l'édition <LI>l'audio-visuel <LI>l'actualité culturelle </OL> et de deux organismes associés... Le Centre est composé de deux départements:

le MNAM/CCI, dont les domaines de compétences sont:

la peinture
la sculpture
le dessin
...

le DDC, dans les domaines de:

l'édition
l'audio-visuel
l'actualité culturelle
et de deux organismes associés...
Les caractères affichés en face de chaque élément dépendent du navigateur.

effet souhaité	directive	résultat	notes
liste dans une liste, ou sous-liste	`Le Centre est composé de deux départements: <UL> <LI>le MNAM/CCI, dont les domaines de compétences sont: <UL> <LI>la peinture <LI>la sculpture <LI>le dessin <LI>... </UL> <LI>le DDC, dans les domaines de: <OL> <LI>l'édition <LI>l'audio-visuel <LI>l'actualité culturelle </OL> et de deux organismes associés...`	Le Centre est composé de deux départements: le MNAM/CCI, dont les domaines de compétences sont: la peinture la sculpture le dessin ... le DDC, dans les domaines de: l'édition l'audio-visuel l'actualité culturelle et de deux organismes associés...	Les caractères affichés en face de chaque élément dépendent du navigateur.

Les titres

Les titres sont des en-têtes servant à intituler un ensemble de paragraphes. Dans le document que vous tenez dans vos mains, il y a trois types de titres: un "très gros" titre, au début de chaque chapitre, puis un sous-titre en début de chaque section, et un plus petit sous-titre (en italique). Le texte qui s'y trouve est en général affiché dans une police de taille plus importante que le reste du texte, et en gras, et est séparé du texte qui le précède et qui le suit par un espace plus important.

De la même façon, HTML permet d'utiliser plusieurs niveaux de titres: la directive <H1> indique le début d'un titre de niveau 1 (le plus élevé, le plus gros), et </H1> indique la fin de ce titre. Il existe ainsi 6 niveaux de titre, produisant des titres de taille décroissante.

Les détails de la mise en page (choix et taille de la police, affichage en gras, italiques ou couleur) dépend, comme pour les autres éléments du langage HTML, de la configuration du navigateur.

Comme pour le reste des directives HTML, il est important de s'en servir à bon escient et pour ce quoi ils ont été conçus: la structuration hiérarchique d'un document.

effet souhaité directive résultat notes

titre niveau 1 <H1>IRCAM</H1> 1 place Igor-Stravinsky,<BR> 75004 Paris
IRCAM
1 place Igor-Stravinsky,
75004 Paris Il est inutile de précéder ou de faire suivre un titre des directives <P> ou <BR>: il est séparé du corps du texte. On peut par contre insérer in <BR> dans le titre pour y forcer un retour à la ligne (sous-titre, par exemple).

titre niveau 2 <H2>La recherche et le développement</H1> Au service de la musique, la recherche scientifique explore de nouveaux territoires acoustiques.
La recherche et le développement
Au service de la musique, la recherche scientifique explore de nouveaux territoires acoustiques.

...

titre niveau 6 <H6>En cas de problème, s'adresser au secrétariat.</H6>
En cas de problème, s'adresser au secrétariat

effet souhaité	directive	résultat	notes
titre niveau 1	`<H1>IRCAM</H1> 1 place Igor-Stravinsky,<BR> 75004 Paris`	IRCAM 1 place Igor-Stravinsky, 75004 Paris	Il est inutile de précéder ou de faire suivre un titre des directives <P> ou <BR>: il est séparé du corps du texte. On peut par contre insérer in <BR> dans le titre pour y forcer un retour à la ligne (sous-titre, par exemple).
titre niveau 2	`<H2>La recherche et le développement</H1> Au service de la musique, la recherche scientifique explore de nouveaux territoires acoustiques.`	La recherche et le développement Au service de la musique, la recherche scientifique explore de nouveaux territoires acoustiques.
...
titre niveau 6	`<H6>En cas de problème, s'adresser au secrétariat.</H6>`	En cas de problème, s'adresser au secrétariat

Les tableaux

Ceux-ci sont des extensions récentes - et fort utiles - du langage HTML, et le standard ne s'est pas encore vraiment stabilisé.

Outre une utilisation "normale" pour l'affichage d'information tabulée (comme dans ce document-ci), ils servent actuellement à effectuer des effets de mise en page que HTML ne permet pas, notamment le multi-colonne (cf. l'exemple ci-contre, la page d'accueil du Boston Book Review).

Dans une utilisation de ce type, il faudra considérer bien plus précisément le contenu de chaque cellule du tableau, pour éviter des repliements qui nuiraient à cette mise en page. On peut comparer ce type d'utilisation à celui de QuarkXPress ou PageMaker (par rapport à Word): on prévoit la place des éléments sur la page, plutôt que simplement les uns par rapport aux autres.

Éléments d'un tableau

Un tableau est composé de cellules, agencées en rangées, et les rangées sont alignées les unes en dessous des autres. Les directives de base pour le construire procèdent donc de cette façon:

<TR> signifie «Table Row» (rangée de tableau).

On peut déterminer si les réglures seront visibles ou non, en rajoutant un complément d'information dans la directive se rapportant à tout le tableau: <TABLE BORDER> indique qu'elles doivent être affichées.

Chaque rangée est elle-même constituée de cellules, délimitées par les directives <TD> ... </TD> ("table data", une donnée du tableau):

On n'est pas forcé d'écrire toutes les directives sur la même ligne.

Alignement

Les données, à l'intérieur des cellules, sont alignés à gauche par défaut. Ceci convient bien à du texte, par exemple, mais pas à des images ou des chiffres. Il est possible de déterminer l'alignement de ces données au niveau de chaque rangée et/ou au niveau de chaque cellule.

Ainsi, la directive:

<TR ALIGN=RIGHT> ... </TR>

indique que les contenus de toutes les cellules de cette rangée seront alignées à droite dans leurs cellules, sauf indication contraire pour une cellule spécifique.

Autre exemple: la directive

<TD ALIGN=CENTER> ... </TD>

indique que le contenu de cette cellule sera centré, quelque soit la directive d'alignement pour la rangée.

Exemple 1

Pour obtenir le tableau suivant, on remarquera que la plupart des données sont alignées à droite, sauf pour la 1e cellule de chaque ligne, et que les réglures sont visibles. On écrira donc:

tableau à réaliser

directives

parti 1	19%	27%	10%
parti 2	14%	54%	60%
parti 3	67%	19%	30%

<TABLE BORDER>

<TR ALIGN=RIGHT>
    <TD ALIGN=LEFT>parti 1</TD>
    <TD>19%</TD>
    <TD>27%</TD>
    <TD>10%</TD>
</TR>

<TR ALIGN=RIGHT>
    <TD ALIGN=LEFT>parti 2</TD>
    <TD>14%</TD>
    <TD>54%</TD>
    <TD>60%</TD>
</TR>

<TR ALIGN=RIGHT>
    <TD ALIGN=LEFT>parti 3</TD>
    <TD>67%</TD>
    <TD>19%</TD>
    <TD>30%</TD>
</TR>

</TABLE>

Les espaces entre les lignes ci-dessus n'ont aucune influence sur la mise en page du tableau, mais rendent le document-source plus lisible.

En-têtes

Dans le tableau ci-dessus, il serait utile de pouvoir rajouter une première ligne qui décrit le contenu des colonnes. On peut le faire avec les éléments déjà fournis, en spécifiant, par exemple, une rangée dont tous les éléments sont centrés, et encadrer chaque élément de la directive <B> ... </B> afin qu'il s'affiche en gras. Il existe une directive spéciale pour ce genre de cellule:

<TH> ... </TH>

(TH = "Table Header", en-tête de tableau), qui centre le contenu de la cellule et l'affiche en gras.

Exemple 2

Nous allons rajouter des en-têtes à chaque colonne. Il s'agira d'une ligne composée de cellules de type «en-tête». On écrira donc:

tableau à réaliser

directives

parti	1989	1990	1991
parti 1	19%	27%	10%
parti 2	14%	54%	60%
parti 3	67%	19%	30%

<TABLE BORDER>


<TR>
    <TH>parti</TH>
    <TH>1989</TH>
    <TH>1990</TH>
    <TH>1991</TH>
</TR>


<TR ALIGN=RIGHT>
    <TD ALIGN=LEFT>parti 1</TD>
    <TD>19%</TD>
    <TD>27%</TD>
    <TD>10%</TD>
</TR>

<TR ALIGN=RIGHT>
    <TD ALIGN=LEFT>parti 2</TD>
    <TD>14%</TD>
    <TD>54%</TD>
    <TD>60%</TD>
</TR>

<TR ALIGN=RIGHT>
    <TD ALIGN=LEFT>parti 3</TD>
    <TD>67%</TD>
    <TD>19%</TD>
    <TD>30%</TD>
</TR>

</TABLE>

Chevauchement

Il est possible de faire en sorte qu'une cellule s'étende sur 2 ou plusieurs colonnes et/ou rangées. Pour cela, il suffit de spécifier dans la directive le nombre de colonnes (COLSPAN) ou de rangées (ROWSPAN) sur lesquelles elle s'étend.

Dans le cas de chevauchement horizontal (de colonnes): il y aura moins de cellules à spécifier dans le tableau. Le cas vertical est plus complexe, et nous l'illustreront par un exemple.

Exemple 3

Voici un tableau à réaliser avec un chevauchement horizontal. La 2e ligne ne comportera donc que 3 cellules. On écrira donc:

tableau à réaliser

directives

parti	1989	1990	1991
parti 1	19%		10%
parti 2	14%	54%	60%
parti 3	67%	19%	30%

<TABLE BORDER>

<TR>
    <TH>parti</TH>
    <TH>1989</TH>
    <TH>1990</TH>
    <TH>1991</TH>
</TR>

<TR ALIGN=RIGHT>
    <TD ALIGN=LEFT>parti 1</TD>
    <TD COLSPAN=2>19%</TD>
    <TD>10%</TD>
</TR>

<TR ALIGN=RIGHT>
    <TD ALIGN=LEFT>parti 2</TD>
    <TD>14%</TD>
    <TD>54%</TD>
    <TD>60%</TD>
</TR>

<TR ALIGN=RIGHT>
    <TD ALIGN=LEFT>parti 3</TD>
    <TD>67%</TD>
    <TD>19%</TD>
    <TD>30%</TD>
</TR>

</TABLE>

On aurait pu centrer la donnée dans la cellule chevauchate, en faisant:



<TD COLSPAN=2 ALIGN=CENTER>19%</TD>

Exemple 4

Enfin, voici un chevauchement vertical. La 2e rangée comprend 4 cellules, dont la 3e s'étend sur la 3e rangée. Donc, en écrivant le contenu de la 3e rangée, on ne mentionnera pas cette cellule: son contenu viendra de la rangée précédente.

tableau à réaliser directives

parti 1989 1990 1991

parti 1 19% 10%

parti 2 14% 54% 60%

parti 3 67% 19%

<TABLE BORDER> <TR> <TH>parti</TH> <TH>1989</TH> <TH>1990</TH> <TH>1991</TH> </TR> <TR ALIGN=RIGHT> <TD ALIGN=LEFT>parti 1</TD> <TD COLSPAN=2>19%</TD> <TD>10%</TD> </TR> <TR ALIGN=RIGHT> <TD ALIGN=LEFT>parti 2</TD> <TD>14%</TD> <TD>54%</TD> <TD ROWSPAN=2>60%</TD> </TR> <TR ALIGN=RIGHT> <TD ALIGN=LEFT>parti 3</TD> <TD>67%</TD> <TD>19%</TD> </TR> </TABLE>

Le contenu de la cellule chevauchante est centré verticalement. Il est possible de modifier cet alignement vertical à l'aide du mot-clé VALIGN. Ainsi, si l'on avait voulu que le 60% soit aligné par le haut, on aurait mis:

<TD ROWSPAN=2 VALIGN=TOP>60%</TD>

Contenus

En principe, on peut tout mettre dans la cellule d'un tableau: un paragraphe, plusieurs paragraphes (séparés par exemple par des <P>), des listes, des titres et sous-titres, des images, ...

En fait, les capacités d'affichage des navigateurs varient de l'un à l'autre. Mosaic sur PC et Netscape peuvent afficher les tableaux parmi les plus complexes, tandis que Mosaic sur Unix, par exemple, ne peut traiter que les tableaux les plus simples.

Introduction au langage HTML: comment composer des pages pour un serveur WWW 2. Directives de structuration

IRCAM

La recherche et le développement

En cas de problème, s'adresser au secrétariat

Introduction au langage HTML:
comment composer des pages pour un serveur WWW
2. Directives de structuration