Design Shack - Web design showcase, CSS tutorials and web standards


Sponsors

PSD to HTML
PSD to HTML
Web Hosting UK
PSD to XHTML
Dedicated Server Hosting

About

Design Shack showcases inspiring web design, alongside resources and tutorials for you to succeed in the same way. It is brought to you by David Appleyard, a freelance designer who is available for work.

10 CSS Table Examples


Written by David Appleyard, On 30th August 2007.
Filed in Articles, CSS, HTML, Layouts.



1. A CSS Styled Table

A CSS Styled Table

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.

2. A CSS Styled Table Part 2

A CSS Styled Table 2

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

Dynamic AJAX CSS 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.

4. Tables With Style

Tables With Style

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.

5. CSS Table Gallery

6. Styling tables with one class

7. Redesigning a Simple Table

8. Various Table Techniques

9. Firefox Theme Table Example

10. The Table Ruler

Tags: , , , ,



6 Comments


  1. Shadoz CSS says:

    very nice exmples of css tables.

  2. Thank for for info. Very helpful

  3. John says:

    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

  4. Ashi says:

    good info! thanks

  5. great info ! Thanks . Good examples on css table designs.

  6. Hemant Seth says:

    Very useful. Big Thanks to the author.


Leave a Reply