[W3C] Mise en page html avec div ou tables selon vous ?

Salut à tous.
Je me présente, je suis programmeur depuis 3 ans dans quelques langages (principalement java). J'ai un bonne connaissance du html/css niveau "langage" mais j'ai peu d'expérience au niveau de leur utilisation pour la création d'une mise en page complète.
Partout sur le web (y compris sur developpez), on vous conseille sans arret d'utiliser exclusivement les cadres associés au css.
Comme par hasard, toutes les personnes vous conseillant ceci sont justement celles qui déclarent:

Citation:

---

Utilisez Firefox

---

Et oui, ce n'est un secret pour personne, IE respecte très mal les recommandations css. J'ai déja vu bien des mises en pages faites par des infographistes très doués voler en éclat sous IE dés qu'arrive un cas qui n'a pas été prévu. Et quand j'essaie d'en faire par moi même, c'est mission impossible.
Néanmoins vous savez aussi bien que moi que quand on concoit un site pour le boulot, on ne le crée pas pour soi ou pour les copains mais pour une multitude d'utilisateurs lambda qui, justement, utilisent IE.
Alors, parmis ceux d'entres vous qui font de la conception web un métier, j'aimerais savoir si il y en a qui se sont rendu à la conclusion que la meilleure méthode pour faire un site web est justement d'aller à l'encontre de la tendance actuelle en créant des sites entièrement en tableaux (ce qui fonctionne pas si mal d'ailleurs, la preuve: on n'utilise que ca dans les kits graphiques). Pour ceux qui ne sont pas de cet avis, ben... expliquez le pourquoi du comment.

Voila, en esperant que certains prennent le temps de répondre à ce petit sondage.
PS: par pitié, les trolls c'est pénible.

Sujet moulte fois traité :)
Je conseille Firefox et les tables :)
Apres chacun son truc :P

Un design compatible IE/Firefox ce n'est pas difficile ... Perso je fait le site pour Firefox et après j'adapte à IE, seulement pour les sites de mon boulot. Ca marche tout le temps ...
Bien coder ou coder rapidement, à toi de choisir.

Si les kits graphiques sont tous en tableaux, c'est que tout le monde peut en faire un en 5 mins ...

Citation:

---

Envoyé par Space Cowboy

Bien coder ou coder rapidement, à toi de choisir.

---

Mais il y a une différence entre un infographiste ayant une connaissance encyclopédique des moindres déviances par rapport à la norme et un programmeur qui doit de temps en temps modifier une page faite par un collègue quand celui-ci n'est pas disponible.

Citation:

---

Si les kits graphiques sont tous en tableaux, c'est que tout le monde peut en faire un en 5 mins ...

---

Ca semble sous-entendre que c'est du travail baclé, je ne trouve pas, il y en a d'excellents, sans pour autant être en css.
Et puisque tu évoques le critère temps, c'est aussi un sujet interressant. Personnellement je ne vois pas de différence notable au niveau de la qualité (je peux me tromper) ni au niveau de l'extensibilité. En partant de ce principe, si les sites en tableaux sont plus rapides à faire, pourquoi est-ce tellement moins bien? Certes on perd la possibilité de faire switcher les cadres de position (seule chose selon moi qui soit vraiment difficile à faire avec des tableaux), mais si c'est au détriment de la rapidité d'exécution ou est l'interet?

Citation:

---

Envoyé par Elwyn

Sujet moulte fois traité :)
Je conseille Firefox et les tables :)
Apres chacun son truc :P

---

La question n'est pas que ce soit mon truc ou celui d'un autre. Je parle de travail en entreprise. Si tu fais des sites web comme boulot, ca m'étonnerait que tu dises à tes clients "installez firefox".

L'utilisation de tableaux pour la mise en page n'a de sens que si on ne considère uniquement que les navigateurs graphiques...

Quand on passe un site fait de cette manière dans un navigateur texte ou oral, ca devient un joyeux bordel...
Il ne faut pas oublier les utilisateurs d'ie, OK... Mais il n'y a pas qu'eux, il y a aussi les malvoyants...
Pour eux un site en css bien fait, est accessible, alors qu'avec les tableaux, il ne me semble pas que ce soit possible.

Ce qui m'a convaincu dans l'utilisation de css, tout d'abord, le "C" de cascaded, vraiment puissant...
Le fait de totalement séparer présentation et contenu me parait fondamental.

Un site bien concu niveau structure, n'est vraiment pas très compliqué à mettre en forme... Après c'est sur que c'est une techno a part entière, pour faire un truc potable, il faut aller un peu plus loin que la mise en forme de police...
Je me vois mal expliquer à un gars qui n'a jamais fait que des tableaux qu'il abuse de ne pas utiliser le css...
C'est comme si je disais a ma grand mère qu'elle est vraiment stupide de ne pas gérer ses comptes avec un tableur...

La structuration indépendante peut aussi permettre d'obtenir un meilleur référencement.
En effet, les moteurs donnent plus d'importance à ce qui se trouve en début de page (par page j'entends le code tel qu'on le voit quand on affiche la source par exemple...)
Le css peut te permettre de placer ton contenu pertinent en début de code et de reléguer tout ce qui est menu, mentions légales et je ne sais quoi en fin de code...
De plus, pour les petites connexions qui existent encore, c'est plus agréable de recevoir d'abord le texte qui les ont motivés à cliquer sur un lien plutot que le menu... (tout en sachant que l'utilisation de css a tendance à réduire le poids de la page)

Si en background tu as des couches d'xml, d'xsl qui te génèrent l'html, c'est bien plus facile et logique à mettre en oeuvre...

j'ai commencé il y a un peu plus d'un an

d'abord avec des frames

peu pratique, problème de référencement, d'unicité de lien, etc

ensuite je suis passé en tableaux

code absolument illisible, très lourd à modifier ou à mettre à jour

et enfin avec div et css

et franchement, je trouve que la compatibilité avec firefox et ie est assez simple à mettre en oeuvre, globalement sans problème, pour autant que tu ne cherches pas un positionnement exact au pixel

et pour info, je teste avec mon navigateur par défaut qui est myie2 (ancienne version de maxthon), et quand j'ai presque fini, je regarde vite fait avec ie, netscape et ff, et en général ça colle

Bon, on va traiter ca par thèmes et pas forcément dans l'ordre:

CSS
----
Houla, on s'égare complètement la. Ou ais-je marqué que je considèrais css comme mauvais??? Css est très bien, simple, rend le code plus lisible et permet une très bonne séparation look/contenu. Ce que je met en cause, c'est le positionnement des cadres, c'est tout.
Et non je n'ai pas fait que des sites avec tableaux, au contraire, c'est justement en sachant que ca implique que je me pose des questions (je trouve ca un peu grossier par ailleurs).

Les malvoyants
---------------
Heu, franchement, quelqu'un y a déja cru à ce truc la? Non, sans rire, je parle de logiciels d'entreprise, tu crois vraiment qu'on engagerait un aveugle pour piannoter sur un ordinateur? Quand bien même on s'interresserait à leur cas, l'un de vous s'est déja amusé à tester la lecture d'un site web avec un clavier en braie? En quoi est-ce qu'un interface faite avec autre chose que des divs devrait les gener pour la lecture? J'ai beau imaginer le fonctionnement du programme permettant de faire fonctionner ces claviers, je ne vois pas en quoi c'est un problème, à moins qu'il n'aie vraiment été programmé avec les pieds. Par contre le flash c'est fort probable. Franchement cet argument ridicule est un pur on-dit.

Les utilisateurs d'IE
------------------
"Il n'y a pas qu'eux", je me marre :)
Mais si il n'y a qu'eux, mais même ca n'a pas beaucoup d'importance. Le fait est que ce qu'on exige en priorité c'est un site qui fonctionne. Et pour fonctionner il doit être compatible avec les browsers. Quand je fais un site j'ai pour impératif qu'il soit au strict minimum compatible avec IE, et un peu plus accessoirement Firefox.

Pour francis:
------------
Au moins ca c'est une remarque pertinente. Mais franchement j'ai beaucoup de mal à atteindre un positionnement ne serais-ce que potable sous IE. Jamais je n'ai pu trouver un tuto qui expliquait comment le faire (je ne veux pas dire "positionner des divs" mais "positionner des divs sous IE"), et même les pros que je connais n'ont pas facile non plus - pas de recette miracle, juste beaucoup essais qui font perdre énormément de temps.

http://img145.imageshack.us/img145/3478/gniana0.th.jpg
Voilà une page faite entièrement en div et CSS.

Résultat :
- Mise à jour de n'importe quel module rapide.
- Poids de la page à 9 Ko contre 25 Ko.
- Compatibilité Firefox IE 100% au pixel près.

J'épargnerai le référencement et l'accessibilité aux malvoyants étant donné que c'est un backoffice.

Mais des avantages on peut t'en citer plein.

Mais enfin, n'importe qui peut trouver des sites super bien fait avec l'un ou l'autre.
Ce que je met en cause c'est le fait que tout le monde semble considérer les cadres comme largement supérieur alors qu'il y a bel et bien des désavantages (portabilité et donc temps de dev qui s'en trouve allongé de par le fait qu'il faut passer plus de temps à chercher les incompatibilités).
Je préfèrerais que tu me cites des désavantages des tables (taille - c'est vrai, lisibilité - un peu aussi, réfèrencement et accessibilité aux malvoyants - c'est faux, je ne vois pas en quoi ca pose problème).
Les deux technos ont avantages et inconvénients, le tout est de savoir si le bilan final est autant en faveur des cadres que ca.

Re,

Partager les points de vue étant toujours interessants, voilà ma réaction à tes dernières remarques....

Avant tout, je garde à l'esprit qu'il y a ce qu'on peut faire et ce qu'on a le temps de faire. Je ne suis pas du tout un intégriste du css et je concois la difficulté de mise en oeuvre qu'il peut occasionner.
Je n'ai pas réussi à retrouver le lien mais j'ai déjà lu plusieurs articles dont le propos était d'expliquer à quel point l'habitude de créer des designs à base de tableau pouvait brider l'imagination. Les auteurs y expliquaient, qu'inconsciemment, on avait tendance à positionner les éléments sous formes de tableau, et en effet, quoi de mieux qu'un tableau pour faire un tableau?
Je suppose que c'est le cas quand tu utilises le mot cadre...
A mon goût, le css autorise plus de créativité, ce qui je te l'accorde n'est pas forcément le but de tous les sites.

Pour les malvoyants, je trouve ton argument un peu caricatural quand même.
De manière générale, l'utilisateur lambda dont tu parles dans ton premier post n'est justement pas engagé par les entreprises pour aller sur le site.
C'est sur que niveau part de marché ca reste franchement minoritaire, mais selon que ton site d'appelle regardemesbellescouleurs.com ou impot.gouv.fr la question de l'accessibilité peut avoir plus ou moins de poids...
Ce qui va être important pour la lecture d'un site, c'est justement l'ordre dans lequel vont être lus les différents éléments. Avec les tableaux, l'ordre de lecture est contraint par l'ordre dans lequel tu dois placer tes cellules.
J'utilisais le terme malvoyant pour également y inclure les gens qui ne sont pas aveugles mais qui n'y voient pas forcément comme à 20 ans. Je ne sais pas à quelle point cette fonctionnalité est connu mais internet explorer peut te permettre d'agrandir la taille du texte, ce qui peut aussi être assez violent sur un design à base tableau.

Pour les utilisateurs d'IE, j'ai googlisé vite fait, et en général, les stats rapportent 80% d'utilisateurs pour IE. Ca reste une écrasante majorité. Cependant 20% !! quand même, c'est pas rien. Pour une société dont les revenus sont reliés a sa présence sur le web, ca me parait être un argument choc. Il faudrait que des pros du webmarketting donnent leur avis.

Personnelement, je trouve qu'il est plus simple de faire évoluer un design css qu'un design tableau, mais l'évolubilité et la maintenance ne sont pas forcément les premiers critères de choix...

bonjour à tous

il y a un autre élément à ne pas oublier... la sortie du prochain navigateur ie7 qui devrait:roll: respecter mieux (ou +) les standards édictés par le w3c

donc si tu codes aujourd'hui et que c'est compatible w3c, alors tu ne devrais pas rencontrer de problèmes de compatibilité lors de cette fameuse sortie du navigateur...

donc pour moi c'est div/css au maximum, respect des standards au maximum, vérification permanente sous FF et adaptation éventuelle du code à IE (ce n'est pas très compliqué de rajouter des conditions en fonction de quelle plateforme lit ton applicatif)

les tableaux ne sont faits normalement que pour afficher des données tabulaires, pas pour paginer un site...

@+

Citation:

---

Envoyé par zais_ethael

En partant de ce principe, si les sites en tableaux sont plus rapides à faire, pourquoi est-ce tellement moins bien?

---

C'est débile comme réponse, pourquoi utiliser les poubelles alors qu'il y a des gens payer pour ca ? pourquoi mettre les vieux dans une maison de retraire alors qu'ils ne servent à rien et vont mourrir, pourquoi un type répondrez à un autre dans un forum alors qu'il ne le connait même pas ...

Je code en fonction du W3C car c'est lui qui défini les critère. Après que les navigateur le prennent en compte ou pas, rien à battre. J'aime bien faire du bon boulot.

Le CSS est le DHTML est à l'origine fait pour séparer le contenu de la mise en page. Quand un moteur de recherche arrive sur ton site, il ne voit que le code.
Par exemple, prend le site de mozilla, regarde le code, tu verra que même sans CSS, il y a une certaine mise en page et reste lisible.

CSS permet aussi d'alleger les pages, quand le vsiteur arrive sur ton site, la css est mise en cache et il ne télécharge que le contenu.

Par exemple, avec l'AJAX, tu ne charge que le contenu, et pas l'apparence.

Salut,

Citation:

---

Et quand j'essaie d'en faire par moi même, c'est mission impossible.

---

Il faut arreter de croire que IE ne respecte absolument aucun standard en matière de CSS... c'est d'ailleur microsoft qui est à l'origine même de cette spécification.

Certes il y a beaucoup de bug, la plupart étant assez mystiques ...
Heureusement des sites comme A List Apart sont là et ont identifié beaucoup de ces bugs, voire donné des moyens de les contourner.

Je ne suis pas développeur professionel, cependant je développe sous Firefox, mais teste toutes mes pages sous IE. Les incompatibilités majeures sont assez rares et généralement vite repérées.
J'utilise Firefox pour développer essentiellement pour les outils qu'il propose (firebug, web developer...) qui ne sont pas disponibles sous IE.

Je ne suis pas de ceux qui disent "Utilisez Firefox point.", mais plutot "si ça vous amuse encore d'être sous IE, c'est votre problème ..."


Pour revenir au sujet de départ, les avantages des CSS sont multiples, tu l'as toi même reconnu : modularité, clarté du code -> plus facile à maintenir etc...

Citation:

---

Ce que je met en cause c'est le fait que tout le monde semble considérer les cadres comme largement supérieur alors qu'il y a bel et bien des désavantages (portabilité et donc temps de dev qui s'en trouve allongé de par le fait qu'il faut passer plus de temps à chercher les incompatibilités).

---

Personne n'a dit que c'était la solution miracle. Cependant je trouve un peu abusé de dire que l'ont passe PLUS de temps à débugger pour IE.

Citation:

---

Je préfèrerais que tu me cites des désavantages des tables (taille - c'est vrai, lisibilité - un peu aussi, réfèrencement et accessibilité aux malvoyants - c'est faux, je ne vois pas en quoi ca pose problème).

---

D'autre part ça me parait impossible de coder un site complet avec des tableaux en utilisant pas un éditeur WYSIWYG (suivez mon regard...)
Pour ce qui est de l'accessibilité et du référencement, la mise en page tables par définition va à l'encontre d'un code sémantique. Peut-être que ça ne compte pas pour toi, mais tu ne peux pas dire que les tables valent la mise en page CSS dans ce domaine.

Citation:

---

Les deux technos ont avantages et inconvénients, le tout est de savoir si le bilan final est autant en faveur des cadres que ca.

---

Clairement, mon choix est fait.
Si les tables marchent mieux pour toi, je ne peux que te souhaiter bon courage ;)

Bonjour,
Pour moi il ne faut pas se fixer à une seule chose.
Il vaut mieux parfois mettre des tables comme parfois des div.
Et même on peut mettre des tables dans des div quand on veut les limiter à une partie de la page d'affichage.

Au sujet d'IE et Firefox, une chose que j'ai à dire, c'est que lorsque l'on a pas trop de mémoire disponible, comme lorsqu'on est à un bureau en réseau sans pouvoir modifier les paramètres de son PC par exemple... Firefox n'est pas idéal. En regardant le gestionnaire des taches, j'ai vu par deux fois :
Internet Explorer : 15 000 mo / Firefox : 20 000 mo et plus.
Je dis : pas étonnant qu'il marche mieux.
Le mieux, dont je me sers pour finir : Opera 9 (12 000 mo, le seul validé W3C )

Salut,

Je vais en décevoir pas mal d'entre vous, mais IE7 est loin d'être une référenc en terme de support de CSS. Il supporte à peine CSS2.1, alors que Microsoft avait promis supporter l'intégralité des recommandations du w3c totalement passées (ca n'incluait donc pas CSS3.0 ya un an quand ils l'ont promis)
le fait est qu'il existe des bétas que j'ai testé, et c'est une calamité, c'est vrai globalement il gere un peu mieux que IE6... mais des choses simples ne passent meme plus sur IE7. Et le premier qui me dit oui c une beta a interet a reprendre des cours... Chez microsoft les beta sont des versions allégées sur lesquelles il reste pas mal de bugs à corriger, mais dans l'ensemble, la version finale n'offrira pas plus de possibilités que la beta.

Un exemple simple, pour ceux qui ont pas trop le choix que les tableaux, vu ce qu'on leur demande et que le temps pour le faire en DIV/CSS est tellement "grand" que ba, pas le choix... si vous incluez des balises thead et tbody dans vos tableaux, IE7 pete les plombs et n'interprete que la premiere ligne intégrée dans le tbody et ignore completement les autres... très intéressant comme fonctionnalité soit disant standard non ?

Yen a encore pas mal aussi au niveau de la gestion eratique des div qui n'a pas corrigé des bugs d'affichage par rapport à la version 6.
Pour le boulot, un menu dynamique utilise des div cachées et qu'on affiche si on clic a certains endroit s... en CSS2.1 c'est l'enfance de l'art à faire... malheureusement IE6 gerant a moitié le CSS1.0 ne lui demandons pas de gérer le 2.1. donc Javascript, tu passe le div en display='none' ou 'block' et au miracle ca marche, mais il y a des bugs, au dela du 1er niveau d'imbrication il commence à s'emmeler les crayons... IE7 soit disant standard, et plus efficace, n'a tjs pas règlé le probleme... FF fonctionne a peu près correctement à ce niveau.

Donc ne comptez pas trop sur IE7 de ce coté la :)

Citation:

---

Envoyé par cinemania

Je vais en décevoir pas mal d'entre vous, mais IE7 est loin d'être une référenc en terme de support de CSS.

---

C'est le moins qu'on puisse dire ;)

Citation:

---

Il supporte à peine CSS2.1

---

En fait il ne le supporte pas du tout. De nombreux points non-supportés par IE6 ne le sont toujours pas sur IE7 :
- Selecteurs :hover, :first-child, [attribut]
- min-width/height, max-width/height

Citation:

---

le fait est qu'il existe des bétas que j'ai testé, et c'est une calamité, c'est vrai globalement il gere un peu mieux que IE6... mais des choses simples ne passent meme plus sur IE7. Et le premier qui me dit oui c une beta a interet a reprendre des cours... Chez microsoft les beta sont des versions allégées sur lesquelles il reste pas mal de bugs à corriger, mais dans l'ensemble, la version finale n'offrira pas plus de possibilités que la beta.

---

La version que l'on peut télécharger actuellement n'est plus une beta mais une Release Candidate, ce qui signifie bien qu'aucune fonctionnalité nouvelle n'est prévue pour la version finale...


En résumé IE7 ne changera probablement pas grand chose.
A la limite, le support des png24 sera peut-être utile, mais il existait de toute façon déjà des fix javascript pour les utiliser sous IE6 ...