Le modèle tabulaire en CSS

Le modèle de construction tabulaire (HTML et CSS) compte sans aucun doute parmi les plus fascinants qui soient, après avoir été d'abord adulé puis banni vigoureusement par les intégrateurs de tous poils.

En 1998, les spécifications CSS2 étendent les historiques valeurs de la propriété display et proposent depuis belle lurette des possibilités de rendus et positionnements “tabulaires” sans pour autant interférer dans la sémantique et le bon usage des éléments HTML.

Passons immédiatement à table et découvrons en détail le monde mal connu du Modèle Tabulaire en CSS…

Note : Cet article est publié conjointement sur OpenWeb.eu.org et sur Alsacreations.com. En outre, certaines parties de cet article sont extraites du livre “CSS avancées, vers HTML5 et CSS3”, avec l’aimable autorisation de l’auteur :)

Compatibilité

Commençons par une excellente nouvelle : le modèle de rendu tabulaire en CSS est finalisé depuis suffisamment longtemps pour être compatible avec tous les navigateurs actuels et leurs générations précédentes. Il faut remonter aux antiques versions d’Internet Explorer 7 et précédentes pour trouver des navigateurs qui ne supportent pas ce schéma de positionnement.

Tableau des compatibilités

Navigateurs	Versions	Détails
	Internet Explorer 8+	Les propriétés table-layout et border-collapse sont reconnues depuis IE5
	Firefox Firefox Mobile	Toutes versions
	Chrome Chrome Mobile	Toutes versions
	Opera Opera Mobile	Toutes versions
	Safari Safari Mobile	Toutes versions
	Android Browser	Toutes versions

Display

Depuis les spécifications CSS2, pas moins de 10 valeurs dédiées aux rendus tabulaires ont été ajoutées à la propriété display.

Vous connaissiez sans nul doute déjà les valeurs block, inline, none et inline-block, en voici de nouvelles dans notre arsenal à présent bien complet :

table

Spécifie un comportement de table de type bloc pour un élément C’est le rendu par défaut des éléments <table> HTML

inline-table

Spécifie un comportement de table de type en-ligne pour un élément.

table-row

Spécifie que l'élément s’affiche comme une rangée de cellules. C’est le rendu par défaut des éléments <tr> HTML

table-row-group

Spécifie qu'un élément regroupe une ou plusieurs rangées. C’est le rendu par défaut des éléments <tbody> HTML

table-header-group

S’affiche comme table-row-group, mais ce groupe de rangées est toujours affiché avant toutes les autres rangées et groupes de rangées. C’est le rendu par défaut des éléments <thead> HTML

table-footer-group

S’affiche comme table-row-group, mais ce groupe de rangées est toujours affiché après toutes les autres rangées et groupes de rangées. C’est le rendu par défaut des éléments <tfoot> HTML

table-column

Spécifie qu'un élément représente une colonne de cellules. C’est le rendu par défaut des éléments <col> HTML

table-column-group

Spécifie qu'un élément regroupe une ou plusieurs colonnes. C’est le rendu par défaut des éléments <colgroup> HTML

table-cell

Spécifie qu'un élément doit s’afficher tel une cellule de table. C’est le rendu par défaut des éléments <th> et <td> HTML

table-caption

Spécifie le rendu d’une légende d'une table. C’est le rendu par défaut des éléments <caption> HTML