08.3030+ Nicest Table CSS Designs You Can Apply Into Your Project
Table is a very basic thing in HTML and website building. Many times, when I encounter a table in my project, I usually need to find out a way to style the table to make it nice and be suitable with the website. Fortunately, a lot of techniques and designs of table are already available on the web together with tutorials teaching people to build a very neat and nice table. In this article, I would like to introduce those techniques and designs so that you can refer to when you need to apply one of them into your project.
Let’s start from neat & simple designs from http://fluidmind.org
This design is a very simple design. However, it manages to change all the default border of a table and add in 1px border to make the table nice and neat to view.
This design improves from the first one by adding in the background color and make the table easy to see vertically.
This design improves the horizontal readability and enhances the view by making the header color outstanding from the rest of the table.
By making the orange color and dotted line in the inner table, the design makes the table outstanding and very eyes pleasing.
Using alternating colors for odd and even rows also can enhance a lot on readability of the table. I also like this kind of design and use a lot in my project as its simplicity yet very eyes pleasing
This design is very suitable for data emphasis as it uses hot color to make the table header very outstanding from the rest
We will move on to the table sorter jQuery Plugin at motherrussia.polyester.se. This plugin utilizes jQuery to build the table but the design is also very nice and worth taking a look at
In this design, it uses the white text on the black color and makes the header very outstanding by using very contrast color and nice sorting icon. Notable features of this plugin are allowing all the visible columns sortable and embedded ability with jQuery TableSorter Pager to make paginate the table.
Ext JS also has very nice and table (grid) design to be best suited with their others nice widget.
The color and the gradient Ext JS uses make the table looks simple yet outstanding. Row color will be changed when the mouse is over. Currently, they are 2 themes for the table, blue and gray theme. You can check for this example here
Another very nice table design is from Ext JS. In this design, Ext JS has showed that they can put in everything inside the table e.g, selection box and check boxes. The way Ext JS makes the thing so nice that it always attracts the user to use. You can check out the example here to have your own experience
I like this design the most as its elegance and the 3D look and feel. In this design, the edge of the table is design so that it looks like the whole table is a 3D table. The colors are also extremely nice and eye catching for header, alternating rows and the highlighting row. In this example, they also add in the tooltip for the row that is highlighting. You can check this example here
Another alternating color for rows table design. You can check the tutorial here
A very nice design is from famous blog Veerle.com. Besides the well-chosen color for the table, I also like the font that is used in this design.
This is a very outstanding design. By using the blue color for alternating rows and the red color for the icons and text, it makes the table attracted to the viewer and increases the readability.
This design utilizes the orange color with different contrasts for the header and the first column. This is very good when you need to emphasize a cell data in a big table, as it will highlight the cell when you mouse is over the cell. Nice and creative design! Check out this example here
Following are the best table designs taken from Smashing magazine. Enjoy and apply whenever you can as the design so simple to use yet so nice
Last but not least, this link - http://icant.co.uk/csstablegallery/ - is the website containing a lot of the CSS Table Designs that you can go and take a look at all other’s table design. Currently, there are 90+ table designs.