CNDP - Note Technique N° 28 - La conception de tableaux : un outil indispensable

7. La conception de tableaux : un outil indispensable

7.1 Définition d'une zone de tableau
    7.1.1 Bordure
    7.1.2 Alignement
    7.1.3 Largeur
    7.1.4 Formatage des colonnes
7.2 Titre de tableau
7.3 Définition des lignes et des colonnes
7.4 Les cases "titre"
7.5 Les alignements internes
7.6 L'empiètement sur les lignes
7.7 L'empiètement sur les colonnes
7.8 Un savant mélande des commandes précédentes
7.9 Exemple d'inclusion de tableaux entre eux
7.10 Des largeurs et hauteurs en fonction de l'ouverture de l'écran

Cette partie propose de comprendre la programmation des tableaux, ainsi que de nombreuses applications à la mise en page des textes : très vite il deviendra l'outil indispensable à la programmation de toutes vos pages et vous ne pourrez plus vous en passer. C'est devenu pour beaucoup l'outil de plus important du langage HTML : il s'agit donc de savoir le maîtriser.

Les tableaux constituent une extension qui a été apportée à la version 2 de HTML, et qui a été reprise dans le version 3. Comme c'est souvent le cas pour les innovations, rares sont les outils de création de pages qui permettent de créer automatiquement les tableaux, et il est généralement nécessaire de les écrire " à la main ".

Il faut également noter que la définition des tableaux dans la DTD HTML 3 n'est pas totalement arrêtée à l'heure où ces lignes sont écrites ; il n'est donc pas étonnant que les clients n'interprètent pas tous la totalité des commandes.

7.1 Définition d'une zone de tableau

Les balises déterminant la zone utile du tableau sont définies par la commande <TABLE> et sa terminaison </TABLE>.

La définition des tableaux est très largement comparable à la déclaration des formulaires (voir plus haut).

Il est à remarquer que cette version de HTML insère automatiquement une ligne séparatrice avant et après ce tableau, ce qui limite les possibilités de mise en page (images ou textes à côté de celui-ci...).

7.1.1 Bordure

L'attribut BORDER définit le cadre par défaut : s'il est absent, le tableau n'aura pas de cadre.

Syntaxe

Avec bordure	<TABLE BORDER>....</TABLE>
Sans bordure	<TABLE>....</TABLE>

7.1.2 Alignement

Par défaut, le tableau est aligné sur la marge gauche.

L'attribut ALIGN permet de modifier sa position. Il peut prendre les valeurs LEFT ou RIGHT (alignement par rapport aux marges gauche et droite), CENTER (centré), JUSTIFY (justifié entre les marges), BLEEDLEFT ou BLEEDRIGHT (aligné à gauche ou à droite sur le bord de la fenêtre).

7.1.3 Largeur

L'attribut WIDTH="N" permet de spécifier la largeur du tableau. N peut s'exprimer en pourcentage de l'ouverture de la fenêtre (WIDTH=50% indique un tableau de la moitié de la largeur de la fenêtre).

7.1.4 Formatage des colonnes

L'attribut COLSPEC permet de définir l'alignement interne des colonnes et leur largeur.

COLSPEC="LN RN CN" indique que le contenu de la première colonne est aligné à gauche (L pour left), la deuxième à droite (R), la troisième centrée (C).

N indique la largeur des colonnes respectives en points typographiques.

L'attribut UNITS permet de modifier cette unité, mais il semble à peu près inusité.

7.2 Titre de tableau

La commande <CAPTION> (associée à sa terminaison </CAPTION>) permet de donner un titre au tableau. On peut remarquer que par défaut, le titre du tableau se place au dessus de celui-ci et se centre sur celui-ci. L'attribut ALIGN=BOTTOM permet de placer le titre en dessous du tableau.

L'attribut ALIGN permet de définir la position du titre. Il peut prendre les valeurs TOP/BOTTOM, LEFT/RIGHT. Par défaut, le titre est au-dessus du tableau et centré.

Syntaxe


<CAPTION>Titre du tableau</CAPTION>
<CAPTION ALIGN=TOP ALIGN=LEFT>Titre du tableau</CAPTION>

7.3 Définition des lignes et colonnes

Les lignes du tableau sont définies par la commande <TR> (et sa terminaison </TR>). Les colonnes du tableau sont définies par la commande <TD> (et sa terminaison </TD>).

On peut insérer dans le tableau ainsi défini toutes sortes de commandes y compris un autre tableau ou des images.

On remarquera que, par défaut, le texte contenu dans une case est aligné à gauche.

7.4 Les cases " titre "

Une commande supplémentaire existe pour faciliter la programmation des tableaux dans un but bien précis : les titres. Cette commande est <TH> et sa terminaison </TH>. Elle joue, pour le cas particulier des titres, le même rôle que <TD> vu précédemment ; le texte qu'elle contient est mis en gras et centré dans la case qui le contient.

Exemple de source


<TABLE BORDER>
<TR>
<TH>Titre</TH><TD>pas titre 1</TD><TD>pas titre 2</TD>
</TR>
<TR>
<TD>pas titre 3</TD><TD>pas non plus titre 4</TD>
</TR>
</TABLE>

Résultat sur le Web

Titre	pas titre 1	pas titre 2
pas titre 3	pas non plus titre 4

Il est à remarquer que toutes les cases peuvent ne pas être remplies, ce qui n'empêchera pas la construction du tableau.

7.5 Les alignements internes

Pour pouvoir aligner ou centrer les objets du tableau par rapport à celui-ci, il faut utiliser les deux attributs ALIGN et VALIGN, qui peuvent affecter soit la commande <TD> soit la commande <TR>.

Il faut savoir cependant que par défaut ALIGN est associé à l'argument left et que VALIGN est associé à middle. Plusieurs arguments peuvent être affectés à ces deux commandes : center, left, right pour ALIGN et middle, top, bottom pour VALIGN.

De plus, si on associe l'une de ces deux commandes (ou les deux) à <TD> celle-ci n'aura d'effet que dans l'unique case qu'elle définit. Mais si on associe l'une de ces commandes (ou les deux) à <TR>, celle-ci aura un effet sur toutes les cases de la ligne (jusqu'au prochain </TR>).

Syntaxe


ALIGN="LEFT/CENTER/RIGHT/JUSTIFY/DECIMAL"
VALIGN="TOP/MIDDLE/BOTTOM/BASELINE"

Exemple de source


<TABLE BORDER>
<TR>
<TH>Janvier</TH><TH>F&eacute;vrier</TH><TH>Mars</TH>
</TR>
<TR align=center>
<TD>tous align&eacutes;<BR>au centre</TD><TD>Champs 5<BR>encore centr&eacute;</TD><TD>Champs 6<BR>de m&ecirc;me</TD>
</TR>
<TR>
<TD align=center>celui-ci<BR>centr&eacute;</TD><TD align=right>Champs 5<BR>align&eacute;<BR>sur la droite</TD><TD align=left>Champs 6<BR>comme par<BR>d&eacute;faut</TD>
</TR>
</TABLE>

Résultat sur le Web

Janvier	Février	Mars
tous align&eacutes au centre	Champs 5 encore centré	Champs 6 de même
celui-ci centré	Champs 5 aligné sur la droite	Champs 6 comme par défaut

Exemple de source


<TABLE BORDER>
<TR>
<TH>Janvier</TH><TH>F&eacute;vrier</TH><TH>Mars</TH>
</TR>
<TR valign=bottom>
<TD>tous cadr&eacute;s<BR>sur le bas<BR>du tableau</TD><TD>Champ 5<BR>encore</TD><TD>aussi</TD>
</TR>
<TR>
<TD valign=top>celui-ci<BR>en haut</TD><TD valign=middle>Champ 5<BR>align&eacute;s comme par<BR>d&eacute;faut</TD><TD valign=bottom>en bas</TD>
</TR>
</TABLE>

Résultat sur le Web

Janvier	Février	Mars
tous cadrés sur le bas du tableau	Champ 5 encore	aussi
celui-ci en haut	Champ 5 alignés comme par défaut	en bas

7.6 L'empiétement sur les lignes

L'attribut ROWSPAN de la commande <TD> permet de créer des cellules avec un empiétement sur plusieurs lignes.

Syntaxe


...<TD ROWSPAN=2>ZoneTexte</TD> ...
...<TD ROWSPAN=n>ZoneTexte>/TD> ...

où n est un nombre entier déterminant le nombre de lignes sur lesquelles la ZoneTexte va empiéter.

Exemple de source


<TABLE BORDER>
<TR>
<TD>Champ 1</TD><TD ROWSPAN=2>Champ 2</TD><TD>Champ3</TD>
</TR>
<TR>
<TD>Champ 4</TD><TD>Champ 5</TD>
</TR>
</TABLE>

Résultat sur le Web

Champ 1	Champ 2	Champ3
Champ 4	Champ 2	Champ 5

7.7 Empiétement sur les colonnes

L'attribut COLSPAN de la commande <TD> permet de créer des cellules avec un empiétement sur plusieurs colonnes.

Syntaxe


...<TD COLSPAN=2>ZoneTexte</TD> ...
...<TD COLSPAN=n>ZoneTexte>/TD> ...

où n est un nombre entier déterminant le nombre de colonnes sur lesquelles la ZoneTexte va empiéter.

Exemple de source


<TABLE BORDER>
<TR>
<TD>Champ 1</TD><TD COLSPAN=2>Champ 2</TD>
</TR>
<TR>
<TD>Champ 3</TD><TD>Champ 4</TD><TD>Champ 5</TD>
</TR>
</TABLE>

Résultat sur le Web

Champ 1	Champ 2
Champ 3	Champ 4	Champ 5

7.8 Un savant mélange des commandes précédentes

TH, ROWSPAN et COLSPAN.

Exemple de source


<TABLE BORDER>
<TR><TD ROWSPAN=2 COLSPAN=2></TD><TH>Moyenne</TH></TR>
<TR><TH>Hauteur</TH><TH>Espérance</TH></TR>
<TR>
<TH ROWSPAN=2>Sexe</TH>
<TH>Masculin</TH><TD>1.78</TD><TD>70</TD>
</TR>
<TR><TH>Féminin</TH><TD>1.70</TD><TD>80</TD>
</TR>
</TABLE>

Résultat sur le Web

		Hauteur	Espérance
		Moyenne
Sexe	Masculin	1.78	70
Sexe	Féminin	1.70	80

7.9 Exemple d'inclusion de tableaux entre eux

Il est possible d'inclure des tableaux les uns dans les autres comme des “poupées russes”. Cela représente néanmoins un handicap au niveau de la vitesse d'exécution : plus il y a de tableaux inclus et plus l'affichage est lent.

Exemple de source


<TABLE BORDER>
<TR>
	<TD>1</TD>
	<TD>2</TD>
	<TD>3
	<TABLE BORDER=0>
	<TR><TD>A</TD><TD>B</TD></TR>
	<TR><TD>C</TD><TD>D</TD></TR>
	</TABLE>
	</TD>
</TR>
<TR><TD>4</TD><TD>5</TD><TD>6</TD></TR>
</TABLE>

Résultat sur le Web

A	B
C	D

7.10 Des largeurs et hauteurs en fonction de l'ouverture de l'écran

Il est aussi possible aussi de construire un tableau dont les tailles sont définies en fonction de la taille de l'écran de restitution.

Il y a alors deux sortes de commandes suivant que l'on veut une ouverture bien définie par rapport à l'horizontale ou la verticale : la commande WIDTH pour la largeur et la commande HEIGHT pour la hauteur, internes toutes les deux à la commande <TABLE...>. On pourra se reporter au réglage de la largeur propre à la commande HR permettant de tracer une ligne de séparation.

Syntaxe


<TABLE ... WIDTH=“n%”>...
<TABLE ... HEIGHT=“m%”>...
</TABLE>

avec n% et m% étant le pourcentage d'ouverture du tableau par rapport à la taille d'écran.

Exemple de source


<TABLE BORDER WIDTH=“50%”>
<TR>
<TD>tableau ouvert &agrave; cinquante pour cent de la page</TD>
<TD>et r&eacute;glage automatique du retour &agrave; la ligne</TD>
</TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>

Résultat sur le Web

tableau ouvert à cinquante pour cent de la page	et réglage automatique du retour à la ligne
3	4

Exemple de source


<TABLE BORDER WIDTH=“100%”>
<TR><TD>ici cadre &agrave; 100% de l'ouverture</TD></TR>
</TABLE>

Résultat sur le Web

ici cadre à 100% de l'ouverture

Exemple de source


<TABLE BORDER HEIGHT=“50%”>
<TR>
<TD>tableau ouvert à cinquante pour cent de la page</TD>
</TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>

Résultat sur le Web

tableau ouvert à cinquante pour cent de la page
3	4

Sommaire

Suite