1. Page d'accueil
  2. Faire une mise en page sans tableaux

Construire un site sans tableaux

Le 27-02-2005 par Raphael dans Faire une mise en page sans tableaux.

Note : la partie pratique de ce tutoriel devient peu à peu obsolète. Elle a été remplacée depuis par un autre tutoriel Alsacréations : Réalisation d'un design complet (XHTML / CSS) en 5 étapes.
Ce nouveau tutoriel vous expliquera comment réaliser, étape par étape, un design complet en XHTML et CSS. Nous vous recommandons de suivre consciencieusement ce tutoriel mais auparavant, voici de quoi vous convaincre...

L'orientation des Standards W3C est claire : tous les attributs de taille, de position, de couleurs, d'alignement (width, height, align, font, color,...),... NE DOIVENT PAS figurer sur la page html, mais sur ce qui va gérer l'affichage, c'est à dire la feuille de style CSS.

Nous allons donc tenter de vous convaincre (s'il en est encore besoin de nos jours) de créer notre site proprement, intégralement en CSS (pas de tableaux pour l'affichage). Ce site sera respectueux des Standards du W3C, mais aussi de l'Accessibilité aux non-voyants, non-entendants, personnes présentant des handicaps divers (sensoriels, moteurs...).

A l'heure actuelle, la grande majorité des sites web sont construits grâce à l'utilisation de tableaux. Les tableaux, permettent en effet de structurer la page en plusieurs parties, et chaque partie peut contenir un menu, un entête, un contenu,...

Cependant, cette méthode quasi-universelle présente de nombreux désavantages :

  • l'imbrication multiple de tableaux est souvent nécessaire, même pour des design simples.
  • le nombre de balises (table, tr, td, colspan, rowspan...) devient vite considérable et alourdit le code, la lisibilité et donc la mise à jour
  • ce code très lourd augmente souvent inutilement le poids de la page et du chargement.

De plus, pour des questions d'Accessibilité (aux handicaps par exemple), il est recommandé d'utiliser chaque balise de façon sémantiquement correcte.
Un tableau est conçu initialement pour afficher des données... tabulaires (un forum, un calendrier, des résultats par exemple) et non pour faire la présentation de sa page.

N'hésitez pas à parcourir les nombreuses ressources expliquant les problèmes de la mise en page à l'aide de tableaux. Par exemple chez OpenWeb ou chez Cybercodeur.

Prérequis

Le full-CSS, ou Positionnement CSS est l'application stricte des recommandations des Standards du web actuels.
Le XHTML (et le HTML strict) est conçu pour faire une stricte séparation entre le Contenu et la Mise en page.

Il est nécessaire de connaître les bases des langages XHTML et CSS avant de vouloir vous précipiter dans un projet de conception sans tableaux. Prenez note que cela ne se fera pas tout seul et qu'un réel apprentissage, parfois long, est incontournable.

Voici des sources de cours en-ligne extrêmement riches et abordables aux débutants complets :

Précipitez-vous sur ces liens !

Avantages du positionnement CSS

  • Meilleure Accessibilité : aux navigateurs, aux moteurs de recherche, aux machines, aux personnes handicapées
  • Pérennité : le respect des Standards nous assure d'avoir un site compatible avec tous les futurs navigateurs
  • Mise à jour : la séparation Structure/Contenu permet une bonne lisibilité du code, mais aussi une mise à jour facilitée
  • Poids de page : chaque page HTML est réduite de 1/3 à 2/3

Ces différents avantages sont expliqués en détails au sein de cet article comparatif.

Les limites actuelles du positionnement CSS

Actuellement, les CSS (ou plutôt les navigateurs), ne permettent pas toutes les folies artistiques.

Il existe encore de rares cas (de plus en plus rares), pour lesquels les méthodes CSS ne sont pas encore assez bien implémentées par les navigateurs pour être efficaces ou aisément concevables. Parmi ces cas :

Actuellement, pour ces différents cas de figure, il est encore préférable d'employer un tableau bien conçu.

Pour plus d'info sur ce concept général :

La philosophie générale est celle-ci :on va essayer de raisonner différemment : pas en tableaux ou cellules, mais en terme d'"éléments" (titre, menu, entête, pied de page, etc.)

Et plus si affinités...

La technique du Positionnement CSS peut paraître rebutante au début pour les webmasters habitués à ne réfléchir qu'en termes de tableaux... mais les avantages des CSS deviennent très vite indéniables.

La preuve est qu'il est possible de modifier entièrement le design entier de la page, rien qu'en modifiant un attribut dans les CSS... imaginez le gain de temps pour des sites de quelques centaines de pages !

L'exemple le plus frappant en est le célébrissime site CSS Zengarden, véritable caméléon du Web puisqu'il lui est possible de revêtir des centaines de designs différents (styles CSS) tout en conservant exactement la même structure (HTML).

Pour finir, et c'est important de le souligner, le positionnement CSS permet de suivre l'évolution des standards du Web proposés par le W3C.

Note finale : pour aller plus loin dans le positionnement CSS, n'hésitez pas à suivre les explications sur le site de référence, OpenWeb. Vous trouverez également plusieurs articles et tutoriels sur Alsacréations. Les indispensables étant : Les Doctypes, comment choisir ?, La structure des balises XHTML et Comprendre le positionnement des éléments en CSS.

Enfin, n'oubliez pas non-plus les ressources nombreuses d'Alsacréations, et plus particulièrement sa page de gabarits XHTML/CSS prêts à l'emploi et sa Galerie de menus en CSS, sources d'inspiration.

Passons maintenant à la pratique...

Comme annoncé en introduction de cet article, le tutoriel pratique a été entièrement remis à jour. Vous le trouverez à l'adresse suivante : Réalisation d'un design complet (XHTML / CSS) en 5 étapes.
Bonne chance !

Un problème, une question ?

Vous avez des soucis avec ce tutoriel ? Venez en discuter dans le salon "Spécifique aux Tutoriels et articles" du Forum Alsacréations.