{"id":1033,"date":"2009-12-21T18:37:27","date_gmt":"2009-12-21T16:37:27","guid":{"rendered":"http:\/\/nyams.planbweb.com\/blog\/?p=1033"},"modified":"2009-12-21T18:37:27","modified_gmt":"2009-12-21T16:37:27","slug":"redecouvrons-ensemble-les-joies-de-la-table","status":"publish","type":"post","link":"https:\/\/nyamsprod.com\/blog\/redecouvrons-ensemble-les-joies-de-la-table\/","title":{"rendered":"red\u00e9couvrons ensemble les joies de la table"},"content":{"rendered":"<div class=\"message warning\">\n<p><strong>Attention:<\/strong> Les informations de ce billet sont susceptibles d'&ecirc;tre obsol&egrave;tes car vieux de plus 2 ans.<\/p>\n<p><strong>Warning: <\/strong> The information you are reading may be obsolete, this post was published more than 2 years ago.<\/p>\n<\/div><p>Un petit poste pas si rapide que cela sur la joie d&#8217;utilisation du CSS3 pour styler un tableau.. il n&#8217;y a que \u00e7a pour me faire passer des vacances de No\u00ebl au top \ud83d\ude09 . Geek un jour Geek toujours que me disait un mien ami r\u00e9cemment. Le sempiternelle probl\u00e8me que je vais aborder ici est celui de styler une table de mani\u00e8re cool sans avoir recours \u00e0 la multiplication de l&#8217;attribut <code>class<\/code>. Ou comme dirait un magicien .. avec rien dans la manche gauche et rien dans la manche droite.. ou presque.<!--more--><\/p>\n<p>Pour cela rien de plus simple&#8230; en apparence. Tout d&#8217;abord il faut un tableau quoi de plus normal, ensuite il faut un tableau avec tous pleins d&#8217;infos qu&#8217;on ne sais pas \u00e0 quoi cela peut bien servir? Et si je prenais les groupes de la prochaine coupe du monde de football en Afrique du Sud. Comme je suis fain\u00e9ant de nature et par conviction, je prendrais en exemple le groupe le plus nul de cette comp\u00e9tition&#8230; c&#8217;est-\u00e0-dire le groupe avec la France \ud83d\ude42 . Ben quoi j&#8217;ai bien le droit de placer des blagues&#8230; Un geek qui place des blagues sur le foot cela ne court pas les rues \ud83d\ude00 .<\/p>\n<p>Comme je veux faire cela tr\u00e8s rapidement et sans me casser la t\u00eate voici le r\u00e9sultat final en image et <a href=\"http:\/\/nyams.planbweb.com\/test\/css\/\">en action<\/a>.<\/p>\n<p><a href=\"http:\/\/www.nyamsprod.com\/blog\/wp-content\/uploads\/2009\/12\/table-rendu-finale.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-1039\" title=\"Rendu finale gr\u00e2ce au CSS3\" src=\"http:\/\/www.nyamsprod.com\/blog\/wp-content\/uploads\/2009\/12\/table-rendu-finale-300x95.png\" alt=\"\" width=\"300\" height=\"95\" srcset=\"https:\/\/nyamsprod.com\/blog\/wp-content\/uploads\/2009\/12\/table-rendu-finale-300x95.png 300w, https:\/\/nyamsprod.com\/blog\/wp-content\/uploads\/2009\/12\/table-rendu-finale.png 712w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a>Vous noterez au passage que cela fonctionne sous tous les navigateurs modernes \u00e0 l&#8217;exception de celui dont il ne faut pas prononcer le nom \ud83d\ude42 (il parait que c&#8217;est p\u00e9ch\u00e9!!).<\/p>\n<p>Autre remarques, plus int\u00e9ressantes celle-l\u00e0:<\/p>\n<ul>\n<li> je n&#8217;ai utilis\u00e9 pour ainsi dire que 3 couleurs pour rendre l&#8217;effet du tableau. Le reste, c&#8217;est la valeur de l&#8217;<em>alpha<\/em> (le fameux <code>a<\/code> dans <code>rgba<\/code> qui le fait.<\/li>\n<li>Notons au passage un apport remarqu\u00e9 des <code>:nth-child<\/code> que je l&#8217;avoue je ne maitrise pas tr\u00e8s bien mais qui me font augurer des nuits chaleureuse en calcule mentale de ouf pour d\u00e9terminer quels lignes ou quelles colonnes sera s\u00e9lectionner&#8230; CSS3 power ;).<\/li>\n<li>Mention sp\u00e9ciale \u00e0 <code>:hover<\/code> un pseudo attribut que si on l&#8217;avait pas invent\u00e9&#8230; on serait vraiment dans la mouise.<\/li>\n<li>le choix de la couleur de fond pour le tableau est important car c&#8217;est lui qui va conditionner la couleur r\u00e9sultant du <code>:hover<\/code> avec la valeur alpha.<\/li>\n<li>seul l&#8217;ajout des drapeaux est obligatoire via l&#8217;utilisation de l&#8217;attribut class mais si vous allez faire un site uniquement parlant de foot ou de coupe du monde&#8230; les d\u00e9clarer en css vous aidera \u00e0 gagner quelque lignes html dans votre code.. c&#8217;est toujours cela de ganger!!<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Utilisation pratique du CSS3 pour styler un tableau de classement de coupe du monde&#8230; \u00e7a c&#8217;est de la grande classe<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[5],"tags":[16,129,140,203,459,509],"class_list":["post-1033","post","type-post","status-publish","format-standard","hentry","category-web","tag-nth-child","tag-coupe-du-monde","tag-css3","tag-football","tag-rgba","tag-table"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/posts\/1033","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/comments?post=1033"}],"version-history":[{"count":0,"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/posts\/1033\/revisions"}],"wp:attachment":[{"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/media?parent=1033"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/categories?post=1033"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/tags?post=1033"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}