10 CSS Table Examples

by on 30th August 2007 with 116 Comments

Today we’re going to take a look at a selection of beautiful tables styled using CSS. These are sourced from a variety of different sites. If you’re interested in learning how to do this yourself, be sure to take a look at a few of our CSS tutorials!

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. Redesigning a Simple Table

Simple CSS Table

A series of excellent examples, showcasing how to simplify a basic data table by eliminating unnecessary interface elements.

6. CSS Table Gallery

The CSS Table Gallery is a showcase of how CSS and data tables can work together to create usable and pretty results. It’s a great way to see a bunch of interesting examples.

7. Various Table Techniques

Various Table Techniques

Tables styled with CSS rules are much more efficient, if done well, than the old method of using font tags, a lot of color tags, and more… These examples are forward thinking, and also degrade well to older browsers.

8. Firefox Theme Table Example

Reformat the Table

I banned the use of tables in my works when I first switched to CSS based layouts. But I was still missing the point of tables, tables are a way to markup tabular data. Once I got that point in my head, I started to think of things that really were tabular data such as the next example of Mozilla Firebird themes. Each row is a record of a theme and the columns are the fields for each theme.

9. The Table Ruler

With a bit of JavaScript / DOM sorcery, we can provide our visitors with the same functionality for long data tables in HTML, by applying rollover states to the rows. This could be implemented tediously by hand, of course, but it would be silly to do so. Instead, we will use the DOM to find the rows to highlight on mouseover.

Comments & Discussion

116 Comments

  • http://shadoz.com/css-template-03.htm Shadoz CSS

    very nice exmples of css tables.

  • http://www.kapilakan.com small business web design

    Thank for for info. Very helpful

  • http://www.plentyoftorrents.com John

    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

  • http://www.ashisoft.com Ashi

    good info! thanks

  • http://www.quape.com Quape – Singapore web design

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

  • http://www.datasys.co.in Hemant Seth

    Very useful. Big Thanks to the author.

  • http://www.zamshed.info Zamshed Farhan

    Very nice and helpful article.
    Many thnx goes to author.

    http://www.zamshed.info/tech/

  • http://www.itgraphix.com Affordable web design

    WOW thanks for sharing. Good Stuff.

  • http://sanchezcommercial.com Nancy Sanchez

    Thank you for the styling input! I NEED SOOOOOOO MUCH HELP! AHHRRFGH! @$^%!#

  • http://www.coolgarriv.com Dave

    Thanks for the list of css table designs

  • Soumya

    Not sufficient .. Plz put lots of designs..

  • http://www.websites-seo.gr Chris

    Thanks for the tutorial.It save it me hours :)

  • http://www.netbookfiles.com Netbook Downloads

    Hey,
    Thank you for this!!

    Used at one of my sites!!

  • tranthanhluan

    Thanks!!!!!!

  • http://atypic.cz Stránky

    Wow, thank you for nice stylish tables. I’d like to use one of them – should I make a hyperlink to your page?

  • http://www.milandesign.sg Singapore Web Design

    Good stuff. Thanks for sharing this css techniques.

  • http://www.zamshed.info Zamshed Farhan

    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/

  • http://watchese.com/ J. Smith

    I’ve already tried one of that for my site, its nice.

    Thank you..

  • http://www.mayworkshop.com Raymond Lenug

    please refer to my home page. thx!

  • Jeka

    Helpful

  • http://freelogic.pl/thumbnailer php rounded corners

    great work!!!

  • http://tutorials-tips-tricks.info/ HuyDX

    it’s very useful article for me.
    Thanks

  • Farooq

    Thanks. I have got much to learn CSS

  • Virendra

    good one!

  • http://www.devissues.com Developer Jo

    I LOVE the CSS and AJAX table in #3. I’m going to use that in a project right now…

  • Pingback: Design Tabel Pakai CSS « Utama Andri

  • http://seogadgets.blogspot.com/ Seo

    Still hard to learn…
    I wondering if ever photoshop or illustrator are able to export a fully functioning CSS file + xml file… that will awesome…

  • http://jukantisari.co.cc Leo Imyan

    Finally, I got this one, thks

  • http://www.cymiz.com cymiz

    it’s really amazing , coz i alway use table code before , thank.

  • http://www.shopnchill.com/alegria Alegria

    Saved me hours! Thanks!

  • Pingback: FAQ Blog - Creating a Table with Basic HTML

  • http://www.greensurfshop.com online surf shop

    Great list, thanks!

  • http://www.dhaneshmane.com dhanesh mane

    its saved my hours. thx a ton

  • http://www.dalvinderart.com rakesh

    gud

  • http://www.randknow.com Rand Know

    thanks alot :D

  • http://www.cheapleafletprinters.com Cheap Printing

    really nice css tables

  • http://www.amitpatil.me/demos/mobile/web/ Amit

    I m using first one

  • hamed

    wonderful, thank u so much

  • Pingback: Css tabell – Gör en produktjämförelse

  • http://www.logobilisim.com web tasarım fiyatları

    Thank you for this!!

  • http://tabletpccomparisonblog.com Kristina

    Beautiful CSS Table, I love A CSS Styled Table Part 2.

  • Pingback: CSS Table Examples « Telescope Studios

  • http://www.weblogportal.com francis

    Great examples! Thanks for sharing.

  • Rakesh

    good, but is test

  • Rakesh

    Sorry for previous one

  • http://techadictos.com/ tech

    nice list, very good css styles! Rules!

  • http://www.pricespakistan.com/ Aneeza Mubbashir

    it’s really amazing , coz i alway use table code before , thank.

  • http://www.mindxstudio.com mindxstudio

    Very good collection of css table, I am impressed, Thanks.

  • http://www.marketagent007.com MA007

    Thank you for taking the time to share these with all of us! Good stuff!

  • http://www.uitmuntend-webdesign.nl J. Hendrix

    Nice collection, thanks!

  • http://www.pragmaticdesign.co.uk Wolverhampton

    Nice collection, thank you.

    Here’s a CSS table, with lots of CSS3, that you might want to look at: http://www.pragmaticdesign.co.uk/services/web-design-seo/

  • http://pbbsuperupdate.blogspot.com/ Pinoy Big Brother Season 4

    This is the tutorial what I am looking. Thanks for the great help here :)

  • http://www.voorbeginners.net/ Martin

    very usefull tips. thanks

  • http://www.computeriskomputer.blogspot.com Nanang Gunawan

    good table… :D

    thanks.

  • http://www.craigmcpheat.co.uk Craig McPheat

    Nice tables, looking for inspiration.

  • http://www.progresiv.com.hr/ Progresiv web design

    Thanks for sharing. great work!

  • http://www.webfire.co.za ricky

    Thanks for sharing, great resource on CSS. :)

  • Graeme

    Here are some more table styles! http://pythoughts.com/table-style-css/

  • http://www.webdesignthailand.co web design thailand

    very nice list of css tables. Very usefull for webdesigners like us. THank you for sharing this list !

  • http://www.yangtze.com Yangtze Cruise

    This is exactly what i needed, a very good example for css learners

  • http://www.jesusweb.es Jesús

    I need it, good news, thx.

  • http://eligeske.com Eli Geske

    I was looking for an article like this. Just found it today. Nice Stuff! There is a table generator that helps with simpler css implementation at http://gridstyler.com. It would mainly help for table styles above 1, 2 and 4. More fancy ones you would need to use some of the other techniques above. But check it out, it saves a lot of time.

  • http://www.jucelin.cn jucelin

    Well,I want to get the color form them…

  • http://www.baliwebindo.com Web Hosting Indonesia

    Useful articel that help me to decide how to make nice css table for my client. I just searching over the internet and land to your site. thanks lot

  • http://www.itheight.com Qadir

    Nice … Thanks for sharing…

  • http://www.wordsdepot.com/Article/Best--Way-to-Pay-off-Your-Credit-Cards/362457 Maya Penagos

    You really make it appear so easy together with your presentation but I to find this matter to be actually something which I believe I’d by no means understand. It sort of feels too complex and very vast for me. I am taking a look ahead to your subsequent post, I’ll attempt to get the dangle of it!

  • http://www.bayramucuncu.com asp.net mvc

    very nice table templates thanks

  • http://www.jesusweb.es Jesús

    I need it, good idea and good info. thank you.

  • http://www.cute.com cute

    I need it, good idea and good info. thank you.

  • http://ipduh.com IP intel

    nice collection. Where is the 10th?

  • Sandeepa

    Thanks for css

  • http://www.itpakistan.com saqulan

    SMS Marketing is the latest invention of marketing because the number of mobile users today are much more then the viewers, readers or listeners through other mediums. SMS marketing is the basic need for all companies because it is successful marketing source and easiest way for the promotion of any business in Pakistan. ITPakistan provides most effective and reliable SMS marketing services in Lahore Pakistan.
    Are you looking for an effective way to communicate to your customers?
    With Bulk SMS Marketing:
    What You Can Do with SMS Marketing?
    • Run SMS Marketing Campaigns in all over the Pakistan
    • Sale your new and used cars in Lahore and all over the Pakistan
    • Sale your property in Lahore and all over the Pakistan
    • Sale your services
    • Product Launch SMS
    • Send Promotions SMS to your customers
    • Send Announcements SMS
    • Send SMS Reminders to your Client
    • Send SMS Greetings
    • Send SMS Alerts
    • Send SMS Notifications
    • Polling SMS (for Voting)
    • Or any type of SMS marketing that you wants
    then please visit our sms marketing company web site
    http://www.itpakistan.com
    or call 0092-333-4109932

  • http://gtwebworx.com/ gtwebworx

    i’m looking for CSS Styled tables that’s why i’m here. Thanks for sharing this post. I’m sure to get one .

  • http://xpdrivers.com/asus/_2_135295.cfm Marvin

    I cannot believe that this technique is available long time ago… I am new to web designing and I this inspire and helps me so much.
    thanks.

  • http://predcasna-ejakulacia.sk predcasna ejakulacia

    Very useful. i have used it on my site. thanks

  • http://www.uki6.net uki6

    great article, thx!
    css is very powerful these days.

  • http://www.onlinecomputersmarket.com Danny Watson

    Only if all the tutorials were so straight forward. I want to know that much and to share it in the same manner but it will take me years.

  • http://w3t.in/ w3t

    Really very useful article

    Thanks David

  • http://www.nyabo.mn crystal

    hi good morning

  • http://www.gocreations.gr/ Ιστοσελίδες Κέρκυρα

    useful article for sure

  • http://www.myh3r3.com Divyanshu

    Nice tables indeed.Ohhh by the way you can have a look at my blog too if you would like.
    By Divyanshu
    And have a great day mate.

  • http://www.charlesyarbrough.com Charles

    how do you just have a box? Is that called a layer? I need to place a box over the top of a page.

  • http://domains.india.dj Mukesh

    Nice but need some new designs of Tables ..
    Any ways thanks

  • http://chilitemplates.com Free Templates

    awesome ! thanks for the share

  • http://www.boutiquesnepal.com boutiques nepal

    all list are good and well designed ,and help me alot …….thanks.

  • http://www.handycss.com/ Makhan Butt

    For the methods particularly, you could assess out this web page which has CSS for many esay, many table styles:

    http://www.handycss.com/tips/fancy-tables-in-css/

  • http://www.password-depot.com Jakob

    Very nice collection! Thank you for sharing

  • http://www.travelguid.biz Bobby Bash

    good examples i have found on this article thanks…

  • http://www.esylhet.com sylhet

    yes, i am searching something like this.

    Thanks for sharing such blog.

  • http://www.snswebtech.com Shekhar

    Great info! Thanks. Nice examples and helpful information. Mostly for web developers

  • http://webdesignchennai.in web design chennai

    Very useful. i have used it on my site

  • http://don'thavewebsite kair

    i am learning web design it helps me to easy to use this tags

  • http://eatshit@forwastingmytime.org douche bag

    eatshit for wasting our time. these are not examples. they are pictures douchebag.

  • http://drupalbuilder.com pankaj

    css

  • http://drupalbuilder.com pankaj kumar nirala

    css drupalbuilder

  • http://drupalbuilder.com sudishth

    css export drupalbuilder

  • http://toptensview.com/ innam

    nice tables. i like them

  • http://www.itsallabout.in/ Itsallabout

    very nice examples…

  • http://www.CSSTableGenerator.com idan

    Great CSS Table Designs
    csstablegenerator.com/css-table-design/0/all/

  • http://www.rabbani.co.id iwan

    nice table style,, thanks for share, good job

  • http://fairhere.com/ Fuarları

    This is very nice collection for css table styles. Thank you so much.
    Regards

  • http://www.hiteshyadav.in hitesh

    nice article

  • http://designmycss.com Peter

    For those people in need of help with styling tables, I have created a CSS table designer for all to use – http://designmycss.com/table-designer

  • http://networkscams.wordpress.com/ vital psp

    informative collections

  • http://mannashake.wordpress.com/ Manna Shake

    very useful collections

  • http://www.eduresource.info mahmud

    OOps. Just awesome. Your tutorials are so easy to understand to new-bies like me. Thanks for these great job. Carry on.

  • http://www.opencart2u.com/ Opencart

    Thanks for tutorials and example.
    Solved my problem.

    Thanks again.

  • http://patentico.com Patentico

    Thanks!

  • http://arganoil.uk.com David Ross

    The crazy egg example was great, gave me some much needed inspiration for my first css table.

  • http://www.pdvictor.com Peter Drinnan

    Example 2 is perfect for me. The CSS is really simple too.

  • Pingback: Marty's WebPress | Tables can be beautiful too!

  • Pingback: Web Design » Tables Study Assignment

  • Pingback: css tables | Annotary

  • Pingback: Create Fancy HTML tables using CSS

  • Pingback: Css Templates | Emmanuel Flores

  • Pingback: Links 4 You | Momin Iqbal

Subscribe
Membership
About the Author