Colorer vos tableaux en CSS avec bordure

Attention, ce tutoriel n’est plus à jour. Le CSS et surtout le support des navigateurs ont beaucoup évolué depuis 15 ans. Voir le tutoriel « Styliser vos tabelaux HTML ».

· 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

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>

<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>

<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>