Les outils avancés de mise en page HTML

• Les tableaux
• Propriétés de la balise TABLE
• Propriétés de la balise TD
• Fusion de cellules verticales
• Fusion de cellules horizontales
• Les cadres ou frames
• Propriétés de la balise FRAMESET
• Propriétés de la balise FRAME

Les tableaux

Pour disposer en toute liberté vos éléments au sein d'un document HTML, et garantir un affichage correct de votre mise en page, vous aurez systématiquement recourt aux tableaux. Des tableaux dans des tableaux, des fusions de cellules visibles, ou invisibles, cet outil est très souple, et d'une efficacité redoutable.

Comme nous l'avions déjà évoqué dans les généralités sur le document HTML, ce langage consiste à coder une mise en page en 2 dimensions de façon linéaire, c'est à dire en ligne de code HTML de dimension 1. Un tableau, nécessairement en 2 dimensions doit alors être réduit à la dimension 1 dans le codage HTML. Une balise nommée <table></table> code respectivement pour le début et la fin d'un tableau. Une autre balise s'imbrique dans <table></table> pour coder les débuts et fins de lignes du tableau. Cette balise se nomme <tr></tr>. Enfin, une balise s'imbrique une nouvelle fois dans <tr></tr>, pour coder les débuts et fins de cellules. Il s'agit de <td></td>. Les illustrations ci dessous illustrent ce codage.

Le codage HTML de dimension 1 d'un tableau en 2 dimensions

Les indentations des balises aident la compréhension du code HTML

Le même tableau, sans indentations du code HTML.
Nettement moins lisible !

Les retours à la ligne, les retraits ou indentations n'ont aucune influence sur le résultat final de la mise en page HTML. Et pour cause, nous sommes en dimension 1. Les deux dernières illustrations de codes HTML provoquent l'affichage d'un tableau strictement identique, seule la disposition du code HTML varie, par l'ajout de retours à la ligne, et d'indentations. Ceci est purement destiné à améliorer la compréhension du code pour le programmeur. L'indentation consiste à retourner à la ligne, en insérant un retrait de longueur croissante, à chaque imbrication d'une nouvelle balise HTML. Ceci aide à visualiser la portée des balises ouvertes, et vérifier ainsi leurs fermetures respectives. Lors d'une fermeture de balise, vous diminuez votre indentation d'un niveau.

D'autre part, les indentations facilitent la correction d'un problème d'affichage lié à un oubli de fermeture de balise par exemple, qui est une erreur très courante. Une bonne habitude consiste à écrire la balise de fermeture systématiquement après l'ouverture d'une balise.

Notez cependant que la balise </td> de notre tableau HTML précédent ne respecte pas la règle de l'indentation. Il devrait être au même niveau de retrait que son homologue d'ouverture <td>. Ceci est une liberté que vous pouvez prendre, le but étant d'améliorer au maximum la lisibilité et de la compréhension visuelle instantanée de votre codage HTML.

Cette règle très simple de l'indentation est générale à tous les langages de programmation informatique. L'indentation est une convention adoptée par tous les programmeurs et dont il faut avoir le réflexe le plus tôt possible. Ici, vous manipulez les indentations avec des balises HTML sur un exemple relativement simple. Il en va de même pour les programmes beaucoup plus complexes.

Un très grand nombre de propriétés peuvent être appliquées sur un tableau. Les propriétés de <table> s'appliquent sur l'ensemble du tableau, tandis que les propriétés de <td> s'appliquent uniquement sur la cellule concernée.

Propriétés de la balise TABLE

Propriétés de la balise TD

Exemple :

Dont voici le code HTML :

<div align="center">
<table border="1" cellpadding="4" cellspacing="4" bordercolor="#c0c0c0" width="60%" height="293">

  <tr>
    <td width="33%" height="126" align="justify" valign="top">
    <b>cellule <font size="4">1</font>.</b> Texte par défaut 
    pour mettre en évidence l'alignement du contenu de cette cellule.</td>

    <td width="67%" height="126" align="right">
    <b>cellule <font size="4">2</font>.</b> Texte par défaut 
    pour mettre en évidence l'alignement du contenu de cette cellule.</td>
  </tr>


  <tr>
    <td width="33%" height="139" align="left" valign="bottom">
    <b>cellule <font size="4">3</font>.</b> Texte par défaut 
    pour mettre en évidence l'alignement du contenu de cette cellule.</td>

    <td width="67%" height="139" align="center" valign="top">
    <b>cellule <font size="4">4</font>.</b> Texte par défaut 
    pour mettre en évidence l'alignement du contenu de cette cellule.</td>
  </tr>

</table>
</div>

Fusion de cellules verticales

Fusionner les cellules verticalement correspond à transformer N cellules en une seule cellule. Il s'agit aussi d'une fusion de N lignes au sein d'une colonne. La balise d'ouverture d'une cellule dans le codage HTML est <td>. Pour indiquer qu'il s'agit d'une cellule fusionnée, ajoutez une propriété nommée rowspan, qui reçoit pour valeur N, le nombre de lignes fusionnées. Les illustrations suivantes vont vous aider à y voir plus clair.

La cellule 3 a disparu

Le codage HTML d'une fusion de cellules verticales

La cellule 3 a bel et bien disparu et appartient désormais à la cellule 1. Ainsi, nous retrouvons le contenu de la cellule 1 en ligne 1. Quant à la ligne 2, il n'y a plus qu'une seule cellule à définir, la cellule 3 n'existant plus.

Fusion de cellules horizontales

Fusionner les cellules horizontalement correspond à transformer N cellules en une seule cellule. Il s'agit aussi d'une fusion de N colonnes au sein d'une ligne. La balise d'ouverture d'une cellule dans le codage HTML est <td>. Pour indiquer qu'il s'agit d'une cellule fusionnée, ajoutez une propriété nommée colspan, qui reçoit pour valeur N, le nombre de colonnes fusionnées. Les illustrations suivantes vont vous aider à y voir plus clair.

La cellule 2 a disparu

Le codage HTML d'une fusion de cellules horizontales

La cellule 2 a bel et bien disparu et appartient désormais à la cellule 1. Ainsi, la ligne 1 ne contient qu'une seule cellule à définir. La ligne 2 reste inchangée.

Les cadres ou frames

Il s'agit d'un découpage de la fenêtre du navigateur en plusieurs fenêtres intégrées et indépendantes les unes des autres.

Exemple de frames.

Télécharger l'exemple (ZIP) - ouvrez ex1_INDEX.htm

Pour examiner le codage HTML de la page supportant la structure de frames, cliquez sur le bouton Affichage, puis selectionnez Source dans le menu contextuel sous MS Internet Explorer. Pour visualiser le codage HTML des pages Web intégrée à la structure de frames, faites un clic droit sur l'une des frames, puis Afficher la source. Vous pouvez par ailleurs renommer les fichiers par l'extension .txt ou les ouvrir à l'aide de Bloc Notes de MS Windows.

Vous constaterez que la page supportant la structure de frames (ex1_INDEX.htm) ne contient pas de <body>. La structure fait appel à deux autres pages externes. Ces pages sont affichées sur une seule et même fenêtre.

De manière analogue aux tableaux, la balise <frameset></frameset> code respectivement pour le début et la fin d'une structure de frames. La balise <frame> appelle les pages externes. Voici le codage HTML de la structure de frames de notre exemple.

<html>
<head>
<title> Exemple de frames </title>
</head>

  <frameset cols="200,*">
    <frame name="left" src="ex1_left.htm">
    <frame name="right" src="ex1_right.htm">
  </frameset>

  <noframes>
  Message si le navigateur ne supporte pas les frames
  </noframes>

</html>

Il est théoriquement possible d'imbriquer à l'infinie des structures de frames, c'est à dire créer des subdivisions dans les cadres de la manière suivante.

  <frameset rows="200,*">

    <frame name="top" src="ex2_top.htm">

    <frameset cols="35%, *">
    <frame name="left" src="ex2_left.htm">
    <frame name="right" src="ex2_right.htm">
    </frameset>

  </frameset>

Exemple de subdivisions de structures de frames.

Télécharger l'exemple (ZIP) - ouvrez ex2_INDEX.htm

Propriétés de la balise FRAMESET

Propriétés de la balise FRAME

Voir un exemple mettant en application ces propriétés.

Télécharger l'exemple (ZIP) - ouvrez ex3_INDEX.htm