{"id":25637,"date":"2018-04-24T13:26:11","date_gmt":"2018-04-24T03:26:11","guid":{"rendered":"https:\/\/codemyui.com\/?p=25637"},"modified":"2018-04-24T13:26:11","modified_gmt":"2018-04-24T03:26:11","slug":"stylish-table-design","status":"publish","type":"post","link":"https:\/\/codemyui.com\/stylish-table-design\/","title":{"rendered":"Stylish Table Design"},"content":{"rendered":"<p>Are you looking to add some visual flair to the <a href=\"https:\/\/codemyui.com\/tag\/tables\/\">tables on your website<\/a>? Take a look at this <a href=\"https:\/\/codemyui.com\/tag\/pure-css\/\">pure CSS<\/a> table design by Andrew Creech. <\/p>\n<p><!--more--><\/p>\n<p>If you are having trouble with the pen, try the archived copy on <a href=\"https:\/\/gist.github.com\/CodeMyUI\/ca61e9809241475df9af83f27d51b28e\" target=\"_blank\" rel=\"noopener\">GitHub<\/a><\/p>\n<h2>Table Design Snippet<\/h2>\n<p class='codepen'  data-height='534' data-theme-id='0' data-slug-hash='VmxKLj' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2' data-preview='true'>\nSee the Pen sketchy table design by Andrew Creech (@AndrewCreech) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>Are you looking to add some visual flair to the tables on your website? Take a look at this pure CSS table design by Andrew Creech.<\/p>\n<a class=\"read-more-link\" href=\" https:\/\/codemyui.com\/stylish-table-design\/ \">Read More<\/a>","protected":false},"author":1,"featured_media":25638,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1],"tags":[30305495,160209],"class_list":["post-25637","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-pure-css","tag-tables","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/04\/Stylish-Table-Design.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":26782,"url":"https:\/\/codemyui.com\/css-only-mobile-friendly-table-layout\/","url_meta":{"origin":25637,"position":0},"title":"CSS only Mobile Friendly Table Layout","author":"Saijo George","date":"August 21, 2018","format":false,"excerpt":"This responsive CSS only table design was designed by Flor Antara. We have a table with a header and on smaller devices like mobile phones the header is switched to a vertical layout and the content is scrollable horizontally. If you are having trouble with the pen, try the archived\u2026","rel":"","context":"In \"mobile optimised\"","block_context":{"text":"mobile optimised","link":"https:\/\/codemyui.com\/tag\/mobile-optimised\/"},"img":{"alt_text":"CSS only Mobile Friendly Table Layout","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/08\/CSS-only-Mobile-Friendly-Table-Layout.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/08\/CSS-only-Mobile-Friendly-Table-Layout.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/08\/CSS-only-Mobile-Friendly-Table-Layout.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/08\/CSS-only-Mobile-Friendly-Table-Layout.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":1313,"url":"https:\/\/codemyui.com\/pricing-table-pure-css\/","url_meta":{"origin":25637,"position":1},"title":"Pricing Table in Pure CSS","author":"Hima Vincent","date":"July 26, 2016","format":false,"excerpt":"This pricing table is created in pure CSS and will work great for any pricing page in your future projects. When you hover over a column it moves up over the other pricing tables and moving over the signup button fills the buttons color in the title and pricing section.\u2026","rel":"","context":"In \"pricing tables\"","block_context":{"text":"pricing tables","link":"https:\/\/codemyui.com\/tag\/pricing-tables\/"},"img":{"alt_text":"Pricing Table in Pure CSS","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/07\/pricing-table-in-pure-css.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/07\/pricing-table-in-pure-css.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/07\/pricing-table-in-pure-css.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/07\/pricing-table-in-pure-css.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":23592,"url":"https:\/\/codemyui.com\/pure-css-pricing-table-fadein-fadeout-feature-list\/","url_meta":{"origin":25637,"position":2},"title":"Pure CSS Pricing Table with Fadein Fadeout Feature List","author":"Hima Vincent","date":"August 16, 2017","format":false,"excerpt":"This CSS only pricing table snippet was designed by ryuuseiistar, it has 4 services that you can choose from and when you hover over each one the features that are available are visible and when you move to a different level of service the features that are not available fades\u2026","rel":"","context":"In \"hidden content\"","block_context":{"text":"hidden content","link":"https:\/\/codemyui.com\/tag\/hidden-content\/"},"img":{"alt_text":"Pure CSS Pricing Table with Fadein Fadeout Feature List","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/08\/pure-css-pricing-table-with-fadein-fadeout-feature-list.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/08\/pure-css-pricing-table-with-fadein-fadeout-feature-list.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/08\/pure-css-pricing-table-with-fadein-fadeout-feature-list.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/08\/pure-css-pricing-table-with-fadein-fadeout-feature-list.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":28956,"url":"https:\/\/codemyui.com\/css-only-pricing-table-with-gradient-background-and-an-expanding-subscribe-button\/","url_meta":{"origin":25637,"position":3},"title":"CSS Only Pricing Table with Gradient Background and an Expanding Subscribe Button","author":"Saijo George","date":"November 22, 2019","format":false,"excerpt":"Have a look at this awesome little pricing table design by Paulo Ribeiro, it is in pure CSS and has a gradient background where the price is faded into the background. There are 3 columns for pricing and the subscribe button when you hover over these columns expands and fills\u2026","rel":"","context":"In \"gradient\"","block_context":{"text":"gradient","link":"https:\/\/codemyui.com\/tag\/gradient\/"},"img":{"alt_text":"CSS Only Pricing Table with Gradient Background and an Expanding Subscribe Button","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/CSS-Only-Pricing-Table-with-Gradient-Background-and-an-Expanding-Subscribe-Button.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/CSS-Only-Pricing-Table-with-Gradient-Background-and-an-Expanding-Subscribe-Button.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/CSS-Only-Pricing-Table-with-Gradient-Background-and-an-Expanding-Subscribe-Button.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/CSS-Only-Pricing-Table-with-Gradient-Background-and-an-Expanding-Subscribe-Button.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":30369,"url":"https:\/\/codemyui.com\/crooked-falling-table-layout-in-pure-css\/","url_meta":{"origin":25637,"position":4},"title":"Crooked Falling Table Layout in Pure CSS","author":"Hima Vincent","date":"June 9, 2021","format":false,"excerpt":"Code by: Chris Smith If you are having trouble with the pen, try the archived copy on GitHub. Zigzag Table Layout Snippet","rel":"","context":"In \"tables\"","block_context":{"text":"tables","link":"https:\/\/codemyui.com\/tag\/tables\/"},"img":{"alt_text":"Crooked Falling Table Layout in Pure CSS","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/06\/Crooked-Falling-Table-Layout-in-Pure-CSS.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/06\/Crooked-Falling-Table-Layout-in-Pure-CSS.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/06\/Crooked-Falling-Table-Layout-in-Pure-CSS.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/06\/Crooked-Falling-Table-Layout-in-Pure-CSS.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":30262,"url":"https:\/\/codemyui.com\/image-to-coffee-table-book-cover-effect-using-pure-css\/","url_meta":{"origin":25637,"position":5},"title":"Image to Coffee Table Book Cover Effect using Pure CSS","author":"Hima Vincent","date":"May 31, 2021","format":false,"excerpt":"Code by: Lynn Fisher If you are having trouble with the pen, try the archived copy on\u00a0GitHub. Image to Coffee Table Book Cover Effect Snippet","rel":"","context":"In \"book inspired\"","block_context":{"text":"book inspired","link":"https:\/\/codemyui.com\/tag\/css-flip-book\/"},"img":{"alt_text":"Image to Coffee Table Book Cover Effect using Pure CSS","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/05\/Image-to-Coffee-Table-Book-Cover-Effect-using-Pure-CSS.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/05\/Image-to-Coffee-Table-Book-Cover-Effect-using-Pure-CSS.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/05\/Image-to-Coffee-Table-Book-Cover-Effect-using-Pure-CSS.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/05\/Image-to-Coffee-Table-Book-Cover-Effect-using-Pure-CSS.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/25637","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/comments?post=25637"}],"version-history":[{"count":2,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/25637\/revisions"}],"predecessor-version":[{"id":25640,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/25637\/revisions\/25640"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/25638"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=25637"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=25637"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=25637"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}