Niveau : Confirmé

Le modèle tabulaire en CSS

Tutoriel par (Intégrateur du Dimanche, Strasbourg)
Créé le (26161 lectures)
Tags : anonymes, table-header, table-footer, table-caption

Sommaire


Flux, éléments anonymes, positionnements et accessibilité

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 :

table-caption

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

table-caption2

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

tfoot et thead

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 :

anonyme1

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

anonyme2

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

anonyme3

anonyme4

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 :

anonyme5

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) :

anonyme6

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 :

anonyme7

anonyme7

anonyme8

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.

positionnement1

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

positionnement2

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

positionnement3

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.

positionnement4

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.

before1

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 :

before2

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 :

before3

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/

Commentaires

XdiZ a dit le

Bien présenté, bien écrit, super agréable à lire. Merci d'avoir rempli ma tête d'informations que j'ignorais totalement.

rodolpheb a dit le

Merci Raphaël de mettre encore et toujours ses compétences au service des autres.

rodolpheb a dit le

Je ne comprends pas l'utilité des pseudo-éléments? Dans quels cas peut-on y avoir recours.

Raphael a dit le

Il y a mille et un usages possibles des pseudo-éléments, en voici un par exemple : codepen.io/raphaelgoetter/pen/dGxvL

rodolpheb a dit le

Merci Raphaël.
Voilà au moins un usage, pour les mille autres, je garderai l'oeil ouvert.:)
Bon week-end.

Ten a dit le

Bonjour et merci pour cet article très instructif !!
J'ai une question sur un des points : les propriétés "display: table-header-group" par exemple - dont la position dans le flux semble puissante - peut elle être utilisée dans le cadre d'une chorégraphie de contenus telle qu'imaginée par Trent Walton ?

La compatibilité mobile de ces propriétés est excellente, et ce pourrait être une ingénieuse solution à certaines questions existentielles des intégrateurs en ce moment !

Merci pour la lecture en tout cas, les détails sont croustillants comme on aime !

cynic- a dit le

... quid des webmails et outils tels que Thunderbird, Outlook, Mail (macOs) ? Faut-il garder nos vieux tableaux pour les newsletters ?

jojaba a dit le

Pour ceux qui voudraient une version pdf (bricolée) de ce tuto, c'est par là : http://perso.jojaba.fr/Web-utilisation-develo... ;)

Raphael a dit le

@Ten : en effet, de belles choses sont promises à ces valeurs de table qui modifient l'ordre d'affichage (en attendant flexbox bien plus poussé dans ce domaine). Mais attention à l'accessibilité de ces techniques !

@cynic- : les clients mails sont toujours aussi réfractaires aux styles CSS "évolués", il faut donc toujours se fier aux "vrais" tableaux HTML pour eux :(

Ten a dit le

Je ne suis pas expert en accessibilité mais je sens que ça va être mon nouveau seau dans le bac à sable, c'est l'occasion d'apprendre !!

Merci pour la réponse éclairée.