FancyTables: Several styles and colors, including PSD, CSS and Bootstrap versions.
Creating HTML tables can be a little intimidating for us, they are kind of tricky, and sometimes we don’t get a good result in our table.
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 a very powerful tag which gives you a lot of flexibility and should be used more 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 class which don’t use any image to style the tables, in order to enhance our tables, so that we just have to create the table markup and by adding the classes on the CSS file the it will look pretty cool.
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 version, one that works as an extensions of bootstrap and another that works standalone.
We’re eager to get feedback on this styles, and if there is something that you’d like to add to them we’ll be glad to hear from you about it.
In this sample video, you can take a look at how FancyTables Works and how to use it.
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.