Le modèle tabulaire en CSS

Flux et ordre d'affichage

Certaines valeurs spécifiques du modèle d’affichage sous forme de tableau modifient l’ordre d’affichage des éléments empilés verticalement :

• Un élément déclaré en table-header-group se placera avant ses frères tabulaires.
• Un élément en table-footer-group se positionnera à la suite de ses frères tabulaires.
• Un élément en table-caption apparaîtra par défaut tout en haut de la pile, mais peut être déplacé tout en bas s’il est accompagné d’une déclaration caption-side: bottom.

Illustration : un élément en table-caption s'affiche avant son frère, la boîte anonyme table construite autour des 3 blocks :

Affublé d'un caption-side: bottom, l'élément table-caption se place en dessous :

Des éléments table-header-group et table-footer-group s'affichent ainsi :

Les éléments anonymes

Chaque élément de rendu tableau en CSS crée automatiquement des objets de table anonymes autour de lui-même, c’est-à-dire que les éléments de structure manquants sont créés par le navigateur.

Ce concept est assez complexe à appréhender et pourtant essentiel pour bien comprendre les subtilités des positionnements tabulaires.

Construction anonyme descendante :

• Si le parent d’éléments frères table-cell n’est pas un table-row, alors un objet anonyme table-row est créé autour des frères table-cell
• Si le parent d’éléments frères table-row (ou équivalents) n’est pas un table, alors un objet anonyme table est créé autour des frères table-row ou équivalents

Illustration : un élément table-cell construit autour de lui un objet table-row et table, ses frères blocks ne sont pas concernés :

Un objet table-row + table se construit autour de 2 frères table-cell :

Même schéma pour trois frères puis quatre frères (illustrations ci-dessous) :

Construction anonyme ascendante :

• Un parent table (ou équivalent) construit un objet anonyme table-row autour de l'ensemble de ses enfants directs qui ne sont pas table-row ou équivalents
• Un parent table-row (ou équivalent) construit un objet anonyme table-cell autour de l'ensemble de ses enfants directs qui ne sont pas table-cell

Illustration : un parent table construit autour des 4 blocks un objet table-cell + table-row :

Un des éléments est un table-cell; autour des 3 blocks frères se construit un table-cell également, puis un table-row se contruit autour des 2 table-cell (celle de gauche et celle - anonyme - de droite) :

Dans les illustrations suivantes, un élément table-cell anonyme est construit autour des éléments frères blocks, puis un table-row anonyme se construit autour des cellules réelles ou imaginaires :

Spécificités des éléments tabulaires

Propriétés incompatibles

Les valeurs de rangées (table-row et équivalents) présentent des particularités liées à leur rendu :

• table-row ne comprend pas la propriété padding, ni margin, position, width, min/max-width, min/max-height, vertical-align, border et overflow.
• Plus globalement, il n’est pas possible d’appliquer la propriété padding aux élément en display: table-row-group, table-header-group, table-footer-group, table-row, table-column-group et table-column.
• Enfin, il ne peut y avoir qu’un seul table-caption au sein d’un tableau.

Positionnement

Selon les spécifications, positionner ou rendre flottant une cellule de tableau *peut* modifier son comportement, ne plus être considérée comme une cellule et affecter l’alignement et les dimensions de la table.

En pratique, il n’est pas possible de faire bénéficier les éléments tabulaires de la position relative sur certains navigateurs (Firefox par exemple), ce qui peut être gênant puisqu’ils ne peuvent ainsi pas servir de référents pour des contenus positionnés en absolu.

L'élément "choucroute" est positionné en position: absolute à right: 0 et top: 0. Logiquement, il se positionne hors du tableau :

Lorsque le conteneur global (display: table) est en position: relative, il devient un référent pour "choucroute" :

Par contre, lorsque l'un des élements en display: table-cell est en position: relative, il ne devient pas un référent pour "choucroute" sur certains navigateurs.

Génération de contenu

Il est possible de générer du contenu en CSS sur des éléments tabulaires à l’aide des pseudo-éléments CSS3 ::before et ::after (ou leurs versions CSS2 :before et :after).

Particularité pittoresque : les éléments générés sont susceptibles de participer eux aussi au grand jeu de la construction d’objets anonymes (voir précédemment), et se voir inclus dans des éléments table-cell ou table-row.

div {display: table}
div:before {
	content: "div:before";
	display: table-cell;
	width: 33%;
	padding: 3px;
	background: orange;
}
div:after {
	content: "div:after";
	display: table-cell;
	width: 33%;
	padding: 3px;
	background: #39f; 
}

Si les éléments sont générés directement sur le parent en display: table, alors un objet anonyme table-cell se crée autour de chacun des éléments individuels générés en :before et :after :

Si les éléments générés sont eux-mêmes en display: table-cell, ils participent avec leur troisième frère table-cell à la construction d'un conteneur anonyme commun table-row :

Considérations d'accessibilité

Quelques tests de lecteurs d’écran ont révélé que certains outils d’accessibilité traitent les éléments en display: table (et variantes) comme de vrais éléments tablulaires HTML, même s’il s’agit de div ou de paragraphes.

Cela peut créer des gênes, voire des soucis d’accessibilité, lorsque ces éléments sont porteurs de sens tels que des éléments de navigation par exemple ou des niveaux de titres.

Aux dernières nouvelles, la grande majorité (Window-eye, Jaws, Voice-over et NVDA sur IE) se comportent correctement. Le problème (s'il s'agit vraiment d'un problème) n'apparaît que sur certains dispositifs tels que NVDA sur Firefox et ORCA.

Plus d’information : http://www.456bereastreet.com/archive/201110/using_displaytable_has_semantic_effects_in_some_screen_readers/