Comment faire un site Internet

 

Asctuce #6

   
 

Comment dimensionner un tableau  facilement

Le spacer.gif

Le spacer.gif est une image numérique de très petite dimension et qui ne contient pas d'image.
En fait, c'est un "transparent".

Comme on peut le placer dans n'importe quelle cellule d'un tableau, il ne modifiera pas les contenus du tableau.

À quoi ça sert

Prenons un exemple pour comprendre.

Voir ci-bas

 

 

 


Construisons un tableau de 3 lignes et de 3 colonnes. Il a cette apparence

     
     
     
  
      

Dans les cellules en gris, nous avons inséré le fichier image : spacer.gif.

   
 
   

Nous pouvons maintenant agrandir notre tableau pour lui donner cette apparance:
 

   
Explication:

Lorsqu'on change la grandeur de l'image, on change aussi la
dimention de la cellule.

Le spacer.gif du haut est de 650 pixels de large par 5 pixels de haut:

           <img border="0" src="../images/spacer.gif" width="650" height="5">

Celui de gauche est de 5 x 400 pixels

          <img border="0" src="../images/spacer.gif" width="15" height="400">

Celui du bas, 5 x 5 pixels

          <img border="0" src="../images/spacer.gif" width="5" height="5">

Celui de droite, 5 x 5 pixels

          <img border="0" src="../images/spacer.gif" width="15" height="5">

Ensuite nous avons enlevé la bordure de la table (border=0) 
Cela nous donne la présente apparence. Les coins rouges sont une couleur de fond ajoutée
à chaque cellule des coins

 
     

Pour aller encore plus loin le haut de la présente page utilise une image de
fonds transparante seulement en son centre.

                                            


Elle est positionnée pour couvrir tout juste la dimension que nous voulons
donner au tableau. L'énoncé table qui suit en est la définition; nous avons ajouté un style
à la table qui donne la référence à l'image et sa dimension désirée (en pixel)
qui permet d'avoir une image en arrière plan. Comme astuce.gif est transparent
en son centre, seul le cadre apparaît.

           <table border="0" align="center" summary="" style="background: url('../images/astuce1.gif');
                        background-repeat: no-repeat" height="648" width="792" border="5">

Si tu as un outil de dessin numérique tu peux créer des formes à ton goût
et ainsi personnaliser tes pages.