L'orientation des Standards W3C est claire : tous les attributs de taille, de position, de couleurs, d'alignement (align, font, color, bgcolor,...) ne doivent pas figurer dans le code source HTML, mais dans celui qui va gérer l'affichage, c'est à dire la feuille de style CSS.
Créer votre site proprement, intégralement en CSS (pas de tableaux pour l'affichage) en fera un site respectueux des standards du web, mais aussi dans une certaine mesure de l'accessibilité aux non-voyants, non-entendants, personnes présentant des handicaps divers (sensoriels, moteurs...). Sans compter les bénéfices indirects en terme de rapidité de chargement et de référencement.
La méthode exploitant des tableaux avec l'élément <table> 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 (une tableau de contacts, un forum, un calendrier, des résultats de recherche par exemple) et non pour faire la présentation de la 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.
Le positionnement des éléments avec CSS
Le positionnement via CSS est l'application stricte des recommandations actuelles. De son côté HTML est conçu pour profiter d'une stricte séparation entre le contenu (textes et images) et la mise en page. La feuille de style va régir l'apparence des éléments HTML, leurs dimensions, leurs couleurs, et leur emplacement dans le document. Il est nécessaire de connaître les bases des langages HTML 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 :
- http://normandlamoureux.com/cours/xhtml/
- http://www.tuteurs.ens.fr/internet/web/html/bases.html
- http://www.tuteurs.ens.fr/internet/web/html/css.html
- http://css.mammouthland.net/
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. 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 !
- Poids de page : chaque page HTML est réduite de 1/3 à 2/3
Les astuces du positionnement CSS
Les folies artistiques nécessitent parfois de faire appel à quelques techniques avancées de positionnement ou des astuces particulières. Par exemple :
- faire des "colonnes" de même hauteur
- le positionnement et/ou le centrage vertical des éléments
- faire une mise en page de 100% de hauteur avec des parties fixes (en-tête, par ex)
Pour ces différents cas de figure, il parfois presque préférable d'employer un tableau bien conçu.
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 découvrir plus en avant ces techniques, consultez aussi La structure des balises XHTML et Comprendre le positionnement des éléments en CSS.