FancyTables: Several styles and colors, including PSD, CSS and Bootstrap versions
25Creating HTML tables can be a little intimidating for us, they are kind of tricky, and don’t turn out all that great sometimes.
Given that, most of the times we end up making them using UL and LI tags because they are more intuitive to style. However, we’ve discover that the TABLE tag is quite powerful and gives you a lot of flexibility. It should be used more often, every time we can.
With all the experiences we’ve had implementing tables, we decided that it was a good idea to create a library that helped us creating them faster, so we created a collection of CSS classes which don’t use any image to style the tables. In order to enhance our tables, we just have to create the table markup and add the classes on the CSS file for pretty cool results.
In today’s post we’re sharing this CSS table styles called FancyTables, so that you can download and use them in your projects.
There are two versions, one that works as an extensions of Bootstrap, while the other is a standalone build.
We’re eager to get feedback on this, and if there is something that you’d like to add to them we’ll be glad to hear from you about it. Remember to check our awesome plugin, Slider Shock for more quality content for your website or WordPress blog.
In this sample video, you can take a look at how FancyTables Works and how to use it.
Basic usage
1. Reference the css file ‘table-party.css’ in your html or php file.
2. Create the table markup, add the class ‘table’ and the class that gives your table the custom look: e.g table-black.
</pre> <table class="table fancy-table"> <thead> <tr> <th>...</th> <th>...</th> </tr> </thead> <tbody> <tr> <td>...</td> <td>...</td> </tr> </tbody> </table> <pre><!-- Available Styles table-black table-fancy table-chronos table-water table-wine table-red table-green table-brown table-blue -->
3. Enjoy it.
Follow us
Rss feed
-
Download PSD version Includes the PSD version.
- Buy Commercial $19 Includes all versions: CSS, Bootstrap and PSD.
- Become Premium only $14 more Get this set bundled with tons of resources (icons, themes, design sets, vectors and much more)
Some other freebies:
Leave a Reply
Full DesignShock Bundle
Get all our collections. Expand
- . More than 2 million individual icons
all grouped in 770 sets with vector source files. - . All icons area editable in their respective source file.
- . 990+ templates and counting.
- . 100.000 design elements.
- . 350+ wordpress themes always up-to-date with latest wp version.
- . 400+ pre-designed Wordpress and HTML themes.
- . support 24/7
- . Weekly updates
nice one … love it 🙂
Great you love it shakil.
Bootstrap is the trending framework for web designers. Pricing tables on bootstrap is a cool one. Thanks
yes, we are using and recommending it a lot!, it’s a great framework. actually all our themes are bootstrap ready.
All table designs are great. These FancyTables are very useful. Thanks for sharing.
Saha, yes, these have been very useful for us.
Wow, these do look great! What is comparability like for IE6 – IE8?
Uhm, a bit limited actually.
hi juan Pablo
one major feature your could add is
this example http://quanticalabs.com/script/css3-web-pricing-tables-pack-grids-/234948
on mouse hover pop up with shadow or glow also a border
this would be very helpful
regards
Andy
Andy, yeah, tha’s nice, will work on it.
Nice!! I have a reseller hosting account that I still have not made a website for. One of the things holding me back was pricing tables. Thanks!
Su, that’s great, hope these tables can help you complete that specific project dude.
hi, nice work~ love it so much.
well, I have sent the email, but still can’t download the file. when my mouse hover the button, it can’t click it. please help.
Mary, please check again.
Great looking !!! Excellent work.
Thanks Kari