Résumé et status
Le mésusage de tableaux en HTML à des fins de mise en page a été pointée du doigt de nombreuses fois. Cette page décrit une solution pour créer une mise en page en 2 colonnes utilisant uniquement les feuilles de style CSS.
Merci d'envoyer vos commentaires et suggestions à Dominique Hazaël-Massieux. La version anglaise est la version originale et maintenue de ce document, d'où d'autres traductions sont liées.
Introduction
HTML est un langage structurel, c'est-à-dire qu'il est (ou du moins devrait être) utilisé pour ajouter de la structure à un texte par le biais de balises. La balise table devrait ainsi n'être utilisée que pour formatter des données en tableau, reliant colonnes et lignes.
Mais depuis l'apparation des tableaux en HTML, ces derniers ont été très souvent utilisés à des fins de mise en page, en général pour diviser une page en colonnes. Outre le fait que cela va à l'encontre de la sémantique du HTML, cela pose d'autres problèmes résidant principalement dans la difficulté de lire ou d'afficher le code des tableaux dans certains contextes (problèmes d'accessibilité, limite des dimensions des navigateurs, ...).
Ce document décrit une solution pour créer une mise en page à 3 colonnes et contient des liens vers d'autres techniques de mise en page sans tableaux.
Description de la mise en page
La technique décrite ci-dessous est utilisée dans la page pour les nouveaux visiteurs du site du W3C et permet de construite une mise en page à 3 colonnes, avec les caractéristiques suivantes :
- le texte au centre de la page est celle qui vient en première place dans le code, ce qui implique que c'est la première visible dans les navigateurs n'implémentant pas CSS2 ou pour les navigateurs non visuels
- les colonnes de gauche et de droite suivent dans cet ordre
Cette mise en page est particulièrement adaptée pour les pages d'accueil, en ce qu'elle permet d'avoir un texte complet au centre et les listes de liens sur les côtés.
Il faut toute fois noter qu'elle ne marche pas dans les implémentations ayant un support CSS trop peu conforme à la specification, mais s'adapte sous la forme d'une mise en page verticale.
Cette même page utilise cette technique, pour donner une idée du résultat produit.
Implémentation
Cette mise en page utilise le positionnement absolu CSS. Soient 3 sections définies en HTML par
<div id="main">, <div
id="list1" class="link-list">, <div id="list2" class="link-list"> ; appliquons leur les règles CSS suivantes:
/* Propriété en commun pour les listes latérales */
div.link-list {
width:10.2em;
position:absolute;
top:0;
font-size:80%;
padding-left:1%;
padding-right:1%;
margin-left:0;
margin-right:0;
}
/* En utilisant les propriété de marge, nous laissons la place sur les côtés */
#main {
margin-left:10.2em;
margin-right:10.2em;
padding-left:1em;
padding-right:1em;
}
/* Puis nous placons chaque list à sa place */
#list1 {
left:0;
}
#list2 {
right:0;
}
L'idée est de rogner la section principale sur les côtes en utilisant les propriétés margin-left et margin-right, et ensuite de positionner les codes latérales en utilisant le positionnement absolu (position:absolute) et en fixant les coins supérieurs respectivement gauche et droite aux coordonnées (0,0).
Pour éviter ques les implémentations incapables d'interpréter correctement cette feuille de style, nous l'appelons via <style type="text/css">@import url('url-de-la-feuille-de-style.css');</style>.