Mise en page sans tableau

Faire une mise en page avec deux ou trois colonnes peut se faire aisément sans tableaux. Diverses techniques sont possibles. On trouve sur le net une multitude de tutoriels de webdesign sur la mise en page fluide sans tableaux, à commencer par celui du W3C qui propose en outre une série de gabarits forts utiles.

Ce tutoriel ne tente pas donc de réinventer la poudre, mais simplement de présenter les atouts d'une mise en page full CSS par rapport à une mise en page par tableaux.

N'hésitez pas à nous faire part de votre avis sur cet article : 4 commentaires Donner une note à l'article (4.5)

Article lu   fois.

L'auteur

Site personnel

I. Mise en page en colonnes sans tableau

Fonctionne avec :
  • Firefox ;
  • IE 5.x et + ;
  • NS 6/7 ;
  • Mozilla 1.x / SeaMonkey ;
  • Opéra ;
  • Safari / Chrome.
Attributs utilisés :
  • clear ;
  • float ;
  • margin ;
  • text-align.

I-A. Pourquoi éviter la mise en page par tableaux ?

Il ne faut pas systématiquement diaboliser la mise en page par tableaux, mais disons qu'elle a "vécu". C'était une bonne méthode lorsque les navigateurs implémentaient mal les normes CSS 2.1 (aux temps préhistoriques -à l'échelle du web- de Netscape 4 et d'Explorer 5), mais maintenant...
Faire deux ou trois colonnes en CSS est relativement facile et le langage CSS est fait pour cela. Le code est plus facile à maintenir, cela offre plus de choix de mise en page sans modification du code HTML, et surtout c'est plus accessible.

Certes, on m'objectera qu'au delà de 3 colonnes, les choses se compliquent et qu'il y a quelques heures d'arrachage de cheveux pour arriver à faire quelque chose d'uniforme pour tous les navigateurs. Mais sauf cas très particulier, il n'y a pas besoin de faire plus de 3 colonnes. Alors en attendant que column (norme CSS3 (en)) soit implémenté par tous les navigateurs, faisons simple.

I-B. Comparaison de mises en page avec tableaux et avec les CSS

I-B-1. Avec tableaux

En règle générale, le webmestre qui réalise une mise en page avec tableau utilise aussi un logiciel WYSIWYG en lui faisant confiance. J'ai donc fait ce petit test avec l'interface WYSIWYG d'un logiciel très connu et voilà ce qu'il m'a donné pour une mise en page 2 colonnes (dont un menu à gauche de largeur de 150 pixels) encadrés d'un en-tête et d'un pied de page :

 
Sélectionnez

<table width="100%" border="0">
  <tr align="center" valign="top">
    <td colspan="2">En tête</td>
  </tr>
  <tr>
    <td width="150" valign="top">Menu</td>
    <td valign="top">Contenu</td>
  </tr>
  <tr align="center" valign="top">
    <td colspan="2">Pied de Page</td>
  </tr>
</table>
                    

Mouais... Le code généré est bourré d'attributs dépréciés, il est lourd, et tout ça sans aucune couleur, image de fond ou quoi que ce soit. Que ce soit directement en HTML ou par le biais du CSS, il faudra rajouter des attributs dans ce code pour coloriser tout ça, ce qui alourdira encore la lisibilité du code et le poids de la page.

Voir le tableau (agrémenté de quelques fioritures supplémentaires pour une meilleure visualisation).

I-B-2. Avec les CSS

Le principe est très simple : on divise chaque élément de la page par un div. La page se divise en quatre sections, chacune correspondant à une cellule de tableau précédemment illustré :

  • Un en-tête : div id="entete" ;
  • Un menu : div id="menu" ;
  • Le contenu : div id="contenu" ;
  • Un pied de page : div id="footer".

Et si vous avez loupé le tutoriel sur les sélecteurs class & id, il vaut mieux aller le voir de plus près avant de poursuivre...

 
Sélectionnez

<div id="entete">En tête</div>
<div id="menu">Menu</div>
<div id="contenu">Contenu</div>
<div id="footer">Pied de page</div>
                    

Le code est plus clair et sa maintenance plus aisée qu'avec les balises d'un tableau. Moins chargé, il est donc aussi plus léger. Et surtout, l'accessibilité est améliorée.

Codes CSS

Pour positionner différents div dans une page, on peut utiliser le positionnement absolu, relatif ou flottant. En matière de choix, chaque méthode a ses avantages et ses inconvénients, c'est surtout une histoire de goût et parfois de contraintes.

Ce dont il faut surtout se souvenir, c'est que la position absolute sort complétement du flux (c'est à dire de la lecture naturelle de haut en bas du code), ce qui offre un risque de chevauchement avec d'autres éléments mais lui confère une bonne « autonomie » de placement dans la page. Ce problème de chevauchement (de dépassement de flux) est aussi présent avec float, mais il est plus facilement maîtrisable, ou du moins contournable.

Ce code CSS est toujours, bien entendu, à enregistrer de préférence dans une feuille de style externe.

Menu à gauche flottant

En positionnant le menu à gauche, on suit la logique du flux, ce qui est préconisé pour l'accessibilité.

 
Sélectionnez

#entete, #footer {
  text-align:center;
}
#menu  {
  float:left;
}
#contenu {
  margin-left:155px;
}
                    

Menu à droite flottant

Mais on peut aussi positionner le menu à droite sans toucher au code HTML ! Ce qui est bien sûr impossible avec une mise en page par tableaux. Cela dit, la logique du flux n'est plus respectée (ce qui est placé en premier dans le code se trouve après un élément positionné à gauche de l'écran), ce qui est déconseillé par les normes accessiweb.

 
Sélectionnez

#entete, #footer {
  text-align:center;
}
#menu {
  float:right;
}
#contenu {
  margin-right:155px;
}
                    

Voir les résultats

Astuce : Pour éviter que le l'élément flottant (ici le menu) ne chevauche le pied de page en cas de hauteur supérieure de l'élément non flottant (ici le contenu), il suffit de rajouter clear:both à l'élément à ne pas chevaucher (ici le footer).

 
Sélectionnez

#footer {
  clear:both;
}
                    

Attention au DocType : Les déboires de rendu entre les différents navigateurs, notamment avec Internet Explorer, sont souvent dus à une mauvaise déclaration de DocType, ou à la présence du prologue XML qui fait basculer IE en mode "Quirks" (ce qui lui fait purement et simplement oublier les bonnes normes).
Si vous ne comprenez absolument rien à ce qui vient d'être dit ;-), une lecture s'impose : Les Types de Documents.

I-C. Lectures complémentaires

Liste de mes articles :
Principe des feuilles de style CSS - Commentez Donner une note à l'article (5)
Balises (X)HTML de base - 1 commentaire Donner une note à l'article (4.5)
Feuille de style CSS de base - Commentez Donner une note à l'article (3.5)
Mettre en forme un texte en CSS - Commentez Donner une note à l'article (4)
Gérer les marges en CSS - 5 commentaires Donner une note à l'article (4.5)
Résoudre les problèmes de marges en CSS - Commentez Donner une note à l'article (4)
Sélecteurs class et id - 3 commentaires Donner une note à l'article (5)
Mise en page full CSS - 4 commentaires Donner une note à l'article (4.5)
Bordures en CSS - 2 commentaires Donner une note à l'article (4.5)
Image de fond en CSS - 3 commentaires Donner une note à l'article (4.5)
Effets Rollover à l'aide de :hover - 2 commentaires Donner une note à l'article (4.5)
Aligner une image et du texte à l'aide de la propriété float - 1 commentaire Donner une note à l'article (4)
Listes à puces en image - 2 commentaires Donner une note à l'article (5)
Citations et retraits - Commentez Donner une note à l'article (4.5)
Concevez des boutons graphiques avec du CSS - 11 commentaires Donner une note à l'article (4.5)
Positionnez des images aux quatre coins d'une page web - 16 commentaires Donner une note à l'article (5)
Appliquez un effet de zoom sur une image avec les CSS - 1 commentaire Donner une note à l'article (4.5)
Zoomer une image façon thumbnail en CSS - 3 commentaires Donner une note à l'article (4.5)
Tableaux à bordures fines avec les CSS - 1 commentaire Donner une note à l'article (5)
  

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 02/07/2010 Pascale Lambert. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.