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
- Spécifications officielles CSS2.1
- Alternative à table-cell pour IE6 et IE7
- Conférence à Paris-Web 2011 sur les tableaux de mise en page
- Livre de Sitepoint “Everything You Know About CSS Is Wrong!” (Rachel Andrew & Kevin Yanks, SitePoint, 2008)
Démonstrations en ligne
- Le menu de navigation du site Apple.com
- Centrer un site web verticalement et horizontalement
- Page de hauteur 100% avec entête et pied de page fixes
- Menu de navigation flexible
- Mise en page responsive avec table
- Déplacement d'éléments selon la taille d'écran
- Tableau de données responsive
Pour finir, voici la version PDF de cet article pour les personnes intéressées.
Commentaires
Bien présenté, bien écrit, super agréable à lire. Merci d'avoir rempli ma tête d'informations que j'ignorais totalement.
Merci Raphaël de mettre encore et toujours ses compétences au service des autres.
Je ne comprends pas l'utilité des pseudo-éléments? Dans quels cas peut-on y avoir recours.
Il y a mille et un usages possibles des pseudo-éléments, en voici un par exemple : codepen.io/raphaelgoetter/pen/dGxvL
Merci Raphaël.
Voilà au moins un usage, pour les mille autres, je garderai l'oeil ouvert.:)
Bon week-end.
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 !
... quid des webmails et outils tels que Thunderbird, Outlook, Mail (macOs) ? Faut-il garder nos vieux tableaux pour les newsletters ?
Pour ceux qui voudraient une version pdf (bricolée) de ce tuto, c'est par là : http://perso.jojaba.fr/Web-utilisation-develo... ;)
@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 :(
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.