display: table et display: table-cell pour faire une mise en page web ?

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

display: table et display: table-cell pour faire une mise en page web ?

Après la lecture du livre CSS avancées — Vers CSS3 et HTML5, je me suis amusé avec les propriétés de rendu en tableau avec CSS (à partir de la page 122 pour ceux qui ont l’ouvrage sous les yeux). Pour m’entrainer à utiliser ces nouvelles propriétés comprises par tous les navigateurs modernes et à partir de IE8 pour Internet Explorer, je me suis fixé comme objectif de réaliser une mise en page du type de ce que l’on fait généralement à base de float: left et de margin-right pour obtenir des colonnes séparées par des gouttières. Bref, du classique de chez classique.

Sauf qu’il semble à première vue que la propriété border-spacing  (associée à border-collapse: separate) fait uniquement ce qu’elle est censée faire : un espace autour des blocs auxquels on a appliqué display: table-cell, soit en haut et en bas soit à droite et à gauche de tous les blocs selon qu’on applique une ou plusieurs valeurs, comme border-spacing: 0 20px ou border-spacing: 20px 0.

Mise en page avec border-spacing

#main {
    display: table;
    border-collapse: separate;
    border-spacing: 20px 0;
    border: 1px solid grey;
    width: 100%;
}
#primary {
    display: table-cell;
    background: red;
}
#secondary {
    display: table-cell;
    width: 30%;
    background: green;
}
Ce qui n’arrange pas mes affaires, car je voudrais uniquement une marge à la droite du premier bloc en display: table-cell pour repousser le second de la largeur d’une gouttière de 20px, par exemple.

Maquette avec border

Bref, après quelques tâtonnements, je suis en partie parvenu à un résultat partiellement satisfaisant en utilisant une bordure et en lui donnant la même couleur que le fond et la largeur de la gouttière que je voulais :

#main {
    display: table;
    border: 1px solid grey;
    width: 100%;
}
#primary {
    display: table-cell;
    background: red;
    border: 20px solid white;
    border-width: 0 20px 0 0;
}
#secondary {
    display: table-cell;
    width: 30%;
    background: green;
}

En bref

Je n’exclu pas le fait d’être passé à côté d’une propriété, mais il semble que la mise en page à base de display: table et display: table-cell ne soit pas aussi évidente qu’on aurait pu le croire de prime abord, même en faisant son deuil des versions antérieures à IE8. Dans les faits, border-spacing ne semble pas s’appliquer uniquement aux bordures adjacentes.

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



8 commentaires pour “display: table et display: table-cell pour faire une mise en page web ?”

  1. Anonyme dit :

    Je pense que c’est une fausse bonne idée de tenter de reproduire des grilles de mise en page en table-layout (on va vite retomber dans les travers des tables HTML imbriquées). Le Grid Layout CSS3 est bien mieux pensé pour ce genre de projets. Il me paraît préférable de réserver les table layout au cas par cas pour des besoins de centrage vertical, de cellules contiguës, de positionnements simples ou pour un gabarit général mais sans entrer dans des grilles complexes.

    • br1o dit :

      Yep, on dirait bien ;) Par contre, en prenant les choses sous un angle plus global, du genre : mettre le #container en display: table et les colonnes en display: table-cell, je pense qu’il y a moyen de s’en sortir à condition de gérer le border-spacing: 20px au niveau global avec la marge externe du container identique à la largeur des gouttières entre les colonnes, un peu à la manière de 960.gs et ses marges droites et gauches.

      Mais oui, j’ai quand même l’impression de me retrouver en 1998 avec les tableaux et tout et tout ;))

  2. Anonyme dit :

    Au fait, maintenant que j’y pense, il se trouve que les grilles telles que 960.gs affichent aussi des gouttières à gauche et à droite du conteneur global : http://960.gs/demo.html ;)

    • br1o dit :

      Oui et c’est bien pour ça que je préfère Blueprint et que je me suis amusé à mixer mes trois frameworks CSS préférés : http://css4design.com/frameworks-css-fusion-blueprint-960-gs-the-simpler-grid

      Mais sinon, si l’on met le body en display: table, avec les border-spacing qui vont bien, on arrive à faire quelque chose de sympa. La question est de savoir si on met toute la structure en « table » ou seulement une partie. Je fais quelques recherches ici : http://css4design.com/exemples/display-table/ pour voir comment tout ce beau monde se comporte ;)

      • Anonyme dit :

        A vrai dire, rien ne te force à utiliser uniquement des tableaux si tu déclares ton body en table : tu peux te contenter de laisser tout le monde en bloc (ou autre) et uniquement l’un des éléments en table-cell (ou autre). Petit exemple rigolo : – body en table – plein de contenu classique en bloc – le header en display:table-caption et un caption-side: bottom

        :)

  3. boby tables dit :

    Autant utiliser des vrais tables non ? Utiliser ces trucs en CSS me semble bien pire que d’utiliser des tables directement.

  4. email to fax dit :

    Bonjour,

    Comment adapte ce code en reponsive?

    Merci

  5. link@ dit :

    Bonjour, j’apprécie beaucoup que les webmasters partagent leurs expériences, et c’est vrai que les tables font partie du béabas pour créer des sites web. Moi je préfère utiliser les tables que le css… mais questions de gout après…



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site