Niveau : Confirmé

Le modèle tabulaire en CSS

Tutoriel par (Intégrateur du Dimanche, Strasbourg)
Créé le , mis à jour le (12477 lectures)

Sommaire


Conclusion, ressources et démonstrations en ligne

Conclusion

Avec ses avantages et inconvénients, le modèle tabulaire en CSS répond à des besoins de constructions que l'on peut rencontrer quotidiennement dans notre métier d'intégrateur.

Trop souvent laissé pour compte en raison du lourd passé de ses cousins (les <table> HTML), le positionnement CSS via display mérite aujourd'hui toute notre attention, depuis la mort programmée des anciennes versions d'Internet Explorer, même si tous nos maux ne seront pas résolus en un coup de… pinceau !

En tout cas, j'espère que vous ne pourrez plus dire désormais que "je n'y comprends rien aux tableaux CSS"…

Ressources

Démonstrations en ligne

Pour finir, voici la version PDF de cet article pour les personnes intéressées.

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.