Accueil Images Boîte à outils Liens Contact
 

 

 

 

 

Boîte à outils

Diviser facilement une page

Il existe trois méthodes principales pour diviser une page en plusieurs zones : les cadres (traités dans la section Générateur de cadres de ce site), les tableaux et le CSS. Cette page présente la méthode avec tableau, où chaque cellule représente une zone distincte, dans laquelle viendront s'insérer les différents éléments textuels et visuels.

Plutôt que de grandes explications, voici quelques exemples; dans un premier temps, le code, puis, juste en dessous, le résultat obtenu avec ce code. Les séparations servent uniquement à distinguer les grandes sections du code. Les éléments en noir représentent des échantillons de contenu que vous remplacez par votre propre texte ou vos propres images :

 

 

Déclaration du tableau <table border="0" width="100%" cellspacing="0" cellpadding="6">
Ce code représente la rangée du haut (en bleu pâle).

Pour obtenir un tableau sans cette rangée, il suffit de supprimer tout ce code. Il peut également être placé juste avant le code </table> de la fin pour avoir la même rangée mais en bas.

<tr>
    <td width="100%" bgcolor="#7599C1" valign="top" colspan="2"><font color="#000000">
Vous pouvez insérer ici du texte, des images, des liens, un autre tableau, etc :</font>
      <p>
        <center>
        <table border="1" width="60%" cellpadding="4">
          <tr>
            <td width="50%"><font color="#000000">
Cellule1_Rangée1</font></td>
            <td width="50%"><font color="#000000">
Cellule2_Rangée1</font></td>
          </tr>
          <tr>
            <td width="50%"><font color="#000000">
Cellule1_Rangée2</font></td>
            <td width="50%"><font color="#000000">
Cellule2_Rangée2</font></td>
          </tr>
        </table>
        </center>
   <p align="center"><img src="
bou0598-8.gif" width="150" height="55"></td>
  </tr>
Ce code représente la cellule de gauche de la rangée du dessous (en brun).   <tr>
    <td width="20%" bgcolor="#800000" valign="top"><font color="#FFFFFF">
Vous pouvez insérer ici du texte, des images, des liens, un autre tableau, etc.</font>
      <p>
      <center>
      <table border="1" width="60%" cellpadding="4">
        <tr>
          <td width="50%"><font color="#FFFFFF">
C1_R1</font></td>
          <td width="50%"><font color="#FFFFFF">
C2_R1</font></td>
        </tr>
        <tr>
          <td width="50%"><font color="#FFFFFF">
C1_R2</font></td>
          <td width="50%"><font color="#FFFFFF">
C2_R2</font></td>
        </tr>
       </table>
       </center>
       <p>
       <img src="bou0598-8.gif" width="150" height="55" alt="
bou0598-8.gif"></td>
Ce code représente la cellule en jaune pâle    <td width="80%" bgcolor="#DACEB1" valign="middle"><font color="#000000">Vous pouvez insérer ici du texte, des images, des liens, un autre tableau, etc.</font>
   <p>
   <center>
    <table border="1" width="60%" cellpadding="4">
      <tr>
        <td width="50%"><font color="#000000">
Cellule1_Rangée1</font></td>
        <td width="50%"><font color="#000000">
Cellule2_Rangée1</font></td>
      </tr>
      <tr>
        <td width="50%"><font color="#000000">
Cellule1_Rangée2</font></td>
        <td width="50%"><font color="#000000">
Cellule2_Rangée2</font></td>
      </tr>
    </table>
  </center>
<p align="center"><br><img src="bou0598-8.gif" width="150" height="55" alt="
bou0598-8.gif"></td>
</tr>
Fin du tableau </table>

 

Voici ce qui devrait résulter de ce code. Les images n'apparaîtront que si vous les téléchargez (bouton droit de la souris + Enregistrer l'image sous...)

 

Vous pouvez insérer ici du texte, des images, des liens, un autre tableau, etc.

 

Cellule1_Rangée1 Cellule2_Rangée1
Cellule1_Rangée2 Cellule2_Rangée2


Vous pouvez insérer ici du texte, des images, des liens, un autre tableau, etc.

 

C1_R1 C2_R1
C1_R2 C2_R2


Vous pouvez insérer ici du texte, des images, des liens, un autre tableau, etc.

 

Cellule1_Rangée1 Cellule2_Rangée1
Cellule1_Rangée2 Cellule2_Rangée2


 

Le même tableau avec des espaces entre les cellules. La seule différence de codification réside dans la première ligne de code, dans laquelle le paramètre "cellspacing" a été configuré à 6. Tout le reste est identique :

 

<table border="0" width="100%" cellspacing="6" cellpadding="6">

 

Vous pouvez insérer ici du texte, des images, des liens, un autre tableau, etc.

 

Cellule1_Rangée1 Cellule2_Rangée1
Cellule1_Rangée2 Cellule2_Rangée2


Vous pouvez insérer ici du texte, des images, des liens, un autre tableau, etc.

 

C1_R1 C2_R1
C1_R2 C2_R2


Vous pouvez insérer ici du texte, des images, des liens, un autre tableau, etc.

 

Cellule1_Rangée1 Cellule2_Rangée1
Cellule1_Rangée2 Cellule2_Rangée2


 

Toujours le même tableau, mais avec des images comme fonds de cellules. Dans ce cas, on attribue un paramètre "background" à chaque cellule, comme ceci (code de la première rangée du tableau ci-dessous :

 

<td width="100%" bgcolor="#7599C1" valign="top" colspan="2" background="diviser_fds1.jpg">

 

Cellule1_Rangée1

Cellule1_Rangée2

Cellule2_Rangée2

 

Et si tout ceci vous a semblé un peu trop compliqué ou que vous préférez les solutions "clé en main", j'ai préparé pour vous quelques "modèles", que vous pouvez sauvegarder sur votre disque dur et utiliser comme point de départ d'une page divisée selon ce mode :

 

mod_sec1.gif (355 octets) mod_sec2.gif (405 octets) mod_sec3.gif (289 octets) mod_sec4.gif (368 octets) mod_sec5.gif (412 octets)


En cliquant sur chaque modèle, vous tomberez dans la page .html correspondante. Pour l'enregistrer sur votre disque dur, choisissez Fichier/Enregistrer sous... et sélectionner le répertoire de votre choix. Il suffira ensuite de modifier les éléments textuels déjà existants par votre propre contenu.

 
 

 

Accueil Images Boîte à outils Liens Contact

  Hit-Parade 

© Grenadine.net - 1998-2011