L’objectif

Dans le chapitre précédent nous avons présenté la mise en page avec les techniques des boîtes flottantes et des boîtes en position relative et absolue, et évalué les inconvénients qui en résultaient. Dans ce chapitre nous allons voir une des techniques actuellement les plus en vogue : l’utilisation de tableaux ! Non ne nous croyez pas revenus il y a vingt ans quand les sites web étaient mis en page avec des tableaux HTML. Nous allons ici utiliser un affichage en tableau, avec la propriété display: table et les autres valeurs associées. Cette propriété fait partie des CSS 2.1. Cette technique permet des mises en page efficaces et rapides à mettre en place, sans les inconvénients évoqués dans le chapitre précédent.

La propriété display

La propriété display fait partie intégrante de la norme du W3C des CSS 2.1 : http://www.w3.org/TR/CSS21/visuren.html#propdef-display

En ce qui concerne la compatibilité des navigateurs, seules les versions 6 et 7 d’Internet Explorer ne reconnaissent pas les valeurs tabulaires de la propriété display.

Voyons la compatibilité avec les navigateurs sur le site de Can I use : http://caniuse.com/#feat=css-table

Pour la mise en page en tableau de nos pages web, nous allons utiliser plusieurs valeurs de la propriété display.

Voilà les valeurs utilisables :

table,
inline-table,
table-row,
table-row-group,
table-header-group,
table-footer-group,
table-column,
table-column-group,
table-cell,
table-caption.

Voyons l’utilisation de chacune de ces valeurs.

La valeur display: table permet un affichage de type tableau pour l’élément qui utilise cette propriété. L’affichage se fait dans un bloc qui n’occupe que la largeur du contenu.

La valeur display: inline-table permet un affichage du tableau de type en ligne. L’élément sera donc inclus dans la ligne où il est situé.

La valeur display: table-row permet un affichage de type ligne de tableau. Cela va donc afficher des rangées, les lignes du tableau.

La valeur display: table-row-group permet de regrouper une ou plusieurs lignes du tableau....

Une mise en page simple avec un tableau

Voyons maintenant un affichage en tableau très simple, avec deux cellules. Voici la structure HTML :


<!DOCTYPE html> 
<html lang="fr"> 
<head> 
    <title>Ma mise en page</title> 
    <meta charset="UTF-8" /> 
    <style> 
        #tableau { 
            display: table; 
        } 
        .cellule1, .cellule2 { 
            display: table-cell; 
        } 
        .cellule1 { 
            background-color: lightgreen; 
        } 
        .cellule2 { 
            background-color: lightblue; 
        } 
    </style> 
</head> 
<body> 
<div id="tableau"> 
    <div class="cellule1"> 
        <p>Prima luce, cum quibus mons aliud consensu ab eo.</p> 
    </div> 
    <div class="cellule2"> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisici elit.</p> ...

La largeur d’affichage du tableau

Voici l’affichage résultant de l’exemple précédent :

Les cellules affichent la totalité de leur contenu. Dans cet exemple le contenu dans les paragraphes est peu important, l’affichage du texte est complet et les cellules ne sont pas très larges. Voyons maintenant ce qui se passe si nous augmentons la quantité de texte. Voilà l’affichage obtenu :

Le tableau occupe la totalité de la largeur disponible dans la fenêtre du navigateur et les cellules occupent aussi la totalité de la place disponible de leur élément parent : le tableau, pour afficher la totalité de leur contenu. Mais surtout, vous remarquez que par défaut la hauteur des cellules est équilibrée, quelle que soit la largeur de la fenêtre du navigateur. C’est une particularité du rendu de table-cell.

Vous retrouvez cet exemple dans le fichier à télécharger Chapitre-04/table-02.html.

Les éléments anonymes

Voyons une autre particularité de l’affichage tabulaire. Dans cet exemple, nous n’avons pas défini de ligne, table-row. Dans ce cas les navigateurs créent automatiquement les éléments manquants à une structure complète. Il en serait de même si nous n’avions pas défini de tableau avec table, ce dernier serait créé par les navigateurs. Avec l’exemple précédent, le fait de supprimer la boîte <div id="tableau">, n’aurait aucune incidence sur la validité de la syntaxe et sur l’affichage.

C’est donc à vous de déterminer quels sont les éléments nécessaires à la bonne structuration de l’affichage de votre tableau, en fonction du type de mise en page que vous souhaitez faire. Je vous conseille d’insérer un élément avec un display: table, c’est toujours mieux d’avoir une structure minimale.

D’autres éléments pour les tableaux

1. Les paragraphes en cellule

Dans les exemples précédents, nous utilisons des boîtes <div> pour créer le tableau et les cellules. Pour simplifier la structure, vous pouvez utiliser n’importe quel autre élément pour créer les cellules, un paragraphe <p> par exemple.


<!DOCTYPE html> 
<html lang="fr"> 
<head> 
    <title>Ma mise en page</title> 
    <meta charset="UTF-8" /> 
    <style> 
        #tableau { 
            display: table; 
        } 
        .cellule1, .cellule2 { 
            display: table-cell; 
        } 
        .cellule1 { 
            background-color: lightgreen; 
        } 
        .cellule2 { 
            background-color: lightblue; 
        } 
    </style> 
</head> 
<body> 
<div id="tableau"> 
    <p class="cellule1">Prima luce...</p> 
    <p...

L’affichage des lignes

Créons maintenant un tableau avec des lignes, à l’aide de la propriété display: table-row. Voici le code utilisé :


<!DOCTYPE html> 
<html lang="fr"> 
<head> 
    <title>Ma mise en page</title> 
    <meta charset="UTF-8" /> 
    <style> 
        #tableau { 
            display: table; 
        } 
        .ligne1, .ligne2 { 
            display: table-row; 
        } 
        .ligne1 { 
            background-color: lightgreen; 
        } 
        .ligne2 { 
            background-color: lightblue; 
        } 
    </style> 
</head> 
<body> 
<div id="tableau"> 
    <div class="ligne1"> 
        <p>Prima luce...</p> 
    </div> 
    <div class="ligne2"> 
        <p>Lorem ipsum dolor sit amet...</p> 
    </div> ...

Définir la largeur des cellules

1. Les largeurs fixes

Dans les exemples précédents nous n’avions pas défini la largeur du tableau, ni celle des cellules. Tous les éléments occupaient alors la place disponible dans leurs éléments parents.

Maintenant nous pouvons parfaitement définir la largeur du tableau et des cellules.

Si vous ne définissez que la largeur du tableau (#tableau {display: table; width: 800px;}), les cellules utiliseront une largeur calculée pour afficher leur contenu de manière répartie.

Voici l’affichage :

Vous retrouvez cet exemple dans le fichier à télécharger Chapitre-04/table-06.html.

Si vous définissez des largeurs aux cellules plus petites ou plus grandes que celle du tableau, c’est la largeur du tableau qui sera utilisée pour l’affichage.

Par contre si vous ne définissez pas de largeur au tableau et que vous spécifiez une largeur aux cellules (width: 500px; pour la première et width: 300px; pour la deuxième), c’est bien sûr ces largeurs qui seront utilisées pour l’affichage.

Vous retrouvez cet exemple dans le fichier à télécharger Chapitre-04/table-07.html.

Vous pouvez aussi ne définir qu’une seule largeur fixe. Dans cet exemple, seule la première cellule a une largeur définie à 500 pixels...

Une mise en page avec un tableau plus structuré

Voyons maintenant un tableau plus structuré avec un en-tête et un pied de page. Nous ajoutons un en-tête avec la propriété display: table-header-group; et un pied de tableau avec la propriété display: table-footer-group;. Voici le code utilisé :


<!DOCTYPE html> 
<html lang="fr"> 
<head> 
    <title>Ma mise en page</title> 
    <meta charset="UTF-8" /> 
    <style> 
        #tableau { 
            display: table; 
        } 
        #tete { 
            display: table-header-group; 
            background-color: lightyellow; 
        } 
        #pied { 
            display: table-footer-group; 
            background-color: lightyellow; 
        } 
        .cellule1, .cellule2 { 
            display: table-cell; 
        } 
        .cellule1 { 
            width: 500px; ...

Les autres propriétés d’affichage

Voyons des propriétés spécifiques à l’affichage en mode tableau qui ont une influence directe sur le rendu dans le navigateur.

1. La propriété table-layout

La propriété table-layout détermine comment va se calculer la largeur des cellules d’un tableau ayant une largeur fixée. Cette propriété accepte deux valeurs :

table-layout: auto : c’est la valeur par défaut. Dans ce cas la largeur des cellules est calculée pour que la cellule ayant le plus de contenu serve de base pour le calcul des hauteurs des cellules, de sorte à ce que la hauteur soit similaire entre toutes les cellules.
table-layout: fixed : dans ce cas les largeurs des cellules sont égales et leur addition égale la largeur fixée du tableau. La hauteur des cellules est déterminée par celle qui contient le plus de texte.

Voici les propriétés du tableau pour le premier exemple :


#tableau { 
    display: table; 
    width: 800px; 
    table-layout: auto; 
}

Voici l’affichage obtenu :

Vous retrouvez cet exemple dans le fichier à télécharger Chapitre-04/table-11.html.

Voici les propriétés du tableau pour le deuxième exemple :


#tableau { 
    display: table; 
    width: 800px; 
    table-layout: fixed; 
}

Voici l’affichage obtenu :

Vous retrouvez cet exemple dans le fichier à télécharger Chapitre-04/table-12.html.

2. La propriété border-collapse

Vous pouvez bien sûr appliquer des bordures à votre tableau ou à vos cellules de tableau. Si toutes les cellules du tableau ont des bordures, il ne sera pas nécessaire d’en appliquer au tableau. Par défaut, les bordures des cellules s’appliquent à chaque cellule individuellement. Cela veut dire que les bordures de chaque cellule sont visibles.

Voici le code qui est utilisé pour cet exemple, un tableau avec deux lignes et deux cellules dans chacune des lignes.


<!DOCTYPE html> 
<html lang="fr"> 
<head> 
    <Title>Ma mise en page</title> 
    <meta charset="UTF-8" /> 
  ...

L’alignement vertical

L’alignement vertical dans les boîtes <div> a toujours été un "problème" pour les intégrateurs web. Avec la mise en page en mode tableau, la propriété vertical-align définie au niveau des cellules est native. Elle permet donc de centrer un contenu dans une cellule.

Voyons ce simple exemple :


<!DOCTYPE html> 
<html lang="fr"> 
<head> 
    <Title>Ma mise en page</title> 
    <meta charset="UTF-8" /> 
    <style> 
        #tableau { 
            display: table; 
        } 
        .cellule1, .cellule2 { 
            display: table-cell; 
            height: 200px; 
            vertical-align: middle; 
        } 
        .cellule1 { 
            background-color: lightgreen; 
        } 
        .cellule2 { 
            background-color: lightblue; 
        } 
    </style> 
</head> 
<body> 
<div...

Conclusion

La mise en page en mode tableau avec la propriété display et toutes ces valeurs apporte un vrai plus au concepteur.

Voyons quelques-uns de ces avantages :

La hauteur des cellules est toujours identique. En d’autres termes plus techniques, la hauteur des frères est toujours identique. Avec les autres méthodes la hauteur des "cellules" dépend systématiquement de la quantité de contenu qu’elles contiennent. Avec les tableaux de mise en page nous n’avons plus à nous préoccuper de ce problème.
L’alignement vertical est géré nativement par la propriété vertical-align. Là encore pas de soucis pour appliquer très facilement un centrage vertical d’un élément dans une cellule !
Pas de problème de hauteur différente entre les cellules avec un fond coloré. Puisque la hauteur des cellules est toujours identique, il n’y a pas de problème d’affichage des fonds colorés des cellules.
Pas de problème pour gérer les bordures que d’un côté pour les cellules ayant des contenus différents, puisque la hauteur des cellules est toujours identique ! Là aussi un vrai plus pour les intégrateurs web.
Vous pouvez utiliser des unités différentes, fixes en pixel et relatives en pourcentage, pour gérer...

La mise en page à l'aide des tableaux