Les raisons pour ne pas créer de sites en tableaux

Depuis que j'essaie d'aider les personnes ayant des problèmes avec leur site web, je suis très souvent confronté au problème des sites en tableaux.
Seulement, la plus part de ceux qui en créent et qui ont des problèmes avec ne veulent pas changer, car ils ne voient pas l'intérêt, ils se disent sûrement que ça ne viens pas de là...
Mais voilà, les sites en tableaux sont un vrai fléau sur le net, et je vais essayer de vous expliquer pourquoi.

Les points positifs :

Si il y a tant de sites en tableaux sur le web, il doit bien y avoir des raisons...
Voila celles que j'ai trouvées, elles peuvent bien entendu paraître ambiguës a certains.

• Quand on conçoit un design, on a souvent une vision un peu tabulaire du squelette, surtout avec certaines dispositions.
• Pour un débutant, les tableaux paraissent plus simple a utiliser, car on a déjà la base sans utiliser le css
• Il y a plusieurs balises, ce qui donne une impression de possibilités plus forte qu'avec les div

Voilà, c'est a peu près tout ce que j'ai trouvé, mais si vous avez des idées, n'hésitez pas a me le signaler .

les points négatifs

Cette partie risque d'être un peu plus conséquente étant donné qu'il y a beaucoup plus de points négatifs !

La lenteur

Les tableaux n'étant pas faits pour la structure d'un site, ils ne sont pas optimisés pour cette tache, ce qui fait que leur affichage est beaucoup plus lent pour le navigateur.

Cet affichage nécessite beaucoup de ressources que ce soit pour la mémoire vive, ou bien pour le processeur...
D'ailleurs quand on scroll (descend dans la page) sur un site en tableaux, souvent, on constate nettement un ralentissement...

Donc en gros, si vous voulez un site qui s'affiche rapidement et qui ne se ralentisse pas quand on scroll, évitez d'utiliser uniquement des tableaux, et notamment de les imbriquer.

L'inaccessibilité

L'accessibilité est l'une des choses les plus importantes en informatiques, et pourtant, beaucoup de webmasters ont tendance à l'oublier...
Un site accessible est un site sur lequel tout le monde peux naviguer sans problèmes, que ca soit vous, moi, une personne avec un ordinateur ou un brownser archaïque, ou bien encore une personne atteint d'un handicap.
Or, avoir un site accessible a tout le monde est très important sur tout les plans, que ca soit pour le nombre de personnes qui pourrons se servir de votre site, ou bien encore pour votre référencement sur les moteurs de recherche...
Cependant, les tableaux, surtout ceux imbriqués, ne sont pas accessibles, car ils posent problème notamment aux personnes atteintes d'un handicap.

En plus, il est plus dur de créer un site valide aux normes de la W3C avec les tableaux.
En effet, ils déconseillent très fortement cette utilisation, même si leur validateur ne peut pas détecter leur bonne ou mauvaise utilisation, certaines techniques utilisées ne sont pas du tout valides avec les tableaux, tandis qu'elles le sont avec les div.

La difficulté d'entretien

Bien qu'ils permettent aux débutants de structurer soi disant plus facilement leur design, les tableaux sont plus difficiles a modifier que les div.
Par exemple, si vous voulez modifier la largeur d'une de vos cellules, vous devrez le faire sur toutes vos pages, tandis qu'avec les div et le css, vous n'aurez qu'a modifier un petit chiffre dans feuille de style...

Bon, ok, mon exemple laisse a désirer, mais si vous voulez un jour changer la structure de votre site, avec les div, vous n'aurez qu'a changer 2-3 balises et une petite partie du css, alors qu'avec les tableaux, c'est tout le html et le css qui est a revoir, ce qui est une perte de temps considérable !

Le poids

Les tableaux prenant beaucoup plus de place que les div dans le html, le fichier est donc nettement plus lourd... et figurez vous que c'est exactement la même chose pour le css !
Donc non seulement les tableaux sont plus longs a afficher, mais ils prennent plus de poids sur le serveur, et mettent donc plus longtemps a charger.

Si vous avez un petit hébergeur de quelques Mo, vous risquez vite d'être a court d'espace libre si vous restez avec un squelette aussi archaïque.

Les difficultés d'impression

Si votre site est intéressant, il y a de grandes chances pour que certains de vos visiteurs cherchent a imprimer quelques unes de vos pages...
Mais si vous utilisez un design en tableaux, il sera massacré par l'éditeur de texte pour rentrer dans la page, tandis qu'avec les div, il sera modifié, mais au moins, l'ordre sera respecté.
Vous pensez bien que si il faut complètement modifier chaque page que l'on veux imprimer, ça risque de très vite devenir long...

Conclusion

Bon, après ça, certains d'entre vous n'aurons toujours pas compris pourquoi il faut utiliser les div, et d'autres, au contraire, ne voudrons plus jamais utiliser de tableaux de leur vie .
Mais le but de ce topic est de ne tomber dans aucun de ces deux extrêmes !

Je pense qu'avec tout ce que je vous ai dit, il y a plus de chances que vous soyez dans le camp de ceux qui refusent d'utiliser les tableaux. Mais ce qu'il faut bien comprendre, c'est qu'il ne faut surtout pas les bannir !
déjà, pour toutes les données tabulaires, il n'y a que cette solution qui soit fiable, et même pour certaines parties de votre design.
Parfois, il est beaucoup plus lourd d'utiliser les div et certains hack css qu'un tableau, même si ça reste relativement rare.

Donc en gros, ne faites pas tout votre design en tableaux, mais utilisez les div ainsi que quelques tableaux, en faisant bien attention a ne pas en abuser et a éviter de les imbriquer.

Liens externes :

ce sujet étant récurant sur le net, les liens en rapport sont donc conséquents !

• Les problèmes de la mise en page par tableaux - Oppenweb
• En quoi la mise en page par tableaux est-elle stupide - Cybercodeur
• Maléfiques tableaux ! - Alsacréation
• Tableaux V/S CSS - Pompage.net
• La preuve qu'on peux complètement changer un design en div juste avec des CSS différents -Css Zen Garden
• L'ordre des données dans un tableau - AccessiWeb
• A l'assaut de l'accessibilité ! - LiberT

PS: Si vous avez des suggestions, si vous voulez approfondir un point, ou si vus n'êtes pas d'accord avec moi, répondez tout simplement a ce message, tout en évitant bien le troll .

juste une question, les sites étaient en tableau avant le css ?

Oui, mais le tableaux se sont surtout développés à l'arrivée du border: 0px

Un petit up et une petite édition .

Très bonne idée ce topic. Personnellement, j'utilisais les tableaux jusqu'à ce qu'on me fasse une remarque à propos de mon dernier design. Aujourd'hui, je n'utilise que les div et c'est vraiment beaucoup plus pratique.
Je n'avait toujours pas vraiment compris pourquoi mais grâce à ce topic, je comprends beaucoup, beaucoup mieux.

Intéressant même si je n'apprend rien, mais tu va le transformer en tuto ?

je ne sais pas encore si ca en vaux la peine...

Mais peut être qu'en le mêlant avec autre chose, ca pourrait en devenir un...

Par exemple, comment passer d'un design en tableaux a un design en div...

Très bon message.

J'ai un tuto en cours. Effectivement le plus dur est de dire comment changer plutot que juste critiquer.
Eventuellement je peux le publier (pas avant deux semaines) et puis les critiques l'amélioreront rapidement...

D'accord .
Mais si tu veux mon aide, n'hésite pas a me contacter.

Il ne s'agit pas non plus de faire une surcouche de div, ce qui est fréquent sur les sites des zéros, notamment dû à un exemple foireux de M@teo21 dans son cours :

Code : HTML

alors que que la balise "<p>" suffirait.

Code : HTML
Mettre des div aussi inutiles que cela, cela s'appelle mettre de la présentation dans la page HTML, tout comme les tableaux.

Oui tu as raison Kanor seulement généralement on met plus qu'un paragraphe dans le pied de page, donc il pourrai être intéressant de rajouter un p mais pas de virer la div (AMHA) histoire de comprendre que le div est sensé contenir une division entière du document et pas juste une paragraphe…

C'est une connerie de dire "les divs" par opposition aux tableaux ; les divs ne sont qu'une balise parmi d'autres, qui peut (et doit) être utilisée pour structurer le document, ou comme balise neutre si on a besoin d'un élément qui ne correspond à rien. L'opposé des tableaux de présentation, c'est du HTML qui se fonde sur le sens des balises et qui laisse la présentation au CSS, c'est-à-dire du HTML tout court, vu que c'est pour ça qu'il est fait.

Oui, mais je dit les div pour aller plus vite .
De toutes facons, comme je parle de la structure du site, ce sont surtout les balises div et span qui sont utilisées, et puisque j'aime pas trop les span...

Ben non. La structure d'une dissert', ça serait pas seulement les parties et sous-parties (qui seraient des div en HTML), mais aussi les paragraphes (p) et titres (h[1-6]). Pour la structure d'un site, ben c'est pareil.

Mouais...
je ne suis pas tout a fait d'accord, je ne parle pas de sémantique, mais de structuration du design...
Parce que de toutes façons, quand tu utilise les tableaux, tu met quand même les balises p, hx, li...

il faut dire que des logiciel comme photoshop, qui permettent de faire des maquette de site, propose de creer la page html, qui va avec, en tableau, et quand on sait bien utiliser photoshop ont peut TOUT faire(paragraphe,titre...)
Comme c'est plus simple de cliquer sur le bouton "creer la page html" que de taper tout le code, les gens (les féniant lol) n'ont pas envi de tout refaire en div(mais moi c'est pas mon cas).

Citation : darkpower

Photoshop peut te créer 1 page et c'est tout. Et le texte que t'auras mis dans photoshop se transformera en image, donc c'est terriblement inutile. Il faut connaître un minimum le code pour pouvoir transformer son PSD en HTML. Mais le mieux est de connaître un maximum le code pour le diminuer à l'essentiel.

@ Kanor: je suis totalement d'accord avec toi. On appelle ça la "divite". Quelques webmasters découvrent la solution HTML+CSS et abusent des div alors que pleins de balises ont une valeur intrinsèque non négligeable (surtout par les moteurs de recherche). D'ailleurs c'est pour ça que je m'efforce d'éviter une div "header" mais plutôt un h1 "header", beaucoup plus intéressant.

je suis tout a fait dacord avec toi mais je dit juste que sa peut etre une des raisons qui fait que les gens utilise les tableaux

ps:sous photoshop on peut avoir une partie qui reste en texte et donc pas la transformer en image.

Si tu le dis.

Je pense pas que Photoshop soit la raison pour laquelle les gens font des tableaux.

La raison c'est que depuis longtemps ça a été la seule façon de structurer graphiquement son site, donc c'est resté.

Deuxième raison: avec les logiciels WYSIWYG accessibles aux plus novices, il est bcp plus facile de créer des tableaux en 3 clics que de gérer des styles CSS mal interprétés par le logiciel. En effet, ce qu'on voit quand on utilise ce logiciel n'est pas forcément ce qu'on aura dans le navigateur, à part si on utilise des tableaux. Dans ce cas, ce qu'on voit dans le logiciel sera à peu près ce qu'on aura dans le navigateur.

Très bonne idée ce topic.

+1 à Kanor et aux autres sur le coup des div... Trop souvent on a l'impression que pour certains, div et span sont les balises pour "mettre le CSS".
L'exemple de M@teo est bon dans le fond: dans le pied de page, on met généralement plus d'un élément... Mais ici, un p serait certes plus approprié.
Perso j'utilise principalement div/p/h, en mettant les p dans les div...

darkpower -> tout le monde n'a pas les moyens pour toshop. C'est une minorité qui fait ca, le principal problème est que les div n'apportent pas d'amélioration "visible" par rapport aux tables, les questions de sémantique, accessibilité ou même performance se posent rarement aux novices.
Pour la plupart des codeurs, un tableau reste quelque chose de de "standard" à une page.

Pas bête l'idée d'un simple paragraphe pour le pied de page, et d'un h1 pour le header .
J'avoue que je n'y avais pas encore pensé, mais que point de vue sémantique, c'est beaucoup plus correct...
Alala, le jour où on aura un validateur comme celui de la W3C mais pour l'accessibilité et la sémantique...

Oui l'intérêt de mettre un h1 pour le header c'est que les moteurs de recherche prendront davantage en compte ce header parce que c'est un titre. Et c'est exactement ce qu'on veut: que le titre du site soit mis en valeur non?

Oui, j'y penserais a l'avenir :o) .

Un petit up pour que mon travail ne tombe pas trop loin dans les abimes du fora .

Allez, encore un petit pour la route .

Ca mériterait presque d'être en post-it selon moi

Juste pour le H1 header, moi j'ai une bannière en header, donc j'ai mis un div + une img. Vaut-ce la peine de changer le div en h1 et/ou de mettre juste l'image avec un display: block et de lui mettre mes margin dessus ? J'espère que vous avez compris !

Hellow,
Moi mon design est que en tableau et j'ai beaucoup presque tout le temps entre des div et je voudrais juste savoir si je pourrais changez mon design enfin mettre des div donc en gros le recoder
Merci.

Tu PEUX toujours....

Oui, c'est même moins dur qu'on ne le crois .