Accueil Recherche | Plan Technique | Liens | Actualités | Formation | Emploi | Forums | Base
dossier cerig.efpg.inpg.fr 
Vous êtes ici : Accueil > La technique > Internet et le Web > Les feuilles de style > Les tableaux           Révision : 16 avril 2004
Page précédente Les feuilles de style Page suivante
Page précédente   Page suivante  
Jean-Claude SOHM - CERIG / EFPG
(19 mars 2004)

IX - Les tableaux

IX-1- Introduction : rappels de HTML

Dans un langage de description de page, un tableau peut être décrit ligne par ligne ou colonne par colonne. C'est la première méthode -- ligne par ligne -- qui a prévalu lors de la création du HTML.

Dans ce langage, un tableau est créé grâce à la balise TABLE. Chaque ligne est introduite grâce à la balise TR, puis elle est décrite cellule par cellule grâce aux balises TH (pour les cellules d'en-tête) et TD (pour les autres cellules). La balise CAPTION (facultative), que l'on place directement sous la balise TABLE, permet de saisir la légende du tableau.

Cette façon de procéder, qui privilégie la description par ligne, n'est pas toujours commode à utiliser. Il est en effet des cas où il est utile de préciser les propriétés d'une colonne donnée (largeur, couleur de fond, typographie, alignement, etc). Pour ce faire, la version 4 du HTML a introduit les balises COL et COLGROUP ; l'attribut SPAN (à ne pas confondre avec la balise du même nom) permet de préciser le nombre de colonnes concernées. La balise COLGROUP (facultative) est placée directement sous la balise CAPTION.

Dans l'exemple suivant, nous avons déclaré la largeur relative et la couleur de fond de chacune des quatre colonnes d'un tableau :

<colgroup>
<col span="1" width="20%" bgcolor="#EBFFC8">
<col span="2" width="25%" bgcolor="#FFCD82">
<col span="1" width="30%" bgcolor="#FF8C50">
</colgroup>

D'autres balises (facultatives) permettent de découper horizontalement un tableau en trois parties pour en déclarer séparément les propriétés : THEAD pour l'en-tête (ex : la ligne sur laquelle sont précisés les noms des colonnes), TBODY pour le corps du tableau, et TFOOT pour le pied de tableau (ex : la ligne sur laquelle figurent les totaux dans un tableau de chiffres). La balise THEAD se place directement sous la balise fermante de COLGROUP. Certains auteurs recommandent de placer le pied du tableau avant le corps. On notera qu'un tableau peut contenir plusieurs corps.

L'exemple ci-dessous représente un tableau à deux colonnes doté d'une légende, d'un en-tête, d'un corps et d'un pied (l'attribut SPAN peut être omis lorsque sa valeur est égale à un) :

<table>
<caption>La légende du tableau</caption>
<colgroup>
<col width="40%">
<col width="60%">
</colgroup>
<thead>
<tr><th>Cellule d'en-tête 1</th><th>Cellule d'en-tête 2</th></tr>
</thead>
<tbody>
<tr><td>Cellule de corps 1</td><td>Cellule de corps 2</td></tr>
</tbody>
<tfoot>
<tr><td>Cellule de pied 1</td><td>Cellule de pied 2</td></tr>
</tfoot>
</table>

En résumé :

 

IX-2- Les problème spécifiques des tableaux

Dans les feuilles de style, l'héritage est basé sur une représentation en arbre de la page web. Cette représentation ne s'applique pas aux tableaux, à cause de la double hiérarchie que nous venons de mentionner. A cette difficulté s'ajoute le fait que les navigateurs ne respectent pas toujours les recommandations du W3C. La prudence consiste à adopter une programmation du style d'un tableau qui ne compte pas trop sur l'héritage pour fonctionner correctement, et à vérifier que les deux principaux navigateurs obéissent effectivement sur les deux principales plates-formes -- tout en vouant aux gémonies leurs éditeurs.

D'abord, l'héritage fonctionne mal entre la boîte qui contient le tableau et les cellules de ce dernier. Par exemple, si le style du conteneur mentionne une police Courier de corps 16, le texte contenu dans les cellules du tableau est affiché en Courier, certes, mais de corps 12 (la valeur par défaut).

Ensuite, l'héritage fonctionne mal à l'intérieur de la boîte. Par exemple, si le style de la balise TABLE mentionne une police Georgia de corps 10, la légende (balise CAPTION) hérite de ces deux valeurs dans IE, mais pas de la taille dans NS.

On notera que, si toutes les balises relatives aux tableaux sont susceptibles de recevoir un style, n'importe quelle balise ne peut pas recevoir n'importe quel style, ni servir de support à une boîte. Par exemple, seules les balises TABLE, TD et TH peuvent être dotées des propriétés caractéristiques des boîtes (cadre, marges, dimensions, couleur et image de fond),  avec cependant plusieurs restriction :

Le tableau ci-dessous résume grosso modo la situation :

Balise HTML Boîte Fond Typo-
graphie
Aligne-
ment
Cadre Marges
externes
Marges
internes
Largeur Hauteur
TABLE Oui Oui Oui Oui Oui Oui Oui
CAPTION Oui Ne pas
utiliser
Oui Ne pas
utiliser
Oui Oui Oui Oui
COLGROUP Pas NS Oui Pas NS Oui Pas NS
COL Pas NS Oui Pas NS Oui Pas NS
THEAD, TBODY, TFOOT Oui Oui Oui
TR Oui Oui Oui Oui*
TH, TD Oui Oui Oui Oui Oui Oui Oui
* l'alignement horizontal ne fonctionne pas avec NS

Dans les paragraphes qui suivent, nous examinerons en détail le fonctionnement de chaque balise.

 

IX-3- Le tableau (TABLE)

La balise TABLE définit une boîte de type "bloc". En l'absence de précisions concernant les dimensions de la boîte, les navigateurs adaptent la taille du tableau à son contenu, en largeur comme en hauteur. Quand elles sont mentionnées, les propriétés de largeur de de hauteur fonctionnent normalement. Elles concernent le tableau cadre compris, marges externes exclues, dans IE comme dans NS (sur PC).

Dans le style de la balise TABLE, il est d'usage de regrouper tout ce qui concerne le tableau dans son ensemble. Mais dès que l'on passe à la pratique, les défaillances des navigateurs se font immédiatement sentir. C'est ainsi que, sur plusieurs points, il faut continuer à recourir aux bonnes vieilles méthodes du HTML pour obtenir l'affichage désiré :

Ces problèmes réglés, les propriétés des boîtes s'appliquent à la balise TABLE, comme le montre l'exemple suivant. Il s'agit d'un tableau à une seule cellule, placé entre deux lignes noires pour mettre en évidence les marges externes haute et basse :

<div><img border="0" src="images/noir.gif" width="100%" height="1"></div>
<center>
<table cellspacing="4" style="margin: 10px; border: thick outset silver; background-image: url('images/decor-dendrite.jpg'); width: 450px; height: 150px; font-family:Comic Sans MS; font-size: 4em; color: #0000AA; text-align: center ">
<tr>
<td align="center">Tableau CSS</td>
</tr>
</table>
</center>
<div><img border="0" src="images/noir.gif" width="100%" height="1"></div>

Ce code s'affiche de la manière suivante :

 
Tableau CSS
 

Compte tenu des précautions que nous avons prises, l'affichage est le même dans les deux navigateurs et sur les deux plates-formes, à l'exception des couleurs du cadre, qui sont nettement plus foncées dans IE que dans NS.

La balise TABLE peut de plus être dotée de plusieurs propriétés qui lui sont spécifiques :

Fusion de cadres. Lorsque l'attribut BORDER-SPACING prend la valeur zéro, les cadres des cellules et celui du tableau viennent au contact. La propriété BORDER-COLLAPSE permet d'aller plus loin dans cette voie :

Dans l'exemple représenté ci-dessous, les cadres des cellules entrent en conflit avec celui du tableau :

<table cellspacing="4" style="border: 4px solid blue; border-collapse: separate; width: 200px">
<tr style="text-align: center">
<td style="border: 3px double aqua">"separate"</td>
<td style="border: 5px double aqua">"separate"</td>
</tr>
</table>
<div>&nbsp;</div>
<table style="border: 4px solid blue; border-collapse: collapse; width: 200px">
<tr style="text-align: center">
<td style="border: 3px double aqua">"collapse"</td>
<td style="border: 5px double aqua">"collapse"</td>
</tr>
</table>

Voici ce que l'on obtient sur PC avec les deux navigateurs :

 
     
 
     
 
     
 
IE6/PC NS7/PC

Le navigateur de Netscape applique la première règle de résolution des conflits, règle qui stipule que le cadre le plus large écrase l'autre. Le navigateur de Microsoft applique sa propre règle, qui veut que le cadre du tableau l'emporte sur ceux des cellules. Il faut donc être très prudent dans l'utilisation de la fusion des cadres, pour éviter que les deux navigateurs n'affichent des résultats très différents.

Cellules vides. La propriété EMPTY-CELLS permet de cacher les cellules sans contenu (attention : l'espace insécable, généreusement distribué dans les cellules des tableaux par l'éditeur de pages Web FrontPage, constitue un contenu). Le code ci-dessous définit un tableau à deux cellules pourvues d'un cadre et d'une couleur de fond ; la cellule de droite est vide.

<table cellspacing="2" style="border: ridge 4px fuchsia; empty-cells: hide; background-color: #EEEEEE">
<tr>
<td style="border: solid 2px purple; background-color: yellow; width: 80%">cette cellule (80 %) est vue,<br>sa voisine (20 %) est cachée</td>
<td style="border: solid 2px purple; background-color: yellow; width: 20%"></td>
</tr>
</table>

La figure ci-dessous montre (sur PC) que IE masque le cadre mais laisse la couleur du fond de la cellule, alors que NS masque tout et laisse apparaître la couleur de fond de tableau.

 
     
 
     
 
      
 
IE6/PC NS7/PC

Centrage : le centrage préconisé par le W3C (lequel consiste à donner la valeur "auto" aux marges externes gauche et droite) ne fonctionne pas dans Internet Explorer. Il faut donc recourir aux méthodes traditionnelles du HTML (la balise CENTER, ou la balise DIV avec l'attribut align="center") pour centrer un tableau dans son conteneur.

Remarque : l'attribut CELLPADDING du HTML, qui définit la marge interne des cellules, n'a pas son équivalent en feuille de style. On continue donc à l'utiliser chaque fois que toutes les cellules possèdent la même marge interne. La solution CSS équivalente consisterait à créer le style correspondant, puis à l'appliquer à chaque cellule du tableau, ce qui serait beaucoup plus lourd.

 

IX-4- La légende (CAPTION)

La recommandation CSS2 du W3C prévoit de pouvoir placer la légende sur l'un des quatre côté du tableau. Mais la propriété correspondante n'est pas implémentée dans les navigateurs IE et NS. On en reste donc au bon vieux HTML, qui place la légende au-dessus du tableau (dans IE on peut placer la légende en dessous du tableau, mais pas dans NS). Sinon, on utilise un tableau invisible pour placer la légende là où l'on veut la voir.

Comme nous l'avons déjà signalé plus haut, les propriétés de texte de la légende sont héritées de celle du tableau, mais ce processus fonctionne mal dans le navigateur de Netscape. Il est donc prudent de doter la balise CAPTION de son propre style.

Le code suivant :

<div><img border="0" src="../images/noir.gif" width="100%" height="1"></div>
<table cellspacing="5" style="width: 300px; border: thin solid black; margin: 10px">
<caption style="border: dotted 3px blue; height: 30px; text-align: left; vertical-align: middle; color: #AA0000; background-color: #EEEEEE; margin: 20px; padding: 5px; font-weight: bold ">Légende de la table</caption>
<tr>
<td style="background-color: yellow; text-align: center">première cellule</td>
<td style="background-color: yellow; text-align: center">deuxième cellule</td>
</tr>
</table>
<div><img border="0" src="../images/noir.gif" width="100%" height="1"></div>

s'affiche de manière assez différente dans les deux navigateurs, comme le montre la figure ci-dessous.

 
     
 
IE6/PC
 
     
 
NS7/PC

Pour que les deux navigateurs affichent la légende de manière semblable, il faut exclure les marges externes de la légende, ainsi que la marge externe supérieure du tableau.

 

IX-5- Le groupe de colonnes (COL et COLGROUP)

La recommandation CSS2 prévoit que l'on peut fixer, via la balise COL, quatre propriétés des cellules d'une même colonne. Voici les résultats que l'on obtient en pratique sur PC :

Conclusion : si l'on respecte les internautes qui utilisent encore NS, on ne fait rien de plus avec les feuilles de style qu'avec le HTML, c'est à dire régler la largeur et la typographie des cellules d'une même colonne.

 

IX-6- Le groupe de lignes (THEAD, TBODY et TFOOT)

On peut attribuer un style aux balises qui définissent des groupes de lignes dans un tableau : THEAD, TBODY et TFOOT. Ce style permet de préciser les propriétés suivantes : la couleur et l'image de fond, l'alignement du texte, la typographie. Il est sans action sur le cadre, les marges internes et les dimensions.

A titre d'exemple, le code suivant :

<table cellspacing="6" style="border: 4px dotted blue; width: 300px">
<thead style="background-color: yellow; text-align: center; font-family: georgia; font-size: 14pt">
<tr><td>En-tête (centré)</td></tr>
</thead>
<tbody style="background-color: silver; text-align: right; font-family: Haettenschweiler; font-size: 11pt">
<tr><td>Corps (alignement à droite)</td></tr>
</tbody>
<tfoot style=" text-align: justify; background-image: url('../images/decor-dendrite.jpg')">
<tr><td>Le pied du tableau contient une phrase assez longue pour forcer le retour à la ligne (texte justifié).</td></tr>
</tfoot>
</table>

s'affiche comme montré ci-dessous (la police Arial dans le pied de tableau est héritée de la présente page Web) :

 
En-tête (centré)
Corps (alignement à droite)
Le pied du tableau contient une phrase assez longue pour forcer le retour à la ligne (texte justifié).
 

On notera qu'en l'absence d'un style qui leur soit spécifique, les cellules n'ont pas de cadre.

 

IX-7- La ligne (TR)

En HTML, la balise TR définit une ligne. Elle peut en outre servir à préciser, pour toutes les cellules de la ligne :

Les styles permettent de rajouter l'image de fond et la typographie à cette liste. L'exemple suivant illustre ces propriétés.

<table cellspacing="04" border="2" bgcolor="#DDDDDD" cellpadding="5" width="200">
<tr style="background-color: yellow; text-align= center; vertical-align: top; height: 40px; font-family: Comic Sans MS; font-size: 9pt">
<td>cellule 1</td>
<td>cellule 2</td>
</tr>
</table>

Sur PC, dans les deux navigateurs, ce code s'affiche comme le montre la figure ci-dessous. Nous voyons que le positionnement horizontal ne fonctionne pas dans NS :

 
     
 
     
 
      
 
IE6/PC NS7/PC

IX-8- La cellule (TH et TD)

Les balises TH et TD définissent toutes les deux une cellule de tableau, à cette différence près que TH centre le texte horizontalement et l'écrit en caractères gras -- sauf spécification contraire via un style.

Ces deux balises permettent de créer des boîtes dotées de toutes les propriétés, à l'exception de la marge externe, comme illustré par l'exemple suivant (code et affichage).

<table cellspacing="5" style="border: ridge thick yellow; width: 300px">
<tr>
<td style="border: inset 2px yellow; background-color: #EBFFC8; padding: 4px; font-family: arial; font-size: 10pt; color: blue">En CSS :<br>- un tableau n'a pas de marge interne<br>-les cellules n'ont pas de marge externe</td>
</tr>
</table>
En CSS :
- un tableau n'a pas de marge interne
- les cellules n'ont pas de marge externe

IX-9- Conclusion

Une conclusion -- en forme de tableau, bien entendu -- avec un peu de fantaisie à propos du cadre et du fond.

Les feuilles de style ne révolutionnent pas les tableaux, mais elles permettent de les gérer de manière plus efficace et moins gourmande en octets. De plus, elles donnent au concepteur de site une liberté nettement plus grande pour la description des cellules.

Quelques insuffisances des feuilles de style, et quelques défaillances des navigateurs, font que l'usage de certains attributs du HTML reste quasi indispensable.

Page précédente Retour au sommaire Page suivante
Page précédente Retour au sommaire Page suivante
Accueil | Technique | Liens | Actualités | Formation | Emploi | Forums | Base  
Copyright © CERIG/EFPG 1996-2004
Mise en page : J.C. Sohm