Design Shack - Web design showcase, CSS tutorials and web standards
About
Design Shack showcases inspiring web design, alongside resources and tutorials for you to succeed in the same way. It is carefully curated and edited by Josh Johnson and David Appleyard.
10 CSS Table Examples
Further to my article about the creation of a CSS calendar the thought crossed my mind to show you an example on how you can style a table using CSS. The data of tables can be boring so all the more reason that we need to attract attention to it and make it as pleasant to read as possible. Presentation and design with some basic accessibility rules in mind is the way to go.
This article is about the proper usage of tables, for tabular data. How you can implement them with accessibility in mind and how to make them appealing for the eye using CSS.
3. Creating a Dynamic CSS & AJAX Table
I like Crazy Egg’s pricing table on their Pricing & Signup page. When you click on “Sign Up” for an option, that plan’s column highlights, the other plans vanish, and a signup form takes their place. There is a number of impressive things happening within this small area. I wanted to try and recreate the behavior step by step, and share the power of combining CSS, JavaScript, and images in clever ways.
It might not seem like it but styling tabular data can be a lot of fun. From a semantic point of view, there are plenty of elements to tie some style into. You have cells, rows, row groups and, of course, the table element itself. Adding CSS to a paragraph just isn’t as exciting.
6. Styling tables with one class
9. Firefox Theme Table Example
10. The Table Ruler
very nice exmples of css tables.
Thank for for info. Very helpful
Looks really good. I especially like the Crazy Egg one, that would make a good advertisement box.
I have some examples of these in use on my webpage here.
http://www.plentyoftorrents.com
good info! thanks
great info ! Thanks . Good examples on css table designs.
Very useful. Big Thanks to the author.
Very nice and helpful article.
Many thnx goes to author.
http://www.zamshed.info/tech/
WOW thanks for sharing. Good Stuff.
Thank you for the styling input! I NEED SOOOOOOO MUCH HELP! AHHRRFGH! @$^%!#
Thanks for the list of css table designs
Not sufficient .. Plz put lots of designs..
Thanks for the tutorial.It save it me hours :)
Hey,
Thank you for this!!
Used at one of my sites!!
Thanks!!!!!!
Wow, thank you for nice stylish tables. I’d like to use one of them – should I make a hyperlink to your page?
Good stuff. Thanks for sharing this css techniques.
It’s a fantastic CSS collection I have ever seen. Many thnx goes to author. not only that, I also keep it personal website collection.
http://www.zamshed.info/tech/
I’ve already tried one of that for my site, its nice.
Thank you..
please refer to my home page. thx!
Helpful
great work!!!