Pièges en HTML

Quelques pièges en HTML 3.2

dernière mise à jour : 24 février 2000 — sommaire général

Bien que le HTML 3.2 ait été spécifié en long, en large, et en travers par le W3C, les navigateurs l'ont parfois implémenté un peu légèrement.

Nous ne parlerons même pas ici du JavaScript, nid de bugs cosmétiques et de lenteur (voir quelques considérations générales), mais simplement des problèmes que l'on peut rencontrer avec les tables du HTML 3.2 conforme. Et le bilan est déjà lourd !

Les tests suivants ont été réalisés sur Mac, avec les navigateurs MSIE = Microsoft Internet Explorer 4.01, iCab =iCab 1.9, et NC = Netscape Communicator 4.5.

1. Le tag <TABLE>

C'est par lui que les bugs arrivent.

2. Espaces indésirables

les spécifications du HTML précisent bien que les espaces après <TD> et avant </TD> ne doivent pas être prises en compte dans le fichier source. Netscape s'en contrefiche, et affiche l'espace qu'on a éventuellement laissée avant </TD>.

Pour éviter qu'une image, par exemple, soit décalée avec Netscape, il faudra penser à enlever cette espace.
Note : RAW HTWL supprime automatiquement ce genre d'espaces.

MSIE 4.01 et iCab 1.9

NC 4.5

3. Paramètre BGCOLOR

le paramètre BGCOLOR dans le tag <TABLE> est répercuté sur tout le tableau, CELLSPACING inclus, sauf dans Netscape, qui laisse l'espace entre cellules transparent, ainsi que les cellules vides.
le paramètre BGCOLOR dans le tag <TR> est répercuté dans chaque cellule, sauf dans Netscape et Internet Explorer quand la cellule est vide (cellule 4 de l'exemple ci-dessous).
le paramètre BGCOLOR dans le tag <TD> est appliqué à la cellule, sauf dans Netscape et Internet Explorer quand celle-ci est vide (cellule 6 de l'exemple ci-dessous).

iCab 1.9

MSIE 4.0.1

NC 4.5

4. Paramètres WIDTH et CELLPADDING

le paramètre WIDTH dans le tag <TD> est répercuté sur toute la cellule, CELLPADDING inclus, sauf dans Netscape.

MSIE 4.01 et iCab 1.9

NC 4.5

160

160

160

200 = 160+2*20

heureusement, le paramètre WIDTH dans le tag <TABLE> force la largeur totale de la table, peu importe la valeur de WIDTH dans les tags <TD>.

5. Paramètre CELLSPACING

là c'est iCab qui arrondit le CELLSPACING au multiple de 2 supérieur.

iCab 1.9

MSIE 4.01 et NC 4.5

iCab 1.9

MSIE 4.01 et NC 4.5

6. Paramètres COLSPAN et ROWSPAN

les navigateurs paniquent totalement dès qu'il ont affaire à une mise en table inhabituelle.

<TABLE BORDER="0" BGCOLOR="#FFFF00" CELLSPACING="0" CELLPADDING="0"> <TR> <TD COLSPAN="2"><IMG SRC="2x1.gif"></TD> <TD><IMG SRC="1x1.gif"></TD> </TR> <TR> <TD><IMG SRC="1x1.gif"></TD> <TD><IMG SRC="1x1.gif"></TD> <TD><IMG SRC="1x1.gif"></TD> </TR> <TR> <TD><IMG SRC="1x1.gif"></TD> <TD><IMG SRC="1x1.gif"></TD> <TD><IMG SRC="1x1.gif"></TD> </TR> </TABLE>		MSIE 4.01, NC 4.5 et iCab 1.9

<TABLE BORDER="0" BGCOLOR="#FFFF00" CELLSPACING="0" CELLPADDING="0"> <TR> <TD COLSPAN="2"><IMG SRC="2x1.gif"></TD> <TD><IMG SRC="1x1.gif"></TD> </TR> <TR> <TD><IMG SRC="1x1.gif"></TD> <TD COLSPAN="2"><IMG SRC="2x1.gif"></TD> </TR> <TR> <TD><IMG SRC="1x1.gif"></TD> <TD><IMG SRC="1x1.gif"></TD> <TD><IMG SRC="1x1.gif"></TD> </TR> </TABLE>		MSIE 4.01, NC 4.5 et iCab 1.9

<TABLE BORDER="0" BGCOLOR="#FFFF00" CELLSPACING="0" CELLPADDING="0"> <TR> <TD COLSPAN="2"><IMG SRC="2x1.gif"></TD> <TD><IMG SRC="1x1.gif"></TD> </TR> <TR> <TD><IMG SRC="1x1.gif"></TD> <TD COLSPAN="2"><IMG SRC="2x1.gif"></TD> </TR> <TR> <TD COLSPAN="2"><IMG SRC="2x1.gif"></TD> <TD><IMG SRC="1x1.gif"></TD> </TR> </TABLE>		iCab 1.9 MSIE 4.01 et NC 4.5 (image approximative)

<TABLE BORDER="0" BGCOLOR="#FFFF00" CELLSPACING="0" CELLPADDING="0"> <TR> <TD COLSPAN="2"><IMG SRC="2x1.gif"></TD> <TD ROWSPAN="2"><IMG SRC="1x2.gif"></TD> </TR> <TR> <TD><IMG SRC="1x1.gif"></TD> <TD ROWSPAN="2"><IMG SRC="1x2.gif"></TD> </TR> <TR> <TD><IMG SRC="1x1.gif"></TD> <TD><IMG SRC="1x1.gif"></TD> </TR> </TABLE>		MSIE 4.01 NC 4.5, et iCab 1.9

<TABLE BORDER="0" BGCOLOR="#FFFF00" CELLSPACING="0" CELLPADDING="0"> <TR> <TD ROWSPAN="2"><IMG SRC="1x2.gif"></TD> <TD COLSPAN="2"><IMG SRC="2x1.gif"></TD> <TD ROWSPAN="2"><IMG SRC="1x2.gif"></TD> </TR> <TR> <TD ROWSPAN="2"><IMG SRC="1x2.gif"></TD> <TD ROWSPAN="2"><IMG SRC="1x2.gif"></TD> </TR> <TR> <TD ROWSPAN="2"><IMG SRC="1x2.gif"></TD> <TD ROWSPAN="2"><IMG SRC="1x2.gif"></TD> </TR> <TR> <TD COLSPAN="2"><IMG SRC="2x1.gif"></TD> </TR> </TABLE>		MSIE 4.01 NC 4.5 et iCab 1.9 (image approximative)

7. Conclusion

Si on veut faire un tableau précis, qui apparaisse de la même façon sur tous les navigateurs, il faudra avoir à l'esprit les point suivants :

n'utiliser le paramètre CELLSPACING qu'avec des valeurs paires.
n'utiliser le paramètre BGCOLOR que dans les tags <TR> ou <TD>, ou alors dans des <TABLE> avec un CELLSPACING nul.
quand on veut spécifier une largeur avec un CELLPADDING non nul, ne pas utiliser le paramètre WIDTH dans le tag <TD>, mais uniquement dans <TABLE> ; du coup, si on veut, ô ambition, avoir côte à côte plusieurs cellules de tailles précises, il faudra souvent faire une <TABLE> pour chacune !
éviter les tables compliquées noyées dans des COLSPAN et des ROWSPAN.

Ajoutons pour finir que les développeurs de Netscape ont été les inventeurs du tag <TABLE>, et qu'ils ont néanmoins réussi à l'implémenter n'importe comment eux-mêmes.

… édifiant !

8. Erreurs dues au webmaster

Les plus courantes hélas.

9. Poursuivre la navigation

dernière mise à jour : 24 février 2000 — retour au sommaire général

considérations sur le HTML 3.2
référence du HTML 3.2
quelques pièges du HTML 3.2
les caractères spéciaux reconnus par RAW HTWL
les macros prédéfinies de RAW HTWL