Utilisation des tableaux pour la création de pages HTML Par Toussaint Frédéric

E  t  a  p  e   5 :

 
Création de notre premier tableau
Retour maintenant dans le composer de Netscape, nous allons créer notre tableau avec le bouton  nous préciserons que nous souhaitons 5 lignes et 3 colonnes, le tableau sera aussi centré dans la page. Ne vous souciez pas pour l'instant des autres paramètres. Maintenant, nous pouvons intégrer les différentes images  comme le tableau de la page du concept des tableaux le suggère.

Quelques conseils pour cette étape :

Cochez l'option "laissez l'image à l'emplacement d'origine", sinon le composer enregistrera l'image dans le même répertoire que celui qui contient la page.
Commencez par faire les angles dans l'ordre, puis les côtés, pour aller plus vite, vous pouvez copier les côtés (Alt+c) pour les coller (Alt+V) dans les différentes cellules.

Une fois cette opération achevée, vous remarquerez que les cellules haut, bas gauche et droit ne contiennent qu'un petit bout de cadre, et ne remplissent pas complètement la cellule. Pour obtenir un remplissage correct, nous allons les mettre en fond de cellule. Sélectionnez la cellule qui contient fond-titre.png (en cliquant sur l'image), faites un clic droit,  et sélectionnez les propriétés du tableau. la boîte de dialogue s'affiche, sélectionnez l'onglet cellule, puis indiquez que vous souhaitez utiliser une image comme couleur de fond, sélectionnez alors la même image que celle incluse dans la cellule concernée.

Validez et procédez de la même sorte pour le bas, le côté droit et le côté gauche. Les angles ne sont pas concernés car la taille de leur cellule restera fixe. Normalement si tous se passe correctement vous devriez avoir quelque chose qui ressemble à cela :

Pour l'instant cela  ne ressemble pas du tout à ce que nous souhaitons obtenir, mais le résultat va arriver. Pour la suite nous devons aligner les images du côté gauche à droite pour qu'elles se collent, formant ainsi la bordure. Sélectionnez angle1.png et alignez à droite  et procédez de même pour toutes les images qui se trouvent sur côté gauche.