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

HTML 4

  Couleurs de bordures (bordercolor...)

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

  Fonction
Par définition, un tableau est un groupe de cellules organisées en lignes et en colonne.
Chaque tableau dispose d'une bordure l'entourant, et vous pouvez régler la couleur de cette bordure. Vous pouvez également en changer la taille (voir Largeur des bordures).
Cependant, il n'est possible de changer la couleur de la bordure que si celle-ci a une taille supérieure à 0.
  Principe
Contrairement à la taille de la bordure qui est unique, c'est à dire qu'elle s'applique à la totalité du tableau, la couleur des bordures s'indique suivant les besoins dans les balises <table...>, <tr> ou <td>.
Pour la déclarer, il faut utiliser l'attribut border et lui indiquer une valeur en pixel. Cette valeur doit obligatoirement être positive et entière (ni -2 ni 45,7).

Trois attributs déterminent la couleur de la bordure :
  • bordercolor : détermine la couleur générale de la bordure,
  • bordercolorlight : détermine la couleur de la partie claire de la bordure (Internet Explorer uniquement)
  • bordercolordark : détermine la couleur de la partie sombre de la bordure (Internet Explorer uniquement).

    Attention : Netscape ne supporte que l'attribut bordercolor et uniquement dans la balise <table...>

    A noter qu'il est possible, par l'utilisation de feuilles de style de modifier le type de trait des bordures ainsi que leurs couleurs.
  •   La méthode
    Exemple 1
    <table cellspacing="0" cellpadding="0" border="5" bordercolor="#0066CC">
    <tr>
    <td><img src="logo.gif"></td>
    </tr>
    </table>

    Exemple 2 (Internet Explorer uniquement)
    <table cellspacing="0" cellpadding="0" border="5" bordercolorlight="#0066CC" bordercolordark="#CC0000">
    <tr>
    <td><img src="logo.gif"></td>
    </tr>
    </table>

    Exemple 3 (Internet Explorer uniquement)
    <table cellspacing="5" cellpadding="0" border="5">
    <tr bordercolorlight="#0066CC" bordercolordark="#CC0000">
    <td><img src="decoupe_logo1.gif"></td>
    <td><img src="decoupe_logo2.gif"></td>
    </tr>
    <tr>
    <td><img src="decoupe_logo3.gif"></td>
    <td><img src="decoupe_logo4.gif"></td>
    </tr>
    </table>

    Exemple 4 (Internet Explorer uniquement)
    <table cellspacing="5" cellpadding="0" border="5">
    <tr>
    <td bordercolorlight="#0066CC" bordercolordark="#CC0000"><img src="decoupe_logo1.gif"></td>
    <td><img src="decoupe_logo2.gif"></td>
    </tr>
    <tr>
    <td><img src="decoupe_logo3.gif"></td>
    <td bordercolorlight="#0066CC" bordercolordark="#CC0000"><img src="decoupe_logo4.gif"></td>
    </tr>
    </table>
      Démonstration


    Exemple 1
    bordercolor='#0066CC'


    Exemple 2
    bordercolorlight='#0066CC' bordercolordark='#CC0000'
    Exemple 3
    bordercolorlight='#0066CC' et bordercolordark='#CC0000' dans la balise <tr> bordercolorlight='#0066CC' et bordercolordark='#CC0000' dans la balise <tr>
    aucune couleur declaree aucune couleur declaree
    Exemple 4
    bordercolorlight='#0066CC' et bordercolordark='#CC0000' dans la balise <td> aucune couleur declaree
    aucune couleur declaree bordercolorlight='#0066CC' et bordercolordark='#CC0000' dans la balise <td>

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

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