Tableaux vs CSS : une question de mise en page...

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 mise 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.

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. (cf. 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 leur utilisation pour une mise en page.

- Une meilleure accessibilité. Les tableaux imbriqués ne permettent pas à des navigateurs spécialisés (tablette braille, 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 CSS é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 !

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.

Même si les tableaux sont parfois jugés plus simples et plus pratiques pour la mise en page, il n'en est rien. Ce ne sont que des a priori infondés : croyez-en mon expérience.
Pour ma part, j'ai codé des dizaines de designs uniquement en xHTML/CSS et je n'ai jamais eu de problèmes. Il suffit juste de connaître certaines techniques qui s'acquièrent avec l'expérience pour uniformiser l'affichage sur tous les navigateurs, qu'ils soient récents ou pas.