Utiliser les tables HTML, même avec du CSS

Après un précédent article à propos des raisons de ne pas utiliser les tables HTML (et de leur préférer les tables CSS), je souhaite revenir un peu sur ce sujet à partir de ma propre expérience.

Lors du passage à la version 5 de l’interface de ce site (la version « verte » qui est présente à la publication du présent article), j’ai essayé de construire l’interface en maximisant l’utilisation des CSS afin de faciliter les migrations ultérieures et d’alléger la construction en séparant contenu et mise en page. Néanmoins, il m’est rapidement apparu que la mise en page en trois colonnes (plus un pied de page) que j’utilise est l’une des plus difficiles à reproduire avec les CSS et que cela pose de gros problèmes de compatibilité avec les différents navigateurs que l’on rencontre.

C’est pourquoi j’ai décidé de choisir le meilleur des deux mondes. Expliquons-nous. Les tables HTML sont très simples à construire et sont très généralement bien reconnues par tous les navigateurs actuels (leur définition est maintenant antique). J’ai donc décidé de structurer le site autour de tables HTML. Mais je me suis contenté de donner la structure. Toute leur mise en forme a été faite avec des tags CSS.

C’est une solution très riche. On utilise chacun à ce qu’il sait faire le mieux : les tables HTML permettent de définir un nombre de colonnes, de grouper certaines parties de manière très claire, etc. Les tags CSS permettent de définir séparément et proprement les tailles, les marges, les bordures, les fonds de case, les couleurs, etc. On obtient une présentation qui est très tolérante (les tables HTML se comportent généralement très bien quand une image trop grande -une erreur courante- force les dimensions). Mais les mises en forme sont très souples dans le CSS.

Si vous êtes intéressé, je vous recommande ainsi de consulter les sources de cette page et le fichier CSS associé.