 La
gestion des arrières plans
Imbrication
de tableaux
Exercice
pratique : Tableaux complexes ( imbrication
de tableaux ) |
 |
1.
Gestion des Arrières plans
- L'attribut BGCOLOR :
Comme son nom l'indique, cet attribut
permet de préciser une couleur
de remplissage à vos cellules.
On peut l'utiliser à l'intérieur
des balises <TABLE>, <TD>
ou <TH>.
Exemple : |
| |
| Cellule
1(BGCOLOR="yellow") |
Cellule
2 (BGCOLOR="blue") |
| Cellule
3 (BGCOLOR="pink") |
Cellule
4 (BGCOLOR="maroon") |
- L'attribut BACKGROUND :
Permet de spécifier l'URL de l'image
à afficher comme image d'arrière
plan du tableau.
Cette fonctionnalité n'est disponible
que pour Internet Explorer, mais des astuces
existent pour la compatibilité
avec Netscape.
Principe : Les dimensions
( largeur et hauteur ) de l'image que
vous insérez dans la balise <TABLE>
doivent correspondre exactement aux dimensions
de votre tableau.
Par contre, seul IE est capable d'interpréter
cet attribut dans la balise <TABLE>.
Exemple :
Voici une image "fond_star.jpg"
dont la largeur est de 416px et la hauteur
de 253px.
Pour insérer cette image à
l'intérieur de mon tableau, je
crée un tableau de largeur 416px
et de hauteur 253.
|
| |
 |
| |
|
|
L'effet visuel obtenu est intéressant
d'autant bien sûr que l'on peut insérer
par dessus ce fond du texte ou des images
( au format transparent gif par exemple
).
Ici, j'ai volontairement laissé une
bordure d'épaisseur 1 pour mieux visualiser
les différentes cellules; en enlevant
cette bordure, l'effet est encore plus esthétique!
Chaque cellule du tableau reprend une partie
de l'image du fond qui couvre tout le tableau.
Malheureusement, sur Netscape, c'est un vrai
cauchemard !!
Pour réaliser cet effet sur Netscape,
on doit découper l'image de fond en
autant de morceaux qu'il existe de cellules!
Pour cela, il faut découper l'image
sous Fireworks ou Photoshop.
L'autre solution consiste a abandonné
définitivement Netscape et à
utiliser IE -:(( |
En découpant une image afin de la placer
dans une cellule, vous aurez la compatibilité
avec Netscape mais vous devez faire attention
à la taille de votre image.
Si celle-ci est plus petite que la taille
de votre cellule, l'image sera répétée
avec un effet assez désastreux !!
Exemple : |
|
Dans cet exemple, j'ai découpé
une partie du fond pour en faire un fichier
gif; comme ma cellule est plus grande que
mon image, celle-ci est répétée
sur toute la cellule.
Il faut donner une largeur et une hauteur
en pixel à vos cellules équivalentes
aux dimensions de vos images de fond. |
| |
|
| |
Exercice
Pratique :
Le but de cet exercice est de comprendre comment
parvenir à réaliser un tableau
avec une bordure extensible, c'est à
dire qui s'adapte à son contenu que
se soit en largeur ou en hauteur.
Voila le résultat :
|
 |
 |
 |
 |
|
L'avantage principal de ce type
de tableau réside dans le fait que
les 4 bordures vont s'adapter au contenu
.
Les bordures sont extensibles
mais les images que vous utilisez
pour ces bordures sont très
légères en terme d'octets. |
|
|
 |
|
 |
Voir
le code HTML
|
La structure
du tableau est composée de 3
lignes et de 3 colonnes comme on peut
le voir facilement avec les bordures volontairement
maintenues à une épaisseur de
1 pixel.
Nous avons vu plus haut qu' une image de fond
de cellule était répétée
si sa taille était inférieur
à celle de la cellule où elle
se trouve.
Exple : si je prend cette image
et que je l'insère dans la cellule,
elle est répétée dans
toute la cellule.
|
| |
Si vous utilisez Netscape comme navigateur,
celui-ci ne gère pas les images en
fond de cellule.
L'astuce pour rendre compatible cette technique
avec Netscape consiste à intégrer
des petites images transparentes au niveau
des cellules, peu importe la taille de l'image
transparente.
Dans le tableau du dessus, j'ai placé
une image de 30 px de hauteur sur 1 pixel
de largeur dans une cellule qui a une largeur
de 237 px et une hauteur de 30 px.
Cela revient à dire que l'image de
fond a été répétée
237 fois pour former une bordure en haut du
tableau qui s'adaptera qu'elle que soit la
largeur du tableau.
La même opération a été
réalisée sur les bords gauches,
droits et bas.
Par contre les 4 coins du tableau correspondent
à 4 images fixes.
Vous retrouverez un tutorial beaucoups plus
détaillé dans la catégorie
"tutoriaux". |
| |
|
| |
|
2.
Imbrication de tableaux
Afin de monter des pages plus complexes,
il est parfois nécessaire d'imbriquer
des tableaux les uns dans les autres.
Le principe consiste à insérer
un tableau à l'intérieur d'une
cellule d'un premier tableau et ainsi de
suite.
Lorsqu'on souhaite atteindre une mise en
forme rigoureuse, au pixel près,
il est nécessaire d'utiliser cette
technique.
Si on reprend le tableau du dessus, on peut
insérer un tableau dans la cellule
centrale, ce qui permet d'aligner les données
de manière plus aisée.
|
|
Dans cet exemple, Nous avons 3 tableaux imbriqués
les uns dans les autres.
Il ne faut toutefois pas abuser de cette technique
car Netscape commence à paniquer au
dela de 3 imbrications de tableaux !!
Avec IE, pas de problèmes.
Observons le
code HTML plus en détail: |
| |
|
| |
3.
Exercice pratique sur les imbrications de
tableaux
|
| |
|
|
|
