Niveau : Confirmé

Le modèle tabulaire en CSS

Tutoriel par (Intégrateur du Dimanche, Strasbourg)
Créé le (35784 lectures)
Tags : css, tableau, table, display, table-cell, table-layout

Sommaire


Introduction, compatibilité et valeurs de display

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

 

Tableau des compatibilités

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

Safari
Safari Mobile

Toutes versions
Android Browser 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

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.