Les tableaux en (x)HTML : ou comment ne pas en abuser...

C'est un sujet qui revient très souvent dans le monde du développement Web : l'utilisation ou non de tableaux suivant les cas. J'ai donc décidé de vous éclaircir un peu tout ça pour que vous compreniez enfin l'enjeu d'un codage full-<acronym title="Cascading Style Sheet">CSS</acronym>.
Vous êtes prêts ? Accrochez-vous, on est parti !

Utilisations contre-indiquées :

Les tableaux sont souvent utilisés à tort pour la mise en page de sites web. C'est-à-dire le placement des éléments à telle ou telle position.
Pourquoi ? Parce que la mise en page en tableaux est considérée comme plus facile et plus efficace, mais il n'en est rien. Pourquoi ces mauvaises habitudes ? C'est ce que nous allons voir.

Ces habitudes datent de la période pré-CSS, c'est-à-dire du temps où le CSS n'existait pas encore. La seule solution pour mettre en page un site était alors de faire des tableaux en HTML.
Par la suite, un grand nombre de personnes qui avaient l'habitude de coder leurs sites avec ces techniques ont trouvé le CSS fort compliqué à son arrivée et n'ont pas pris la peine de l'employer ou l'ont employé à mauvais escient. Quelques autres irrésistibles codeurs se sont mis de suite à exploiter cette nouvelle technologie et en ont compris les bienfaits et le bond technologique qui leur était alors apporté.

De ce fait, les tableaux sont restés longtemps le moyen le plus utilisé à des fins de mises en page. Mais le renouveau du web (ou la débalkanisation du web comme certains se plaisent à l'appeler ) marque l'entrée du CSS et son importance croissante au sein des développeurs.

CSS vs Tableaux : l'avantage des technologies nouvelles

C'est bien beau de dire qu'il faut coder en CSS mais encore faut-il que cela apporte quelque chose au codeur. Voici les principaux avantages de la mise en page full-CSS sur la mise en page en tableaux :

- Un code allégé. En effet, grâce au CSS, vos pages seront grandement allégées : entre 30 et 60% de poids en moins. Qui dit poids en moins, dit chargement plus rapide pour les visiteurs. (C.f. cet article : Tableaux ou Div, petite comparaison concrète)

- Une facilité de modification et une modularité non négligeable. Le style de votre site étant contenu dans une page unique, une fois cette dernière modifiée, le style de toutes les pages du site sera modifié sans autres changements.

- Un respect des normes du W3C. Même si le validateur ne condamne pas l'utilisation de tableau (en effet, ce dernier ne vérifie pas la sémantique : l'utilisation des balises spécifiques pour un usage déterminé, à savoir l'emploi de la balise <p> pour les paragraphes, de la balise <hx> pour les titres, par exemple, et non pas n'importe quelle balise à n'importe quelle sauce comme on le voit souvent ! ), les tableaux ne sont pas valides dans le cas de leurs utilisations pour une mise en page.

- Une meilleure accessibilité. Les tableaux imbriqués ne permettent pas à des navigateurs spécialisés (tablette brail, navigateur en mode texte ou console, navigateur oral,...) de déterminer la place de chaque élément ou son importance (titre, donnée, paragraphe, etc...)

- Un codage simplifié. En effet, une fois la <acronym title="Cascading Style Sheet">CSS</acronym> élaborée et mise en place, plus besoin d'y toucher. Cela simplifie grandement le codage en empêchant la répétition de multiples attributs propres aux tableaux comme colspan, background, et autres subterfuges.

- Une meilleure impression. Un site codé en tableaux ne peut être facilement imprimable et il faut faire un deuxième code qui coûte beaucoup en travail, ressources et énergie, alors qu'une seconde CSS pour l'impression est facile et rapide à faire.

Et cette liste n'est pas exhaustive... Certains y ajouteront sûrement des avantages si vous leur en parlez, mais nous ne sommes pas là pour créer une liste complète de la puissance des CSS !

Tableaux : Pourquoi faire alors ?

Une seule phrase à connaître (et par coeur s'il vous plaît ! ) :

Donc les tableaux ne doivent pas être utilisés à tout bout de champ comme certains s'y obstinent mais à bon escient. Parfois la limite entre données tabulaires ou non est un peu ambigüe. Dans ce cas, c'est au webmaster de juger de l'utilisation ou non des tableaux.

Voilà, vous connaissez désormais tout sur les tableaux en (x)HTML et sur leur utilisation. Vous n'avez donc plus d'excuse pour en mettre à chaque ligne de code ! (Si j'en vois encore un qui fait ça, gare à lui ! )
Donc maintenant, à vos claviers et bon coding !

Bonsoir,

Voilà un article qui a le mérite d'être clair.
Par contre, pour connaître un peu plus spécifiquement le domaine de l'accessibilité, je n'aime pas trop que l'on satanise autant les tableaux, comme si la moindre cellule rendait un document inaccessible aux personnes handicapées. C'est loin d'être le cas.

En fait, la seule chose qui puisse rendre la navigation difficile à un lecteur vocal par exemple (j'en parle par expérience), est l'imbrication multiple de tableaux, et non les tableaux simples et bien structurés (avec summary, caption, th, etc.).

D'ailleurs à ce sujet, le Guide Accessiweb propose une fiche très bien expliquée et à ne pas rater : Dans un tableau de mise en forme, le contenu est-il correctement ordonné ?.
Dans cette fiche, vous comprendrez que le problème vient principalement de la linéarisation des tableaux, parfois impossible (vous aurez même un exemple auditif de Jaws).

Bref, attention à ne pas voir tout blanc ou tout noir : les tableaux imbriqués, c'est mal. Par contre, parfois, il est préférable d'employer des tableaux que des imbrications de <div> par exemple, ce qui est souvent pire... Rien de pire qu'une Divite chronique de toute façon

PS : attention aux nombreuses fautes de ce billet, ça décrédibilise un peu le message D'ailleurs les fautes d'orthographe rendent parfois les mots difficilement compréhensibles aux synthèses vocales et ceci est un autre réel problème d'accessibilité. Par exemple "chan" (pour "champ") n'est pas un mot de la langue française et sera prononcé à l'anglaise, ce qui rendra la phrase incompréhensible.

Bonjour !

Je suis assez d accord avec ça mais comment on peut faire une mise en page sans les tableau ? avec des position absolu ?

Citation : Kyoshiro_Mibu

Bonjour !

Je suis assez d accord avec ça mais comment on peut faire une mise en page sans les tableau ? avec des position absolu ?

Les cours du Site du Zero sont justement là pour te guider (très bien) dans cette démarche

waaa !!
je les ai relus ! elles ont un peu changé quand meme !
Mais bon moi je parlais d un design "avancé" (si puis-je dire !)



Et ben un ami me fais le design,
il me le decoupe,
et ensuite c est la que ca se complique ! commen je fais pour "assembler" ?

Citation : Kyoshiro_Mibu

et ensuite c est la que ca se complique ! commen je fais pour "assembler" ?

L'assemblage se fait selon chaque élément : tu structures ton document en utilisant les bonnes balises (<ul> pour les listes de liens, <hn> pour les titres, <p> pour les paragraphes).
Ensuite tu as presque tout fait : tu positionnes les éléments et - au besoin - tu leur appliques des images de fond.

Voilà un tuto très détaillé :
http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/design-css

Bonne lecture

Très bon sujet, merci pour toutes les explications.

Par contre, je peux vous dire que lorsque l'on a l'habitude de coder avec tableaux, c'est dur de ce mettre au css. Mais je suis en train de faire le pas, je vais quand même pas rester en arrière

Joli article, qui merite sa place en post it
Pour ma part, j'ai trouvé plutot fastidieux le coding de tableaux, et le CSS qui va avec je n'en utilise qu'un sur ma page perso (tit coup de pub je peux ?) mais je me demande si c'est vraiment bien vous en pensez quoi de mon petit tableau a droite ?

J'ai déjà essayer de coder mon site en CSS et même si c'est assez facile j'ai rencontré pas mal de problème :

EX : les flottants, j'ai fait un flottant pour mon menu et il flottait sur le corps principal. (le corps principal pour moi c'est un cadre où se trouve la bannière, le menu et le cadre de contenu :p).

Donc voilà je trouve le CSS bien mais j'ai pris l'habitude de coder en tableaux. :-/

De plus les problèmes d'affichage des tableaux IE/Firefox sont justes des erreurs de codage (mon site est en tableaux mais est visible semblablement sur IE/Firefox)

Merci Raphael pour avoir donné ton avis de professionnel sur mon humble topic et pour les précisions que tu as apporté.
Les fautes devraient d'orthographe être normalement modifiées : je devais être crevé quand j'ai écrit ce message ! (merci au passage à Nyro Xeo et à JulFisher pour leur aide)

Quant à -Exelo-, la raison que tu as évoqué est la principale cause de l'utilisation massive des tableaux dans le web. Seulement, quand on a une assez bonne expérience du CSS, on se rend compte qu'il y a des techniques pour éviter les problèmes d'affichage sur les différents navigateurs et que le CSS entraine vraiment un gain de temps non négligeable pour l'évolution d'un site web, son amélioration ou sa dynamisation. CSS ; l'essayer c'est l'adopter...

Je veux pas jouer les rabats-joies mais mon site en tableaux fait 4ko alors qu'en CSS il fait 5ko, c'est minim mais bon...

En même temps je suis sûr d'avoir fait plein de bêtises dans mon site en CSS...

Et puis, pas mal de gens ont des problèmes avec leur design de leur site en CSS: par exemple les coins arrondis.

Mais c'est vrai que la simplicité du CSS est incontestable pourtant j'ai essayé mais finalement je ne l'ai pas adopter...

Mais après chacun code à sa facon et si vous préférez coder en CSS plutôt qu'en tableaux c'est votre choix

C'est votre choix mais ce sera aussi vos conséquences, coder le design en tableaux sa revient au meme titre que beurré ta tartine avec une truelle ( dédicacé à je sais pas qui qui parlait des champ SQL ). On te donne les bon outils ( CSS /XHTML ) utilise les pour faire ce qu'ils sont sencé faire. Les tableaux c'est pour les données. Je pense que les liens et le contenu de ce post-it sont assez explicites. Tout le monde doit comprendre que le design en tableau c'est pas logique et que sa plus d'inconvenient que d'avantages. Enfin pour ta page qui fait 5 ko en CSS ce doit etre parce que tu a mis le css dans le xhtml et pas dans un fichier à part.

Je suis d'accord qu'a une certaine époque tout le monde ( peut-etre pas ) codait en tableaux ( j'en fait aussi partie ) mais maintenant, quant on commence un site il faut le faire suivant les normes actuelles, ce sont les plus étudié pour répondre au mieux aux besoins du Web...

Il y a surement des fautes veuillez m'en escuser.

Salut tout le monde, je voulais juste signaler un exercice sur le thème
css/tableau:
http://pompage.net/pompe/tablevscss/
and the winner is ... ( c' est sans surprise)
++

Donc, un forum ne devrait pas être mis en page à l'aide ed tableau .. Tient, mais si je visualise la source de cette bonne "vieille" V3, je vois que c'est bien le cas .. Que dire ?

L'affichage du forum se fait avec des tableaux étant donné que ce sont des données tabulaires

Je ne supporte pas qu'on fasse l'antonyme tableaux / CSS, ça n'a strictement rien à voir. Les tableaux sont une techniques (X)HTML et le CSS un langage à part. En faisant un site "en tableaux imbriqués" on peut très bien mettre du CSS.

Et l'expression "mon site est tout en CSS" est tout aussi débile, non ce n'est pas possible un site tout en CSS.

Bref bon article sur le fond à part ce que j'ai dit en premier, qui m'exaspère.

Citation : ApOpH!s

Je ne supporte pas qu'on fasse l'antonyme tableaux / CSS, ça n'a strictement rien à voir. Les tableaux sont une techniques (X)HTML et le CSS un langage à part. En faisant un site "en tableaux imbriqués" on peut très bien mettre du CSS.

Et l'expression "mon site est tout en CSS" est tout aussi débile, non ce n'est pas possible un site tout en CSS.

Bref bon article sur le fond à part ce que j'ai dit en premier, qui m'exaspère.

Je n'ai jamais dit le contraire : je parle ici de la mise en page et donc de la disposition d'éléments entre autres.
Bien entendu que les CSS et les tableaux peuvent être associés mais les tableaux doivent être correctement utilisés et ne doivent pas remplacer le CSS pour la mise en page d'un site web à part dans le cas de données tabulaires bien entendu...

Citation : Sorgue

Donc, un forum ne devrait pas être mis en page à l'aide ed tableau .. Tient, mais si je visualise la source de cette bonne "vieille" V3, je vois que c'est bien le cas .. Que dire ?

Euh tu veux le présenter comment un forum c'est des donnée tabulaire forcement on parle ici du menu / header / body / footer.
Sinon pour aphoph!s :

Non non plus on supporte pas que les gens mélanges le CSS / tableau le tableau pour la disposition des éléments non !

Le tableau pour des donnees ou des formes qui correspondent parfaitement au tableau ( forum ) oui !

Qui t'a dit que l'on ne pouvait pas utiliser le css avec les tableaux?

==>Arnaud¤

Et le CSS fait pas partie du poids totale de la page chargée?

Sinon ça doit être la même chose pour les includes je suppose puisqu'ils ne sont pas dans le code de la page.

Citation : -Exelo-

==>Arnaud¤

Et le CSS fait pas partie du poids totale de la page chargée?

Sinon ça doit être la même chose pour les includes je suppose puisqu'ils ne sont pas dans le code de la page.

Contrairement aux tableaux qui font partie intégrante du code (X)HTML et qui est téléchargé à chaque page, la feuille de styles CSS n'est téléchargé qu'une seule fois puis réutilisée. Le poids de l'(X)HTML étant moins lourd qu'une page basant sa structure sur les tableaux, le gain de poids se fait à ces niveaux là

Citation : -Exelo-

==>Arnaud¤

Et le CSS fait pas partie du poids totale de la page chargée?

Sinon ça doit être la même chose pour les includes je suppose puisqu'ils ne sont pas dans le code de la page.

Oui enfin si t'a mis 40 div pour un tableau de 2 lignes / 2 colones sa ce comprend...

Tu peux faire une mise en page avec tableau qui est aussi legere qu'avec des div
quelle est la difference de poids entre ces 2 balises <table> <div> ?

Citation : jp949

quelle est la difference de poids entre ces 2 balises <table> <div> ?

Le reste...
<tr> <th> <td>, les tableaux imbriqués, etc...
Et tu n'es pas obligé de mettre des <div> partout non plus en XHTML

a la place de td th tr tu mets p hn span fieldset etc... pour faire ta mise en page

Hu
Je ne suis pas certain que l'on ne parle de la même chose là...

fieldset -> formulaires. Que t'utilise les tableaux pour faire ton ossature de site ou autre chose tu en auras besoin si tu en souhaite.

hn, span ,etc -> de même. Utiliser les tableaux pour réaliser ton squelette de site et design ne vont pas t'empêcher de les utiliser, ce sont des balises courante et utile que tu ne va pas remplacer par des images...

tu n'as jamais utilisé les tableaux?
nul besoin de balises autres que <table> <tr> <td> et <form>.
la je parle que pour la question du poids, la semantique c'est un autre probleme et la les tableaux ne conviennent plus.

Raphael je vois que tu es sur le topic...
Je me pose une question existentielle :

Les background seront-ils un jours étirables (pour les design entierement graphiques) ?

En gros je fais un design pour une résolution 16oo/12oo et je mets ces images en background puis j'adapte les %age en fonction

Parce que quand je fait ca, ca tronque simplement l'image, ce qui est vraiment lourd quand une team de potes me demande d'utiliser son "méga-skin" pour le design de son site

Citation : benjii

Raphael je vois que tu es sur le topic...
Je me pose une question existentielle :

Les background seront-ils un jours étirables (pour les design entierement graphiques) ?

On peut y arriver, mais le résultat sera automatiquement et irrémédiablement très laid puisqu'une image n'est pas vectorielle mais bitmap

--> http://blog.alsacreations.com/2004/05/21/8-faire-un-arriere-plan-etirable

Suffit de savoir faire une découpe, si la largeur d'un menu est la meme partout, aucune image ne peut déborder
Et en fesant le design faut faire attentions aux mesures pour pouvoir les restranscrire facilement en % ...
Je suis persuadé que c'est possible, allez, je me lance