Les problèmes de la mise en page par tableaux

Openweb.eu.org > Articles  > Les problèmes de la mise en page par tableaux

Abstract

Pourquoi éviter les tableaux pour faire de la mise en page.

Article

Introduction

Originellement prévus dans le but de mettre en forme des données, les tableaux ont rapidement été détournés par les auteurs web pour combler un vide qui faisait cruellement défaut au HTML à l'époque : la mise en page.

En effet, dans ce qu'il convient d'appeller la préhistoire du web, point de CSS ni de séparation entre le contenu et la présentation. Les développeurs pensaient avoir trouvé la parade avec les tableaux, et ont donc commencé à utiliser massivement ces derniers pour du positionnement et autres mises en page complexes.

Nous allons voir dans cet article que les tableaux sont franchement inadaptés aux exigences d'aujourdhui, à cause de leurs limites notamment en termes d'accessiblité, de facilité d'utilisation et de maintenance.

Note : —

Il est important de noter qu'il ne faut pas bannir les tableaux pour autant. Ils remplissent parfaitement leur rôle quand il s'agit de structurer des données. Voir à ce sujet l'article intitulé Habillage des tableaux en CSS.

Quels sont les problèmes ?

L'affichage des tableaux se fait lentement

Un tableau est un élément beaucoup plus complexe à gérer qu'il n'y paraît pour les navigateurs. Pour placer correctement le tableau, celui ci a en effet besoin d'un maximum d'informations, et se fonde sur un certain nombre de règles déterminant la taille de chaque cellule et ligne de celui-ci. Tout ceci implique un coût en ressources et en temps non-négligeables (le tableau ne sera convenablement placé qu'une fois toutes les cellules traitées).

L'utilisation de tableaux imbriqués empire la situation, sur des machines avec peu de RAM ou avec des vieux navigateurs, c'est le plantage assuré. Même sur des machines plus puissantes, des tableaux imbriqués sont souvent synonymes de charge cpu intensive pendant quelques secondes…

Les tableaux nuisent à l'accessiblité

Le fait de travailler ligne par ligne est très pratique dans le cas de données, mais il devient un vrai problème lorsqu'il s'agit d'autre chose. Un navigateur non-graphique ou un lecteur d'écran ne pourra pas deviner l'ordre dans lequel vous vouliez que le contenu apparaisse.

Il sera obligé de fonctionner ligne par ligne, dans l'ordre du tableau. Dans bien des cas, cela signifie que la page est complètement illisible. Faites l'expérience : lisez le contenu de votre page HTML dans l'ordre et à haute voix. Cela vous paraît-il facilement utilisable ?

Le Web n'est pas seulement utilisé par des internautes disposant de grands écrans couleurs sur lesquels des navigateurs graphiques affichent les pages. Au contraire : la multiplication des assistants numériques connectés et des téléphones mobiles intelligents ne fait que confirmer cet état de fait. Par ailleurs, il ne faut pas oublier l'existence de navigateurs spécialisés pour les handicapés, avec plage Braille ou synthétiseur vocal, qui ne peuvent pas restituer les informations graphiques.

Les tableaux nuisent à l'impression

Suite logique du point précédent : l'impression. De nombreux developpeurs, en écrivant leurs pages, utilisent des tableaux en fixant les tailles un peu partout pour que cela soit consultable avec un navigateur graphique. Ils oublient qu'une page, on peut aussi vouloir l'imprimer ! Et là, les tableaux montrent leur limites : changer complètement le design d'une page pour permettre une meilleure impression est impossible ce qui amène souvent à faire une page separée pour l'impression, et avec les coûts associés à sa création et à sa maintenance, se transforme en un gâchis d'énergie et de ressources considérables.

Les tableaux sont complexes et coûteux à produire

Que ce soit avec un éditeur WYSIWYG ou à la main, écrire des tableaux est compliqué et problématique dès lors que l'on veut en changer une partie. Un éditeur graphique peut cacher cela à l'utilisateur, mais bien souvent au prix d'un code alourdi et d'une demande en puissance toujours plus forte.

Les tableaux alourdissent les pages

Généralement, l'emploi de tableaux implique d'utiliser beaucoup de balises pour peu de contenu. Ceci cause un alourdissement conséquent des pages, qui peut-être évité avec l'utilisation des CSS. A titre d'exemple, voici les tailles des fichiers de debian-fr, avant et après sa conversion par Laurent Jouanneau :

L'exemple de debian-fr
Version Taille du fichier CSS Taille du fichier HTML
Ancienne (avec tableaux) 5.2 ko 10.7 ko
Nouvelle (sans tableaux) 3.9 ko 5.5 ko

Notez que cette nouvelle version inclut un logo en ascii-art, caché par un visibility: hidden. Ce logo était présent dans une version spéciale de la page précédente, envoyée lorsque le serveur détectait Lynx. Ceci est clairement à éviter pour des questions d'accessibilité. (Essayez en lisant chaque caractere un à un à haute voix, comme le ferait un lecteur d'ecran vocal pour comprendre) mais Laurent a choisi de le conserver à des fins de démonstration.

Conclusion

Qu'on se le dise : les tableaux n'ont pas été créés pour faire de la mise en page. Les utiliser dans cette optique — tout particulièrement dans le cas de tableaux imbriqués — revient à alourdir considérablement la taille des fichiers, allonger le temps de développement (plus de code, plus long à tester, changements complexes) et nuit gravement à l'accessibilité et l'impression.

Par quoi les remplacer alors ? les CSS bien sûr ! Vous trouverez à la fin de cet article quantité de liens pour vous aider dans cette démarche.

Compléments

À propos de cet article

  • Openweb.eu.org
  • Profil : Débutant, Expert
  • Technologie : (X)HTML
  • Thème : Mise en page
  • Auteur :
  • Publié le :
  • Mise à jour : 7 janvier 2011

Répondre à cet article

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici
  • Ce formulaire accepte les raccourcis SPIP [->url] {{gras}} {italique} <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Suivre les commentaires : RSS 2.0 | Atom