La mise en page des sites web avec les tableaux n’a pas que des inconvénients : ça permet d’obtenir une structure à l’épreuve des balles très rapidement. 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 ne sont pas allergiques aux CSS, tandis qu’une structure en div mal conçue au départ ne sera pas vraiment modulable, même avec des CSS.
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 ou de compétences dans la chaine de production, 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 😉
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.
Salut,
je suis tout à fait d’avis que l’utilisation des tableaux n’est pas à mettre tres vite en poubelle.
En effet, moi je jumelle les deux. J’utilise les tableaux pour definir les bases et design fixe.
Et à l’interieur des super-cellules des tableau on peu autant de divs qu’on veux.
Il ne faut pas aussi oublier qu’on peu aussi appliquer des styles aux tableaux, ou les modifier dynamiquement la taille
je comprend pas pour quoi pas »
<
table> » Je ne vois pas où est le problème, peut être que ça fait vieux? moi je reste un vieux jeux au moint c’est plus solide.
Salut,
Tout à fait d’accord, à chaque fois que j’essaye les DIVs avec des CSS (genre le truc de Yahoo ou autre), j’ai toujours un petit cas bien particuliers où ça marche pas! Et la on fait appel au super tableau!
Certains disent que les DIVs sont plus rapide à rendre que les tableaux pour le navigateur…
Bof bof.. longue vie au TABLE (qui lui au moins est cross-browser!)
de toute façon il faut apprendre les tableaux car on s’en sert encore pour deux choses :
Mettre en forme les champs de formulaires
Présenter des listes de données avec des tris…
Donc, c’est impératif de connaître les tableaux.
Maintenant, 95% des sites sont fait avec des div, et de toute façon on n’aura pas le choix si on récupères le travail d’un intégrateur HTML, il le fera à 95% du temps avec des divs, donc c’est une obligation et pas un choix.
De plus, il faut s’aligner sur les pratiques de la majorité dans les entreprises et enfin dernier argument, bientôt on va passer au CSS3 une nouvelle norme qui permet de faire beaucoup de choses avec les divs (coins arrondies par exemple, animation etc…) très simplement et impossible avec les tableaux, donc l’avenir et l’évolution c’est les divs.
Conclusion : connaître et apprendre avec les tableaux et se former plutôt à l’avenir avec les divs…