Spécifique Internet Explorer et HTML 4.0

Tableaux et multicolonnage

Groupement de lignes

<TBODY> ... </TBODY>: Cette commande définit le corps du tableau et fonctionne comme la fonction <BODY> d'un document.

<THEAD> ... </THEAD>: Cette commande définit la tête du tableau, c'est-à-dire son aspect général et fonctionne comme la fonction <HEAD> d'un document.

<TFOOT> ... </TFOOT>: Cette commande spécifie le bas d'un tableau.

Cette technique de division des lignes de tableau en une zone d'en-tête (Header), de pied de tableau (foot) et en une ou plusieurs sections du corps permet de faire défiler indépendamment différentes zones d'un tableau

Exemple :

<TABLE BORDER> <THEAD> <TR><TD>...Informations de l'en-tête...</TD></TR> </THEAD> <TFOOT> <TR><TD>...Informations du pied de tableau...</TD></TR> </TFOOT> <TBODY> <TR> <TD>...Première ligne, premier bloc...</TD> <TD>...Première ligne, deuxième bloc...</TD></TR> </TBODY> <TBODY> <TR> <TD>...Deuxième ligne, premier bloc...</TD> <TD>...Deuxième ligne, deuxième bloc...</TD></TR> </TBODY> </TABLE>

Attributs des groupements de lignes

<TBODY ALIGN="CENTER|LEFT|RIGHT">: Permet de justifier à droite, à gauche ou au centre de la page.

<TBODY BGCOLOR="?">: Permet de spécifier une couleur au corps du tableau.

<TBODY VALIGN="BASELINE|BOTTOM|CENTER|TOP">: Définit l'alignement vertical du texte d'un groupe de colonnes.

<THEAD ALIGN="CENTER|LEFT|RIGHT">: Permet de justifier à droite, à gauche ou au centre de la page.

<THEAD BGCOLOR="?">: Permet de spécifier une couleur au corps du tableau.

<THEAD VALIGN="BASELINE|BOTTOM|CENTER|TOP">: Définit l'alignement vertical du texte d'un groupe de colonnes.

<TFOOT ALIGN="CENTER|LEFT|RIGHT">: Permet de justifier à droite, à gauche ou au centre de la page.

<TFOOT BGCOLOR="?">: Permet de spécifier une couleur au corps du tableau.

<TFOOT VALIGN="BASELINE|BOTTOM|CENTER|TOP">: Définit l'alignement vertical du texte d'un groupe de colonnes.

Groupes de présentation (HTML 4.0)

Lorsqu'un tableau est affiché, le navigateur doit en analyser toutes les lignes pour compter le nombre de colonne, ce qui provoque des délais d'affichage qui sont pénalisants surtout pour de gros tableaux.

Ajouter à la balise <TABLE> le nombre de colonne du tableau à l'aide de la fonction <COLS> permet de réduire ce temps d'affichage.

Les colonnes d'un tableau peuvent alors être groupées, chaque groupement étant défini par la fonction <COLGROUP>

<COLGROUP>: Permet de grouper des colonnes d'un tableau afin de spécifier leur alignement.

<COL>: Spécification de l'alignement du texte dans le tableau

Attributs des groupes de présentation

<COL ALIGN="CENTER|LEFT|RIGHT">: Alignement d'une colonne, la valeur par défaut est au centre.

<COL SPAN="?">: Nombre de colonnes qui seront affectées par l'attribut ALIGN.

<COL VALIGN="BASELINE|BOTTOM|CENTER|TOP">: Alignement vertical du texte d'un groupe de colonnes.

<COL WIDTH="?">: Taille de l'élément en pixel.

<COLGROUP ALIGN="CENTER|LEFT|RIGHT">: Alignement d'un groupe de colonnes, la valeur par défaut est au centre.

<COLGROUP SPAN="?">: Nombre de colonnes qui seront affectées par l'attribut ALIGN.

<COLGROUP VALIGN="BASELINE|BOTTOM|CENTER|TOP">: Alignement vertical du texte d'un groupe de colonnes.

<COLGROUP WIDTH="?">: Taille de l'élément en pixel.

Exemple :

<TABLE BORDER> <COLGROUP SPAN="10" WIDTH="50" ALIGN="LEFT"> <COLGROUP SPAN="5" WIDTH="0*" ALIGN="RIGHT"> <THEAD> <TR><TD>...Informations de l'en-tête...</TD></TR> </THEAD> <TFOOT> <TR><TD>...Informations du pied de tableau...</TD></TR> </TFOOT> <TBODY> <TR> <TD>...Première ligne, premier bloc...</TD> <TD>...Première ligne, deuxième bloc...</TD></TR> </TBODY> <TBODY> <TR> <TD>...Deuxième ligne, premier bloc...</TD> <TD>...Deuxième ligne, deuxième bloc...</TD></TR> </TBODY> </TABLE>

Dans cet exemple, le tableau contient deux groupes de présentation, le premier comprenant 10 colonnes, le second 5.

La valeur par défaut pour chaque colonne du premier groupe est de 50 pixels, pour le second c'est le minimum optimal pour chaque colonne.

Autres attributs des groupements de lignes et groupes de présentation

Les attributs suivants fonctionnent seulement lorsque l'attribut BORDER est présent, ils permettent d'ajuster l'affichage des bordures du tableau :

<FRAME="ABOVE">: Affiche les bordures externes du haut du tableau seulement.

<FRAME="BELOW">: Affiche les bordures externes du bas du tableau seulement.

<FRAME="BORDER">: Affiche les bordures sur tous les côtés du tableau.

<FRAME="BOX">: Affiche une boîte autour du tableau (en haut, en bas, à gauche et à droite).

<FRAME="HSIDES">: Affiche les bordures externes du coté horizontal du tableau, (en haut et en bas).

<FRAME="INSIDES">: Affiche les bordures sur le dessus et le dessous du tableau seulement.

<FRAME="LHS">: Affiche les bordures externes du coté gauche du tableau seulement.

<FRAME="RHS">: Affiche les bordures externes du coté droit du tableau seulement.

<FRAME="VOID">: Permet de retirer toutes les bordures externes du tableau.

<FRAME="VSIDES">: Affiche les bordures externes du coté droit et gauche du tableau.

Les attributs suivants fonctionnent seulement lorsque l'attribut BORDER et les commandes <THEAD>, <TBODY> et <TFOOT> sont présents, ils permettent d'ajuster l'affichage interne de la bordure du tableau :

<RULES="ALL">: Affiche des bordures dans le tableau.

<RULES="COLS">: Affiche une bordure horizontale entre toutes les colonnes du tableau.

<RULES="GROUPS">: Affiche une bordure horizontale entre les sections <THEAD>, <TBODY> et <TFOOT>.

<RULES="NONE">: Pour retirer toutes les bordures internes du tableau.

<RULES="ROWS">: Affiche une bordure horizontale entre toutes les lignes du tableau.

<DATASRC="nom">: Spécifie la source des données se rattachant au tableau.

Exemple :

<TABLE BORDER WIDTH="75%" FRAME="HSIDES" RULES="COLS"> <THEAD> <COLGROUP SPAN="4" ALIGN="LEFT" VALIGN="TOP"> </THEAD> <TFOOT>7</TFOOT> <TBODY> <TR> <TD><B>Head1</B></TD> <TD>Item 1</TD> <TD>Item 2</TD> <TD>Item 3</TD> </TR> <TR> <TD><B>Head2</B></TD> <TD>Item 4</TD> <TD>Item 5</TD> <TD>Item 6</TD> </TR> <TR> <TD><B>Head3</B></TD> <TD>Item 7</TD> <TD>Item 8</TD> <TD>Item 9</TD> </TR> </TBODY> </TABLE>

Multicolonnage

<MULTICOL> ... </MULTICOL>: Permet au texte d'être affiché sur plusieurs colonnes.

Attributs :

COLS="?": Spécification du nombre de colonne se trouvant entre les balises <MULTICOL> et </MULTICOL>.

Chaque colonne est délimitée par une balise <P>.

GUTTER="?": Spécification en pixel du nombre d'espaces blancs entre chaque colonne.

WIDTH="?|%": Spécification en pixel ou en pourcentage de l'espace occupé par les colonnes dans la page.

Exemple :

<MULTICOL COLS="3" GUTTER="25" WIDTH="90%"> Texte1 <P> Texte2 <P> Texte3 </MULTICOL>