Trucsweb.com

CSS

Colorer vos tableaux en CSS avec bordure

RDFFav

Colorer vos tableaux en CSS avec bordure - Compatible avec la plupart des navigateurs

Colorer un tableau et surtout mettre une bordure ou des lignes de séparation entre les lignes et les colonnes n’est pas très compatible. La bordure HTML est différente entre Internet Explorer et Netscape et ce dernier ne gère pas bien les couleurs de tableau. Avec une feuille de style (CSS) vous pouvez régler ce problème une fois pour toutes.couleur fond tableaux table CSS bordure séparateur feuille de styles cascading sheets compatible lignes colonnes cellule bloc police alignement font-size font-family color text-align background-color td tr width class caption thead tbody line-height

  • · Niveau : INTERMÉDIAIRE
  • · Compatibilité : IE 4.0+ / NS 4.0+ / Opera 4.0+

Colorer un tableau et surtout mettre une bordure ou des lignes de séparation entre les lignes et les colonnes n’est pas très compatible. La bordure HTML est différente entre Internet Explorer et Netscape et ce dernier ne gère pas bien les couleurs de tableau. Avec une feuille de style (CSS) vous pouvez régler ce problème une fois pour toutes.

Deux tables HTML pour faire un tableau
La technique consiste à faire une table qui contient une autre table où chaque cellule aura son propre style. La première table n’a qu’une ligne et une colonne. La couleur spécifiée par le style de cette cellule servira de séparateur entre les cellules de la seconde table. Cette dernière table aura plusieurs styles, soit; Le titre du tableau, les en-têtes de chaque cellule et les styles des cellules. Dans mon exemple j’utilise deux couleurs de cellule.

Spécifier la couleur mais aussi le style du contenu
Ce qu’il y a de formidable avec le CSS c’est qu’un style peut s’appliquer à un "bloc", en d’autres mots, vous pouvez spécifier non seulement la couleur de la cellule mais aussi le style complet du contenu d’une cellule. Par exemple: la police de caractères, grosseur, couleur ou son alignement etc.

 

Exemple de style pour une cellule

<style>
.table-ligne1-centre {
   font-size : 12px;
   font-family : Verdana, arial, helvetica, sans-serif;
   color : #333333;
   text-align : center;
   background-color : #c6c3bd;
}
</style>

Ici nous avons déterminé la couleur de la cellule " background-color " mais aussi la police de caractères, la couleur du texte et l’alignement du contenu de la cellule. Ce style se nomme: .table-ligne1-centre (attention de ne pas utiliser le symbole "souligné" _ qui fait planter Netscape). Chaque cellule aura son propre style, il suffit de spécifier à chaque cellule le style qui lui est propre comme l’exemple suivant.

<td width="100" class="table-ligne1-centre" valign="top">Contenu</td>

Noter que la référence au style n’inclut pas le point (.) devant le nom. Bien qu’avec Internet Explorer vous pouvez spécifier le style d’une ligne sans devoir le refaire à chaque cellule, je préconise de le faire à chaque cellule pour que Netscape interprète bien le CSS.

 

Exemple de tableau avec titre, en-têtes et un style de cellule

Une couleur (caption)
colonne 1 colonne 2 colonne 3 colonne 4
ligne 1 ligne 1 ligne 1 Droite
ligne 1 ligne 1 ligne 1 Droite
ligne 1 ligne 1 ligne 1 Droite
ligne 1 ligne 1 ligne 1 Droite

Exemple de tableau avec cette fois deux styles de cellule

Deux couleurs (caption)
colonne 1 colonne 2 colonne 3 colonne 4
ligne 1 centré ligne 1 ligne 1
ligne 2 centré ligne 2 ligne 2
ligne 1 centré ligne 1 ligne 1
ligne 2 centré ligne 2 ligne 2

Ces deux exemples de tableau ont été testé avec succès avec plusieurs navigateurs et plate-forme.

  • Windows 98/NT/2000
    Netscape communicator 4.0+, Internet Explorer 4.0+, Opera 4.0+
  • Macintosh 68k/PPC/G3/G4
    Netscape communicator 4.0+, Internet Explorer 4.0+, Opera 4.0+
  • Linux
    Netscape 4.7+

Elles devraient aussi être compatibles avec webTV et AOL.

NOTE L’utilisation de la balise <caption> avec Netscape fait en sorte que la couleur CSS de fond de la ligne "caption" se retrouve uniquement sous le titre. Remplacer la balise <caption> par une ligne normale (TR/TD) pour régler ce petit problème. Le code complet ci-dessous n’utilise d’ailleurs pas les balises <caption>, <thead> et <tbody>. ATTENTION: l’utilisation de la propriété "line-height" est très mal géré par Internet Explorer sous Macintosh, à utiliser avec une extrême précaution!

 

Code complet avec CSS et table HTML

<html><head>
<style type="text/css">
/* Style des lignes de séparation */
.table-separateur {
  font-size : 12px;
  font-family : Verdana, arial, helvetica, sans-serif;
  color : #333333;
  background-color : #d6d3ce;
}

/* Style du titre du tableau */
.table-titre {
   font-size : 12px;
   font-family : Verdana, arial, helvetica, sans-serif;
  color : #eeeeee;
  text-align : center;
  font-weight : bold;
  background-color : #666666;
}

/* Style des en-têtes du tableau */
.table-entete {
  font-size : 12px;
  font-family : Verdana, arial, helvetica, sans-serif;
  color : #333333;
  background-color : #a7ada7;
}

/* Style des en-têtes du tableau (centré) */
.table-entete-centre {
  font-size : 12px;
   font-family : Verdana, arial, helvetica, sans-serif;
   color : #333333;
   text-align : center;
  background-color : #a7ada7;
}

/* Style des en-têtes du tableau (droite) */
.table-entete-droit {
  font-size : 12px;
   font-family : Verdana, arial, helvetica, sans-serif;
   color : #333333;
  text-align : right;
  background-color : #a7ada7;
}

/* Style 1 des cellules */
.table-ligne1 {
  font-size : 12px;
  font-family : Verdana, arial, helvetica, sans-serif;
  color : #333333;
  background-color : #c6c3bd;
}

/* Style 2 des cellules */
.table-ligne2 {
  font-size : 12px;
  font-family : Verdana, arial, helvetica, sans-serif;
  color : #333333;
  background-color : #cccccc;
}

/* Style 1 des cellules (centré) */
.table-ligne1-centre {
  font-size : 12px;
   font-family : Verdana, arial, helvetica, sans-serif;
  color : #333333;
  text-align : center;
  background-color : #c6c3bd;
}

/* Style 2 des cellules (centré) */
.table-ligne2-centre {
  font-size : 12px;
  font-family : Verdana, arial, helvetica, sans-serif;
  color : #333333;
  text-align : center;
  background-color : #cccccc;
}

/* Style 1 des cellules (droite) */
.table-ligne1-droit {
  font-size : 12px;
  font-family : Verdana, arial, helvetica, sans-serif;
  color : #333333;
  text-align : right;
  background-color : #c6c3bd;
}

/* Style 2 des cellules (droite) */
.table-ligne2-droit {
  font-size : 12px;
  font-family : Verdana, arial, helvetica, sans-serif;
  color : #333333;
  text-align : right;
  background-color : #cccccc;
}
</style>
</head>

<body>
<!-- Premier tableau -->
<table width="400" border="0" cellspacing="0" cellpadding="0"><tr><td class="table-separateur">

<table width="100%" border="0" cellspacing="1" cellpadding="2">
<tr><td class="table-titre" colspan="4">Titre</td></tr>
<tr>
  <td width="100" class="table-entete">colonne 1</td>
  <td width="100" class="table-entete-centre">colonne 2</td>
  <td width="100" class="table-entete">colonne 3</td>
  <td width="100" class="table-entete">colonne 4</td>
</tr>
<tr>
  <td width="100" class="table-ligne1">ligne 1</td>
  <td width="100" class="table-ligne1-centre">centré</td>
  <td width="100" class="table-ligne1">ligne 1</td>
  <td width="100" class="table-ligne1">ligne 1</td>
</tr>
<tr>
  <td width="100" class="table-ligne2">ligne 2</td>
  <td width="100" class="table-ligne2-centre">centré</td>
  <td width="100" class="table-ligne2">ligne 2</td>
  <td width="100" class="table-ligne2">ligne 2</td>
</tr>
<tr>
  <td width="100" class="table-ligne1">ligne 1</td>
  <td width="100" class="table-ligne1-centre">centré</td>
  <td width="100" class="table-ligne1">ligne 1</td>
  <td width="100" class="table-ligne1">ligne 1</td>
</tr>
<tr>
  <td width="100" class="table-ligne2">ligne 2</td>
  <td width="100" class="table-ligne2-centre">centré</td>
  <td width="100" class="table-ligne2">ligne 2</td>
  <td width="100" class="table-ligne2">ligne 2</td>
</tr>
</table>

</td></tr></table>
<!-- Deuxième tableau -->
<table width="400" border="0" cellspacing="0" cellpadding="0"><tr><td class="table-separateur">

<table width="100%" border="0" cellspacing="1" cellpadding="2">
<tr><td class="table-titre" colspan="4">Titre</td></tr>
<tr>
  <td width="100" class="table-entete">colonne 1</td>
  <td width="100" class="table-entete">colonne 2</td>
  <td width="100" class="table-entete">colonne 3</td>
  <td width="100" class="table-entete-droit">colonne 4</td>
</tr>
<tr>
  <td width="100" class="table-ligne1">ligne 1</td>
  <td width="100" class="table-ligne1">ligne 1</td>
  <td width="100" class="table-ligne1">ligne 1</td>
  <td width="100" class="table-ligne1-droit">Droite</td>
</tr>
<tr>
  <td width="100" class="table-ligne1">ligne 1</td>
  <td width="100" class="table-ligne1">ligne 1</td>
  <td width="100" class="table-ligne1">ligne 1</td>
  <td width="100" class="table-ligne1-droit">Droite</td>
</tr>
<tr>
  <td width="100" class="table-ligne1">ligne 1</td>
  <td width="100" class="table-ligne1">ligne 1</td>
  <td width="100" class="table-ligne1">ligne 1</td>
  <td width="100" class="table-ligne1-droit">Droite</td>
</tr>
<tr>
  <td width="100" class="table-ligne1">ligne 1</td>
  <td width="100" class="table-ligne1">ligne 1</td>
  <td width="100" class="table-ligne1">ligne 1</td>
  <td width="100" class="table-ligne1-droit">Droite</td>
</tr>
</table>

</td></tr></table>

Django (Oznog) Blais
Dernière mise à jour :

Commentaires

       Visites : 18978 - Pages vues : 48678
X

Trucsweb.com Connexion

Connexion

X

Trucsweb.com Mot de passe perdu

Connexion

X

Trucsweb.com Conditions générales

Conditions

Responsabilité

La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

Droit applicable et juridiction compétente

Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

X

Trucsweb.com Trucsweb

X

Trucsweb.com Glossaire

X

Trucsweb.com Trucsweb

X

Trucsweb.com Trucsweb

Conditions

Aucun message!

Merci.

X
Aucun message!
X

Trucsweb.com Créer un compte

Créer un compte

.
@