{"id":3641,"date":"2024-08-26T12:35:07","date_gmt":"2024-08-26T09:35:07","guid":{"rendered":"https:\/\/www.nav.ro\/blog\/?p=3641"},"modified":"2024-08-26T12:35:07","modified_gmt":"2024-08-26T09:35:07","slug":"stilizarea-tabelelor-in-css-ghid-practic-si-exemple","status":"publish","type":"post","link":"https:\/\/www.nav.ro\/blog\/stilizarea-tabelelor-in-css-ghid-practic-si-exemple\/","title":{"rendered":"Stilizarea tabelelor \u00een CSS: Ghid Practic \u0219i Exemple"},"content":{"rendered":"\n<p>Tabelele sunt folosite pe scar\u0103 larg\u0103 pentru organizarea datelor \u00een web design, dar, prin natura lor, ele pot p\u0103rea \u00eenvechite sau monotone. Cu ajutorul CSS, po\u021bi transforma tabelele \u00eentr-un element vizual atractiv \u0219i func\u021bional. \u00cen acest articol, vom explora diferite tehnici de stilizare a tabelelor folosind CSS.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. <strong>Structura de Baz\u0103 a unei Tabele<\/strong><\/h3>\n\n\n\n<p>\u00cenainte de a trece la stilizare, este esen\u021bial s\u0103 \u00een\u021belegem structura de baz\u0103 a unei tabele HTML:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;table>\n  &lt;thead>\n    &lt;tr>\n      &lt;th>Coloana 1&lt;\/th>\n      &lt;th>Coloana 2&lt;\/th>\n      &lt;th>Coloana 3&lt;\/th>\n    &lt;\/tr>\n  &lt;\/thead>\n  &lt;tbody>\n    &lt;tr>\n      &lt;td>Date 1&lt;\/td>\n      &lt;td>Date 2&lt;\/td>\n      &lt;td>Date 3&lt;\/td>\n    &lt;\/tr>\n    &lt;tr>\n      &lt;td>Date 4&lt;\/td>\n      &lt;td>Date 5&lt;\/td>\n      &lt;td>Date 6&lt;\/td>\n    &lt;\/tr>\n  &lt;\/tbody>\n&lt;\/table>\n<\/pre>\n\n\n\n<p>Aceasta este structura standard a unei tabele cu un header (<code>thead<\/code>) \u0219i un corp (<code>tbody<\/code>) care con\u021bine r\u00e2ndurile de date.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. <strong>Stilizare de Baz\u0103 a Tabelelor \u00een CSS<\/strong><\/h3>\n\n\n\n<p>Pentru \u00eenceput, po\u021bi ad\u0103uga o stilizare de baz\u0103 pentru a \u00eembun\u0103t\u0103\u021bi lizibilitatea \u0219i aspectul tabelei.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">table {\n  width: 100%;\n  border-collapse: collapse;\n}\n\nth, td {\n  padding: 12px;\n  text-align: left;\n  border: 1px solid #ddd;\n}\n\nth {\n  background-color: #f4f4f4;\n  font-weight: bold;\n}\n<\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Explica\u021bie:<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>border-collapse: collapse;<\/code> elimin\u0103 spa\u021biile dintre bordurile celulelor.<\/li>\n\n\n\n<li><code>padding: 12px;<\/code> adaug\u0103 spa\u021biu interior pentru a face con\u021binutul mai lizibil.<\/li>\n\n\n\n<li><code>text-align: left;<\/code> aliniaz\u0103 textul la st\u00e2nga \u00een celule.<\/li>\n\n\n\n<li><code>border: 1px solid #ddd;<\/code> aplic\u0103 un chenar discret \u00eentre celule.<\/li>\n\n\n\n<li><code>background-color: #f4f4f4;<\/code> ofer\u0103 un fundal u\u0219or gri pentru anteturi.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">3. <strong>Alternarea Culorilor pe R\u00e2nduri<\/strong> CSS<\/h3>\n\n\n\n<p>Un efect vizual popular pentru tabele este alternarea culorilor pe r\u00e2nduri, cunoscut \u0219i sub numele de \u201ezebra striping\u201d. Acest lucru face mai u\u0219oar\u0103 urm\u0103rirea datelor pe r\u00e2nduri.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">tbody tr:nth-child(odd) {\n  background-color: #f9f9f9;\n}\n\ntbody tr:nth-child(even) {\n  background-color: #ffffff;\n}\n<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">4. <strong>Stilizarea pe Hover<\/strong><\/h3>\n\n\n\n<p>Ad\u0103ugarea unui efect de hover poate \u00eembun\u0103t\u0103\u021bi experien\u021ba utilizatorului, permi\u021b\u00e2ndu-i s\u0103 eviden\u021bieze r\u00e2ndul pe care se afl\u0103 cursorul.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">tbody tr:hover {\n  background-color: #e0e0e0;\n  cursor: pointer;\n}\n<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">5. <strong>Stilizarea Headerului<\/strong><\/h3>\n\n\n\n<p>Po\u021bi personaliza \u0219i mai mult headerul pentru a-l face distinct vizual fa\u021b\u0103 de restul tabelei.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">th {\n  background-color: #007bff;\n  color: #ffffff;\n  text-transform: uppercase;\n  font-size: 14px;\n}\n<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">6. <strong>Coloane Fixe \u0219i Scroll Orizontal<\/strong> CSS<\/h3>\n\n\n\n<p>Dac\u0103 ai tabele cu multe coloane, poate fi util s\u0103 fixezi prima coloan\u0103 \u0219i s\u0103 permi\u021bi scroll orizontal pentru restul datelor.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.table-container {\n  overflow-x: auto;\n}\n\ntable {\n  min-width: 600px;\n}\n<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">7. <strong>\u00cembun\u0103t\u0103\u021biri Vizuale cu Borduri Personalizate<\/strong><\/h3>\n\n\n\n<p>Folosirea unor borduri personalizate poate ad\u0103uga un efect rafinat:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">th, td {\n  border-bottom: 2px solid #ddd;\n}\n\nth {\n  border-bottom: 3px solid #007bff;\n}\n<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">8. <strong>Responsive Design pentru Tabele<\/strong><\/h3>\n\n\n\n<p>Pentru a face tabelele responsive, po\u021bi ad\u0103uga stiluri speciale pentru ecrane mici, ascunz\u00e2nd coloanele neesen\u021biale sau transform\u00e2nd datele \u00een liste:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">@media (max-width: 600px) {\n  table, thead, tbody, th, td, tr {\n    display: block;\n  }\n\n  th, td {\n    text-align: right;\n    padding-left: 50%;\n    position: relative;\n  }\n\n  th::before, td::before {\n    content: attr(data-label);\n    position: absolute;\n    left: 10px;\n    text-align: left;\n    font-weight: bold;\n  }\n}\n<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">9. <strong>Exemple Practice \u0219i Inspira\u021bie<\/strong><\/h3>\n\n\n\n<p>Exist\u0103 numeroase stiluri creative pe care le po\u021bi aplica tabelelor tale, de la tabele minimaliste p\u00e2n\u0103 la tabele cu accente moderne \u0219i anima\u021bii subtile. Fii creativ \u0219i adapteaz\u0103 stilul tabelei la identitatea vizual\u0103 a site-ului t\u0103u!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Concluzie<\/h3>\n\n\n\n<p>Stilizarea tabelelor \u00een CSS poate aduce un plus semnificativ de estetic\u0103 \u0219i func\u021bionalitate \u00een paginile tale web. De la culori alternante, efecte hover, p\u00e2n\u0103 la design responsive, ai la dispozi\u021bie multiple tehnici pentru a transforma o simpl\u0103 tabel\u0103 \u00eentr-un element vizual pl\u0103cut \u0219i u\u0219or de utilizat.<\/p>\n\n\n\n<p>Cu un pic de creativitate, po\u021bi face ca datele s\u0103 fie nu doar u\u0219or de \u00een\u021beles, ci \u0219i atr\u0103g\u0103toare din punct de vedere vizual.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Tabelele sunt folosite pe scar\u0103 larg\u0103 pentru organizarea datelor \u00een web design, dar, prin natura lor, ele pot p\u0103rea \u00eenvechite sau monotone. Cu ajutorul CSS, po\u021bi transforma tabelele \u00eentr-un element vizual atractiv \u0219i func\u021bional. \u00cen acest articol, vom explora diferite tehnici de stilizare a tabelelor folosind CSS. 1. Structura de Baz\u0103 a unei Tabele \u00cenainte<\/p>\n","protected":false},"author":1,"featured_media":3647,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[332,438,212],"class_list":["post-3641","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to","tag-css","tag-html","tag-website"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Stilizarea tabelelor \u00een CSS: Ghid Practic \u0219i Exemple - NAV.RO Blog<\/title>\n<meta name=\"description\" content=\"Cu ajutorul CSS, po\u021bi transforma tabelele \u00eentr-un element vizual atractiv \u0219i func\u021bional. \u00cen acest articol, vom explora diferite tehnici\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.nav.ro\/blog\/stilizarea-tabelelor-in-css-ghid-practic-si-exemple\/\" \/>\n<meta property=\"og:locale\" content=\"ro_RO\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Stilizarea tabelelor \u00een CSS: Ghid Practic \u0219i Exemple - NAV.RO Blog\" \/>\n<meta property=\"og:description\" content=\"Cu ajutorul CSS, po\u021bi transforma tabelele \u00eentr-un element vizual atractiv \u0219i func\u021bional. \u00cen acest articol, vom explora diferite tehnici\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.nav.ro\/blog\/stilizarea-tabelelor-in-css-ghid-practic-si-exemple\/\" \/>\n<meta property=\"og:site_name\" content=\"NAV.RO Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/nav6718\" \/>\n<meta property=\"article:published_time\" content=\"2024-08-26T09:35:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.nav.ro\/blog\/wp-content\/uploads\/2024\/08\/css.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"683\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"NAV.RO\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@nav6718\" \/>\n<meta name=\"twitter:site\" content=\"@nav6718\" \/>\n<meta name=\"twitter:label1\" content=\"Scris de\" \/>\n\t<meta name=\"twitter:data1\" content=\"NAV.RO\" \/>\n\t<meta name=\"twitter:label2\" content=\"Timp estimat pentru citire\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.nav.ro\/blog\/stilizarea-tabelelor-in-css-ghid-practic-si-exemple\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.nav.ro\/blog\/stilizarea-tabelelor-in-css-ghid-practic-si-exemple\/\"},\"author\":{\"name\":\"NAV.RO\",\"@id\":\"https:\/\/www.nav.ro\/blog\/#\/schema\/person\/c0271febcae717bbdbc3b2c6dbdec20e\"},\"headline\":\"Stilizarea tabelelor \u00een CSS: Ghid Practic \u0219i Exemple\",\"datePublished\":\"2024-08-26T09:35:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.nav.ro\/blog\/stilizarea-tabelelor-in-css-ghid-practic-si-exemple\/\"},\"wordCount\":452,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.nav.ro\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.nav.ro\/blog\/stilizarea-tabelelor-in-css-ghid-practic-si-exemple\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.nav.ro\/blog\/wp-content\/uploads\/2024\/08\/css.png\",\"keywords\":[\"css\",\"html\",\"website\"],\"articleSection\":[\"HOW TO\"],\"inLanguage\":\"ro-RO\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.nav.ro\/blog\/stilizarea-tabelelor-in-css-ghid-practic-si-exemple\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.nav.ro\/blog\/stilizarea-tabelelor-in-css-ghid-practic-si-exemple\/\",\"url\":\"https:\/\/www.nav.ro\/blog\/stilizarea-tabelelor-in-css-ghid-practic-si-exemple\/\",\"name\":\"Stilizarea tabelelor \u00een CSS: Ghid Practic \u0219i Exemple - NAV.RO Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.nav.ro\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.nav.ro\/blog\/stilizarea-tabelelor-in-css-ghid-practic-si-exemple\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.nav.ro\/blog\/stilizarea-tabelelor-in-css-ghid-practic-si-exemple\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.nav.ro\/blog\/wp-content\/uploads\/2024\/08\/css.png\",\"datePublished\":\"2024-08-26T09:35:07+00:00\",\"description\":\"Cu ajutorul CSS, po\u021bi transforma tabelele \u00eentr-un element vizual atractiv \u0219i func\u021bional. \u00cen acest articol, vom explora diferite tehnici\",\"breadcrumb\":{\"@id\":\"https:\/\/www.nav.ro\/blog\/stilizarea-tabelelor-in-css-ghid-practic-si-exemple\/#breadcrumb\"},\"inLanguage\":\"ro-RO\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.nav.ro\/blog\/stilizarea-tabelelor-in-css-ghid-practic-si-exemple\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"ro-RO\",\"@id\":\"https:\/\/www.nav.ro\/blog\/stilizarea-tabelelor-in-css-ghid-practic-si-exemple\/#primaryimage\",\"url\":\"https:\/\/www.nav.ro\/blog\/wp-content\/uploads\/2024\/08\/css.png\",\"contentUrl\":\"https:\/\/www.nav.ro\/blog\/wp-content\/uploads\/2024\/08\/css.png\",\"width\":1024,\"height\":683},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.nav.ro\/blog\/stilizarea-tabelelor-in-css-ghid-practic-si-exemple\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Prima pagin\u0103\",\"item\":\"https:\/\/www.nav.ro\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Stilizarea tabelelor \u00een CSS: Ghid Practic \u0219i Exemple\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.nav.ro\/blog\/#website\",\"url\":\"https:\/\/www.nav.ro\/blog\/\",\"name\":\"NAV.RO Blog\",\"description\":\"Stiri IT\u2705 de actualitate si noutati din domeniul Hosting \u279c Gazduire Web \u279c Servere Dedicate \/ VPS \u279c DATA CENTER \u279c Domenii \u2b50 Actualizare zilnica de la expertii NAV.RO\",\"publisher\":{\"@id\":\"https:\/\/www.nav.ro\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.nav.ro\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ro-RO\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.nav.ro\/blog\/#organization\",\"name\":\"NAV Communications\",\"url\":\"https:\/\/www.nav.ro\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ro-RO\",\"@id\":\"https:\/\/www.nav.ro\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.nav.ro\/blog\/wp-content\/uploads\/2022\/09\/nav_logo.png\",\"contentUrl\":\"https:\/\/www.nav.ro\/blog\/wp-content\/uploads\/2022\/09\/nav_logo.png\",\"width\":1120,\"height\":800,\"caption\":\"NAV Communications\"},\"image\":{\"@id\":\"https:\/\/www.nav.ro\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/nav6718\",\"https:\/\/x.com\/nav6718\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.nav.ro\/blog\/#\/schema\/person\/c0271febcae717bbdbc3b2c6dbdec20e\",\"name\":\"NAV.RO\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ro-RO\",\"@id\":\"https:\/\/www.nav.ro\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/93c42d768fb29d2b7c2c9b94595b1770ec8dbbda107bfb5e6759247e857c9cda?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/93c42d768fb29d2b7c2c9b94595b1770ec8dbbda107bfb5e6759247e857c9cda?s=96&d=mm&r=g\",\"caption\":\"NAV.RO\"},\"sameAs\":[\"https:\/\/www.nav.ro\"],\"url\":\"https:\/\/www.nav.ro\/blog\/author\/useradmin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Stilizarea tabelelor \u00een CSS: Ghid Practic \u0219i Exemple - NAV.RO Blog","description":"Cu ajutorul CSS, po\u021bi transforma tabelele \u00eentr-un element vizual atractiv \u0219i func\u021bional. \u00cen acest articol, vom explora diferite tehnici","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.nav.ro\/blog\/stilizarea-tabelelor-in-css-ghid-practic-si-exemple\/","og_locale":"ro_RO","og_type":"article","og_title":"Stilizarea tabelelor \u00een CSS: Ghid Practic \u0219i Exemple - NAV.RO Blog","og_description":"Cu ajutorul CSS, po\u021bi transforma tabelele \u00eentr-un element vizual atractiv \u0219i func\u021bional. \u00cen acest articol, vom explora diferite tehnici","og_url":"https:\/\/www.nav.ro\/blog\/stilizarea-tabelelor-in-css-ghid-practic-si-exemple\/","og_site_name":"NAV.RO Blog","article_publisher":"https:\/\/www.facebook.com\/nav6718","article_published_time":"2024-08-26T09:35:07+00:00","og_image":[{"width":1024,"height":683,"url":"https:\/\/www.nav.ro\/blog\/wp-content\/uploads\/2024\/08\/css.png","type":"image\/png"}],"author":"NAV.RO","twitter_card":"summary_large_image","twitter_creator":"@nav6718","twitter_site":"@nav6718","twitter_misc":{"Scris de":"NAV.RO","Timp estimat pentru citire":"3 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.nav.ro\/blog\/stilizarea-tabelelor-in-css-ghid-practic-si-exemple\/#article","isPartOf":{"@id":"https:\/\/www.nav.ro\/blog\/stilizarea-tabelelor-in-css-ghid-practic-si-exemple\/"},"author":{"name":"NAV.RO","@id":"https:\/\/www.nav.ro\/blog\/#\/schema\/person\/c0271febcae717bbdbc3b2c6dbdec20e"},"headline":"Stilizarea tabelelor \u00een CSS: Ghid Practic \u0219i Exemple","datePublished":"2024-08-26T09:35:07+00:00","mainEntityOfPage":{"@id":"https:\/\/www.nav.ro\/blog\/stilizarea-tabelelor-in-css-ghid-practic-si-exemple\/"},"wordCount":452,"commentCount":0,"publisher":{"@id":"https:\/\/www.nav.ro\/blog\/#organization"},"image":{"@id":"https:\/\/www.nav.ro\/blog\/stilizarea-tabelelor-in-css-ghid-practic-si-exemple\/#primaryimage"},"thumbnailUrl":"https:\/\/www.nav.ro\/blog\/wp-content\/uploads\/2024\/08\/css.png","keywords":["css","html","website"],"articleSection":["HOW TO"],"inLanguage":"ro-RO","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.nav.ro\/blog\/stilizarea-tabelelor-in-css-ghid-practic-si-exemple\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.nav.ro\/blog\/stilizarea-tabelelor-in-css-ghid-practic-si-exemple\/","url":"https:\/\/www.nav.ro\/blog\/stilizarea-tabelelor-in-css-ghid-practic-si-exemple\/","name":"Stilizarea tabelelor \u00een CSS: Ghid Practic \u0219i Exemple - NAV.RO Blog","isPartOf":{"@id":"https:\/\/www.nav.ro\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.nav.ro\/blog\/stilizarea-tabelelor-in-css-ghid-practic-si-exemple\/#primaryimage"},"image":{"@id":"https:\/\/www.nav.ro\/blog\/stilizarea-tabelelor-in-css-ghid-practic-si-exemple\/#primaryimage"},"thumbnailUrl":"https:\/\/www.nav.ro\/blog\/wp-content\/uploads\/2024\/08\/css.png","datePublished":"2024-08-26T09:35:07+00:00","description":"Cu ajutorul CSS, po\u021bi transforma tabelele \u00eentr-un element vizual atractiv \u0219i func\u021bional. \u00cen acest articol, vom explora diferite tehnici","breadcrumb":{"@id":"https:\/\/www.nav.ro\/blog\/stilizarea-tabelelor-in-css-ghid-practic-si-exemple\/#breadcrumb"},"inLanguage":"ro-RO","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.nav.ro\/blog\/stilizarea-tabelelor-in-css-ghid-practic-si-exemple\/"]}]},{"@type":"ImageObject","inLanguage":"ro-RO","@id":"https:\/\/www.nav.ro\/blog\/stilizarea-tabelelor-in-css-ghid-practic-si-exemple\/#primaryimage","url":"https:\/\/www.nav.ro\/blog\/wp-content\/uploads\/2024\/08\/css.png","contentUrl":"https:\/\/www.nav.ro\/blog\/wp-content\/uploads\/2024\/08\/css.png","width":1024,"height":683},{"@type":"BreadcrumbList","@id":"https:\/\/www.nav.ro\/blog\/stilizarea-tabelelor-in-css-ghid-practic-si-exemple\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Prima pagin\u0103","item":"https:\/\/www.nav.ro\/blog\/"},{"@type":"ListItem","position":2,"name":"Stilizarea tabelelor \u00een CSS: Ghid Practic \u0219i Exemple"}]},{"@type":"WebSite","@id":"https:\/\/www.nav.ro\/blog\/#website","url":"https:\/\/www.nav.ro\/blog\/","name":"NAV.RO Blog","description":"Stiri IT\u2705 de actualitate si noutati din domeniul Hosting \u279c Gazduire Web \u279c Servere Dedicate \/ VPS \u279c DATA CENTER \u279c Domenii \u2b50 Actualizare zilnica de la expertii NAV.RO","publisher":{"@id":"https:\/\/www.nav.ro\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.nav.ro\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ro-RO"},{"@type":"Organization","@id":"https:\/\/www.nav.ro\/blog\/#organization","name":"NAV Communications","url":"https:\/\/www.nav.ro\/blog\/","logo":{"@type":"ImageObject","inLanguage":"ro-RO","@id":"https:\/\/www.nav.ro\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.nav.ro\/blog\/wp-content\/uploads\/2022\/09\/nav_logo.png","contentUrl":"https:\/\/www.nav.ro\/blog\/wp-content\/uploads\/2022\/09\/nav_logo.png","width":1120,"height":800,"caption":"NAV Communications"},"image":{"@id":"https:\/\/www.nav.ro\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/nav6718","https:\/\/x.com\/nav6718"]},{"@type":"Person","@id":"https:\/\/www.nav.ro\/blog\/#\/schema\/person\/c0271febcae717bbdbc3b2c6dbdec20e","name":"NAV.RO","image":{"@type":"ImageObject","inLanguage":"ro-RO","@id":"https:\/\/www.nav.ro\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/93c42d768fb29d2b7c2c9b94595b1770ec8dbbda107bfb5e6759247e857c9cda?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/93c42d768fb29d2b7c2c9b94595b1770ec8dbbda107bfb5e6759247e857c9cda?s=96&d=mm&r=g","caption":"NAV.RO"},"sameAs":["https:\/\/www.nav.ro"],"url":"https:\/\/www.nav.ro\/blog\/author\/useradmin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.nav.ro\/blog\/wp-json\/wp\/v2\/posts\/3641","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.nav.ro\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.nav.ro\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.nav.ro\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.nav.ro\/blog\/wp-json\/wp\/v2\/comments?post=3641"}],"version-history":[{"count":6,"href":"https:\/\/www.nav.ro\/blog\/wp-json\/wp\/v2\/posts\/3641\/revisions"}],"predecessor-version":[{"id":3648,"href":"https:\/\/www.nav.ro\/blog\/wp-json\/wp\/v2\/posts\/3641\/revisions\/3648"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.nav.ro\/blog\/wp-json\/wp\/v2\/media\/3647"}],"wp:attachment":[{"href":"https:\/\/www.nav.ro\/blog\/wp-json\/wp\/v2\/media?parent=3641"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.nav.ro\/blog\/wp-json\/wp\/v2\/categories?post=3641"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.nav.ro\/blog\/wp-json\/wp\/v2\/tags?post=3641"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}