Antoine Guiral : apprenti du web 2.0

Partage d’expériences sur le web

De la bonne utilisation des tableaux

Posted by Guiral antoine sur janvier 31, 2008

C’est un débat qui revient souvent sur les différents forums : tableau vs div. Pour ma part ce débat n’a pas lieu d’être… Nous allons voir pourquoi.

Je viens d’avoir une surprise en rédigeant ce billet…Les divs existent depuis HTML 3.2 (1995) et CSS 1 depuis 1996. Et oui je ne le savais pas…faut dire que je n’avais que 10 ans pour la sortie de CSS1! Je vous laisse calculer mon âge pour la sortie d’ HTML 3.2 :p.

Donc pour ceux qui ne le savaient pas (comme moi…) l’origine du « battle » n’est pas due à un oubli du w3c dans les spécifs d’HTML et de CSS. Bon si ce n’est pas le langage il nous reste…les développeurs (vous et moi quoi même si il y a dix ans le web était un peu moins ouvert…) et les navigateurs. A qui la faute? Eh bien sûrement un peu aux deux. Mais pas forcement en même temps.

Tableau Vs DIV

  • La guerre des navigateur

              1) Le commencement…

En cette fin de millénaire un guerre faisait rage sur la planète w3dot…Le seigneur netscape menait la rébellion face au tyran puissant internet explorer. Les batailles avaient lieux aux quatre coins du monde. Netscape en gagna beaucoup mais ne fût jamais en mesure de faire plier IE (aka internet explorer). Comment netscape arrivait il à s’infiltrer sur les terre de son rival? En respectant au maximum les règles du dieu W3C. Ce dieu étant jeune, les deux seigneurs de guerre se proclamèrent dieux vivant et reprirent à leurs compte ses lois. Netscape était plutôt fidèle au W3C tandis que IE n’en faisait qu’à sa tête…Comme un surfeur sachant surfer doit savoir surfer sans son surf, ils devaient s’adapter aux deux navigateurs qui régissaient les eaux de w3dot, et devaient trouver un outils leurs permettant de faire ce qu’ils voulaient aussi bien sur les eaux de netscape que sur celle du terrible puissant tyran ?????? (mettez ce que vous voulez ici) IE. La solution qu’ils trouvèrent fût : les tableaux.

              2) Le roi est mort, vive le roi

Cette guerre était faite pour durer. Les timestamps défilaient, jusqu’au jour où netscape fit une alliance avec le seigneur AOL. Ce dernier ne pensait qu’à s’enrichir. Les eaux de W3dot connurent une période plus calme au dépend des avancées technologique. En effet IE ne craignait plus grand chose d’un netscape moribond. Sauf que le village mozilla et ses irréductibles surfeurs ne pouvaient se satisfaire de cela. Et leur chef du nom de FireFox mena une nouvelle rébellion!Son cheval de bataille fut celui de nescape à la grande époque : être meilleur prophète du W3C que ne l’était IE. Les créateurs de surf se convertirent massivement. IE n’avait qu’à bien se tenir et devait réagir très rapidement. Il renouvela son armée pour la 7ème et 8ème fois très rapidement. Nous vivions l’aube d’une nouvelle ère.

IE vs FF

  • Et dieu créa l’accessibilité

              1) C’est la lutte…

Les surfeurs subissaient la guerre depuis ses débuts. ils devaient s’adapter, évoluer, apprendre constamment. Et ce, uniquement pour répondre aux exigence de leurs dieux vivants. Mais ils étaient de plus en plus nombreux. Et les différences entre eux se multipliaient au même rythme que W3dot se polluait. Cela nécessitait des efforts supplémentaire mais indispensable pour que la cohabitation entre surfeurs soit conservé. Les accords de Sémantique et d’Accessibilité étaient signés. W3dot allait elle être sauvée?

              2) Tous pour un, chacun ma gueule

C’était sans compter sur les surfeurs conservateurs. Ceux qui quelques années auparavant avaient construit leur réputations grâce aux tableaux. Les tableaux étaient la base de leur activité…Or les accords de S&A étaient clair : les tableaux ne doivent être utilisés QUE pour les données tabulaires. Toutes autre utilisations est à proscrire, il ne fallait plus compter décorer sa planche avec un tableau : les divs étaient la pour nous simplifier la vie. Une guerre civile éclata…D’un coté les conservateurs et leurs tableaux non conforme avec les accords S&A et de l’autre les « Amis de W3dot » qui prônaient les nouvelles règles.

Accessibilité

FIN

Bon je vais résumer mon point de vue : au début il n’était pas possible de coder pour tout les navigateurs avec des divs. Les tableaux étaient donc indispensables. Cependant avec les dernières générations il est possible de coder propre et sémantiques. Parfois en rusant un peu pour faire correspondre certain détails entre IE et FF mais C’EST POSSIBLE. Or on voit trop souvent des codes utilisant des tableaux pour autres choses que des données tabulaires (traditionnellement du design). La limite entre données tabulaires ou non peut varier un peu à mon avis. Mais on ne construit pas un design avec des tableaux. Cela ne signifie rien sémantiquement parlant et ce n’est pas accessible. Pensez à un lecteur d’écran qui va devoir lire vos 15 tableaux imbriqués… Et si ces deux arguments ne vous conviennent pas pensez à la maintenabilité de votre code…Bref, même si cela peut vous demander un petit effort au début vous gagnerez en productivité (il paraît qu’il n’y a plus que ça qui compte aujourd’hui) mais aussi en accessibilité.

Pour en parler j’ai créé un groupe facebook : « les tableaux pour les données tabulaires ». Rejoignez nous!

Si vous voyez des phottes fautes, ou si (et surtout) si vous souhaitez réagir surtout n’hésitez pas! Un blog c’est avant tout un endroit pour partager et réagir.

PS : cette histoire n’a aucune connotation religieuse dans la vraie vie!! Bref pas de sujet polémique la dessus quoi lol

Publicités

2 Réponses to “De la bonne utilisation des tableaux”

  1. C’est vendredi, trollons un peu 😉

    Si ma mémoire est bonne, Netscape avait l’avantage sur Internet Explorer parce qu’il était le premier sur le marché et cette position « dominante » lui permettait de faire payer son navigateur.

    Par ailleurs, Netscape avait implémenté moult balises d’un intérêt dicutable (blink) quand IE avait pris en compte les besoins des utilisateurs avec la balise marquee ^_^

    IE a ensuite repris l’avantage en rendant son navigateur gratuit, ce qui lui a assuré la victoire sur Netscape (ah, ces surfeur, aucune reconnaissance du ventre 😉 ).

    Ceci dit, l’utilisation des tableaux par les webmasters provient justement de … des intéressantes propriétés des tableaux que les CSS n’ont implémenté que bien plus tard display: table-row, table-cell, etc.. et qui ne sont toujours pas bien implémentées dans les navigateurs d’aujourd’hui.

    Le problème des tableaux ne vient même pas de leur manque de sémantique comme bcp le dise : en mise en page une grille est une grille. Point. Qu’elle soit rendu à l’aide d’un quadrillage de cellule de tableaux va plutôt dans le bon sens ^_^v

  2. Merci bruno pour ces précisions! (oui oui c’est bruno de css4design!!!!!) C’est vrai que je ne suis pas tout à fait caller sur tout ça. Le but étant surtout de dire qu’il y avait au départ et manque des navigateurs puis ensuite des dév..

    Et pour ton dernier paragraphe je suis tout à fait d’accord avec toi, d’ou mon : « La limite entre données tabulaires ou non peut varier un peu à mon avis. »

    En tout cas merci encore d’avoir commenter et à bientôt ici ou chez toi (ou sur facebook:p)!

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

 
%d blogueurs aiment cette page :