Membre de ClickFR, Reseau francophone Paie-Par-Click
Accueil
Accueil
- [ CSS : ] [ DHTML : ] [ HTML : ] [ JavaScript : ] [ Refs : ]
Accueil

HTML 4

  Fonds de couleur ou par images (bgcolor et background)

fonction  principe  la methode  demonstration  Compatibilite du script... a partir de : 

  Fonction
Par définition, un tableau est transparent, cela signifie que le fond du tableau reprend le fond de la page où il se trouve.
Il est possible de déclarer une couleur ou une image soit au niveau du tableau lui-même, soit au niveau de chaque cellule du tableau.
  Principe
Il est possible de déclarer un fond de plusieurs façons, soit au niveau du tableau lui-même, soit au niveau des lignes, soit au niveau des cellules.
Les fonds d'un tableau peuvent être remplis de deux façons :
  1. par une couleur :
    • appliquée au tableau, une couleur se répètera dans toutes les cellules du tableau, laissant apparaître le contenu du tableau par dessus
    • appliquée à une ligne, une couleur apparaîtra dans toutes les cellules de la ligne. Il est donc possible de déclarer des couleurs différentes pour chaque ligne, laissant apparaître le contenu de chaque cellule de la ligne par dessus.
    • appliquée à une cellule, une couleur n'apparaîtra que dans cette cellule. Il est donc possible de déclarer des couleurs différentes pour chaque cellule, laissant apparaître le contenu de la cellule par dessus.
  2. par une image :
    • appliquée au tableau, une image de fond se répètera (mosaïque) sur toute la surface du tableau, laissant apparaître le contenu du tableau par dessus
    • appliquée à une ligne, une image de fond se répètera (mosaïque) dans toutes les cellules de la ligne où elle est placée, laissant apparaître le contenu des cellules de la ligne par dessus. (Netscape uniquement)
    • appliquée à une cellule, une image de fond ne se répètera (mosaïque) que dans la cellule où elle est placée, laissant apparaître le contenu de la cellule par dessus.
Lors de l'utilisation de tableaux imbriqués, une couleur ou une image déclarée dans le tableau de 'premier niveau' ou dans la ligne ou dans la cellule accueillant le deuxième tableau se répètera dans le deuxième tableau, pour la totalité de ses cellules.

Attention : dans le cas d'une image de fond, Netscape a la facheuse tendance de reprendre la répétition de l'image à son point de départ dans chaque cellule du tableau.
  La méthode
Exemple 1
<table cellspacing="0" cellpadding="0" border="1" bgcolor="#EEEEFF">
<tr>
<td>Contenu de la première cellule...</td>
</tr>
<tr>
<td>Contenu de la seconde cellule...</td>
</tr>
</table>

Exemple 2
<table cellspacing="0" cellpadding="0" border="1">
<tr bgcolor="#EEEEFF">
<td>Contenu de la première cellule...</td>
<td>Contenu de la seconde cellule...</td>
</tr>
<tr>
<td>Contenu de la troisième cellule...</td>
<td>Contenu de la quatrième cellule...</td>
</tr>
</table>

Exemple 3
<table cellspacing="0" cellpadding="0" border="1">
<tr>
<td bgcolor="#EEEEFF">Contenu de la première cellule...</td>
<td>Contenu de la seconde cellule...</td>
</tr>
<tr>
<td>Contenu de la troisième cellule...</td>
<td bgcolor="#FFEEFF">Contenu de la quatrième cellule...</td>
</tr>
</table>

Exemple 4
<table cellspacing="0" cellpadding="0" border="1" background="fond.gif">
<tr>
<td>Contenu de la première cellule...</td>
</tr>
<tr>
<td>Contenu de la seconde cellule...</td>
</tr>
</table>

Exemple 5 (Netscape uniquement)
<table cellspacing="0" cellpadding="0" border="1">
<tr background="fond.gif">
<td>Contenu de la première cellule...</td>
<td>Contenu de la seconde cellule...</td>
</tr>
<tr>
<td>Contenu de la troisième cellule...</td>
<td>Contenu de la quatrième cellule...</td>
</tr>
</table>

Exemple 6
<table cellspacing="0" cellpadding="0" border="1">
<tr>
<td background="fond.gif">Contenu de la première cellule...</td>
<td>Contenu de la seconde cellule...</td>
</tr>
<tr>
<td>Contenu de la troisième cellule...</td>
<td background="fond.gif">Contenu de la quatrième cellule...</td>
</tr>
</table>
  Démonstration

Exemple 1
Contenu de la première cellule...
Contenu de la seconde cellule...

Exemple 2
Contenu de la première cellule... Contenu de la seconde cellule...
Contenu de la troisième cellule... Contenu de la quatrième cellule...

Exemple 3
Contenu de la première cellule... Contenu de la seconde cellule...
Contenu de la troisième cellule... Contenu de la quatrième cellule...

Exemple 4
Contenu de la première cellule un peu augmenté
pour mieux
voir le fond
(surtout pour
Netscape)
Contenu de la
seconde
cellule

Exemple 5 (Netscape uniquement)
Contenu de la première cellule... Contenu de la seconde cellule...
Contenu de la troisième cellule... Contenu de la quatrième cellule...

Exemple 6
Contenu de la première cellule... Contenu de la seconde cellule...
Contenu de la troisième cellule... Contenu de la quatrième cellule...

Recherche
aide sur la recherche
hit-parade
Votez TOP Ouaibe !

statistiques
aide sur les contacts aide sur la mailing-list aide sur la newsletter