Dernière mise à jour le 23 octobre 2022
La propriété display:table permet d'afficher un élément HTML comme s'il s'agissait d'un tableau.
On parle ici de la "propriété" display:table, tout en sachant que pour être rigoureux on devrait dire la valeur "table" de la propriété "display".
display:table est surtout utilisé sur des éléments div :
<div style="display: table;">
<!-- il manque les rangées et les cellules -->
</div>
Deux autres valeurs possibles de la propriété display permettent de représenter les rangées (table-row) et les cellules (table-cell).
L'exemple suivant montre comment il est possible de réaliser un "faux" tableau uniquement avec des div :
<style>
.tableau {
display: table;
}
.rangee {
display: table-row;
}
.cellule {
display: table-cell;
padding: 50px;
background-color: powderblue;
border: solid black 1px;
}
</style>
...
<div class="tableau">
<div class="rangee">
<div class="cellule">gauche</div>
<div class="cellule">droite</div>
</div>
</div>
Notez que, si le faux tableau n'a qu'une seule rangée, l'utilisation d'un conteneur avec la propriété display:table-row n'est pas nécessaire.
Bien sûr il n'y a aucun avantage à utiliser des div pour construire un tableau si le but est seulement de présenter des données sous forme tabulaire, puisqu'il existe déjà l'élément table.
Le réel bénéfice de la propriété display:table est la possibilité de réaliser facilement une mise en page en colonnes.
Dans l'exemple suivant, les div et la propriété display:table sont mis à profit pour créer une page Web classique avec en-tête, pied de page et partie centrale sur trois colonnes.
<style>
#entete {
padding: 20px;
background-color: #ccf;
text-align: center;
}
#conteneur {
display: table;
}
#gauche {
display: table-cell;
width: 20vw;
padding: 20px;
background-color: #fcc;
}
#centre {
display: table-cell;
width: 60vw;
padding: 20px;
background-color: #fff;
}
#droite {
display: table-cell;
width: 20vw;
padding: 20px;
background-color: #ffc;
}
#pieddepage {
padding: 20px;
background-color: #cff;
text-align: center;
}
</style>
</head>
<body>
<div id="entete">
En-tête
</div>
<div id="conteneur">
<div id="gauche">
Barre latérale gauche
</div>
<div id="centre">
Contenu
</div>
<div id="droite">
Barre latérale droite
</div>
</div>
<div id="pieddepage">
Pied de page
</div>
</body>
</html>
Nous avons vu comment il est possible de créer un tableau sans faire appel à l'élément table.
Nous venons de voir aussi comment on peut créer une mise en page sur plusieurs colonnes avec en-tête et pied de page uniquement avec des div.
La faiblesse de cette approche est que l'élément div n'est qu'un conteneur et n'est pas un élément sémantique.
Pour un logiciel qui manipule un document HTML, rien ne garantit que le premier élément rencontré est un en-tête ou que le n-ème élément est le contenu principal.
Il est hautement préférable d'utiliser des éléments structurants comme header, nav, main, section, etc.
L'utilisation de la propriété display:table nous permettra alors quand même de créer une mise en page en colonnes, tout en préservant le sens de chacun des éléments.
<main style="display: table;">
<aside style="display: table-cell; width: 25vw; ... <!-- barre latérale -->
<section style="display: table-cell; width: 75vw; ... <!-- contenu -->
...