table vs div : dis papa, racontes-moi encore les tableaux…

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

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 : ç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) :

  1. 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.
  2. 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 !
  3. 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 ;)

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



13 commentaires pour “table vs div : dis papa, racontes-moi encore les tableaux…”

  1. shao69 dit :

    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 ;-)

  2. Gregoire dit :

    Faute avouée, faute à moitié pardonnée ;) Tu feras quand même 10 ave et 3 pater.

  3. Damien dit :

    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 ! :)

  4. OliMagoo dit :

    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 ! ++

  5. Super Chinois dit :

    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)

  6. 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é… ;) )

  7. 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.

  8. shane plasebo dit :

    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.

  9. […] 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 […]

  10. Arnold dit :

    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

  11. lunka dit :

    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.

  12. Tom dit :

    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!)

    • noussa dit :

      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…

Laissez un commentaire

Vous pouvez utiliser les balises HTML suivantes : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Les commentaires sont publiés sous votre pleine et entière responsabilité et ne doivent pas contrevenir aux lois et règlementations en vigueur. Les propos racistes ou antisémites, diffamatoire ou injurieux, divulguant des informations fausses, relatives à la vie privée d'une personne ou utilisant des oeuvres protégées par les droits d'auteurs ne sont pas les bienvenus et seront modérés sans modération.

Merci d'être constructif et n'oubliez pas : « sans la liberté de ramer il n'est point d'éloge flotteur ! »



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site