table vs div : dis papa, racontes-moi encore les tableaux…
La mise en page des sites web avec les tableaux n’a pas que des inconvénients : elle permet d’aller vite et d’obtenir une structure à l’épreuve des balles. La mise en page en div (5 légumes par jour, on vous dit…) n’a pas que des défauts : grâce aux CSS, il sera possible de moduler l’agencement des différentes parties de votre design. Bien sûr, tout n’est pas toujours aussi simple : les éléments constitutifs d’un tableau sont également stylables via les CSS, tandis qu’une structure en div mal conçue au départ ne sera pas vraiment modulable.
Il m’est arrivé dernièrement d’être “obligé” d’utiliser des tableaux pour faire une grille de mise en page à l’intérieur d’une structure en div pour les raisons suivantes (la première raison étant suffisante) :
- l’addition de valeurs exprimées en pourcentage ne permettait pas un alignement correcte avec les div, alors que les mêmes valeurs exprimées sur des cellules de tableaux donnaient le résultat attendu.
- le code CSS pour arriver à un résultat approximatif avec les div était largement plus verbeux que celui utilisé avec les tableaux. Sans parler du code HTML lui-même !
- cette structure devait pouvoir se décliner rapidement en différents templates. Autant dire que vu le temps passé à gérer les problèmes de float, d’overflow et de clear avec les div, l’utilisation des tableaux a été une bouffée d’air frais… Il suffit de s’en sortir avec les colspan et rowspan and the cat’s in the bag!
Je tiens à préciser que je n’ai pas utilisé de tableaux pour autre chose qu’organiser des données tabulaires depuis 2001 et que je n’hésiterais pas à dénoncer mes amis si je les prenait la main dans le sac 
Si je vous raconte tout ça, c’est que bien que l’utilisation d’un marquage sémantique adapté est à privilégier, il arrive parfois que certaines contraintes (de délai, d’organisation, de compétences, etc.) font pencher la balance du côté obscur et je trouve normal de confesser les entorses aux bonnes pratiques que l’on peut faire dans le cadre professionnel.
Tiens, en guise d’auto-flagellation je me connecterai une fois par jour sur #openweb, ça m’apprendra
8 participations à l'article
Il est vrai que les tableaux sont fait pour les données et que bien des fois leur non -utilisation reflète plus d’une obstination complète à n’utiliser que les divs que vrai refléxion .
En tout cas petit article agréable à lire et ce de bon matin
Faute avouée, faute à moitié pardonnée
Tu feras quand même 10 ave et 3 pater.
Nan mais aller sur #openweb c’est pas de la punition, c’est juste prendre une bouffé d’air frais et de troll dans la figure !
Bonjour Bruno,
Premier commentaire pour moi et pourtant j’ai parcouru ton blog de long en large et en travers
tableau vs div est toujours pour moi une source de conflit, mais comme ce conflit est avec moi-même je n’emm* par bcp de monde
Il me semble que <table> n’a pas subit d’autodafé ces derniers temps, qu’il est toujours W3C compliant et que les browser alternatifs (pour les handicapés par exemple) l’interprête correctement. Pourquoi dans ce cas essayer de la bannir à tout prix?
S’il est utilisé pour son rôle originel -càd organiser des données en lignes et colonnes- tu peux considérer que ta punition est inutile! Si par contre, tu l’utilise pour mettre en forme l’entête de ton site pour ton pied de page, là, tu recevras les foudres divines!
Pas donneur de leçon ou de conseil le Magoo, mais, cette réflexion je me la remémore à chaque questionnement existentiel ‘table vs div’. Ayant marre de la partager avec moi-même tout le temps, je me suis dit que ca te ferait du bien d’avoir un peu de soutient
Merci pour tes bons posts, ils me permettent de démarrer agréablement mes journées !
++
Pour parler d’expériences professionnelles, je n’ai jamais succombé au coté obscur (tableau pour la mise en page), même avec un délai super chaud (enfin, bourré, je sais pas)
Super Chinois > je ne parle pas de la mise en page globale mais juste d’une partie dans la zone de contenu.
)
Dans ce cas particulier, l’utilisation des div avec son cortège de float et de clear était vraiment contreproductif sur le long terme (parce que sur le court terme, évidement à moins d’être bourré…
Damien > Bon, faut que je réinstalle Gaim (pidgin) pour faire mon mea culpa
Shao69 > Je m’essaie à la rédaction de billets plus courts que d’habitude : content que celui-ci t’ai plut
Gregoire > Voilà, c’est fait !
OliMagoo > la question de l’utilisation des tableaux pour structurer le contenu est réglée (normalement) depuis quelques années déjà.
L’idée derrière l’utilisation des balises en fonction du sens qu’elles véhiculent est de produire des sites propres, faciles à maintenir sur le long terme par la personne qui l’a créé ou par quelqu’un d’autre.
J’ai souvent vérifié qu’un site réalisé avec des tableaux était souvent galère à maintenir sur le long terme, voire même pénible à modifier lorsqu’il faut faire des corrections clients (modifier l’agencement des blocs, etc.).
Et je ne parle pas des cas (qui devrait être de plus en plus nombreux à l’avenir) où le même contenu doit être affiché sur des périphériques très divers, comme les PDA, notamment, où les tableaux sont une vraie catastrophe. Sur Windows Mobile, par exemple, il est possible de linéariser la mise en page pour éviter le scroll latéral : avec les tableaux, c’est pas top.
commencer a integrer des codes dynamiques dans des tableau, avec plein de tr, td colspan et j’en passe dans le code source. Les tableaux sont simple a la conception mais les div permettent aux dev de faire des pages moins lourdes et plus simple.
Un Trackback
[...] des tableaux pour la présentation est le sujet qui suscite le plus de polémique. ([5], [8], [9], [13]) Il est parfois affirmé que les tableaux sont devenus inutiles pour la présentation. Ce [...]