10 CSS Table Examples

by on 30th August 2007 with 117 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

117 Comments

Comments & Discussion

117 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.

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

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

  8. WOW thanks for sharing. Good Stuff.

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

  10. Dave says:

    Thanks for the list of css table designs

  11. Soumya says:

    Not sufficient .. Plz put lots of designs..

  12. Chris says:

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

  13. Hey,
    Thank you for this!!

    Used at one of my sites!!

  14. tranthanhluan says:

    Thanks!!!!!!

  15. Stránky says:

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

  16. Good stuff. Thanks for sharing this css techniques.

  17. 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/

  18. J. Smith says:

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

    Thank you..

  19. please refer to my home page. thx!

  20. HuyDX says:

    it’s very useful article for me.
    Thanks

  21. Farooq says:

    Thanks. I have got much to learn CSS

  22. Virendra says:

    good one!

  23. Developer Jo says:

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

  24. Seo says:

    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…

  25. Leo Imyan says:

    Finally, I got this one, thks

  26. cymiz says:

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

  27. Alegria says:

    Saved me hours! Thanks!

  28. dhanesh mane says:

    its saved my hours. thx a ton

  29. really nice css tables

  30. Amit says:

    I m using first one

  31. hamed says:

    wonderful, thank u so much

  32. Kristina says:

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

  33. francis says:

    Great examples! Thanks for sharing.

  34. Rakesh says:

    good, but is test

  35. Rakesh says:

    Sorry for previous one

  36. tech says:

    nice list, very good css styles! Rules!

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

  38. mindxstudio says:

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

  39. MA007 says:

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

  40. J. Hendrix says:

    Nice collection, thanks!

  41. 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/

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

  43. Martin says:

    very usefull tips. thanks

  44. good table… :D

    thanks.

  45. Nice tables, looking for inspiration.

  46. Thanks for sharing. great work!

  47. ricky says:

    Thanks for sharing, great resource on CSS. :)

  48. Graeme says:

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

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

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

  51. Jesús says:

    I need it, good news, thx.

  52. Eli Geske says:

    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.

  53. jucelin says:

    Well,I want to get the color form them…

  54. 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

  55. Qadir says:

    Nice … Thanks for sharing…

  56. Maya Penagos says:

    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!

  57. asp.net mvc says:

    very nice table templates thanks

  58. Jesús says:

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

  59. cute says:

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

  60. IP intel says:

    nice collection. Where is the 10th?

  61. Sandeepa says:

    Thanks for css

  62. saqulan says:

    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

  63. gtwebworx says:

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

  64. Marvin says:

    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.

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

  66. uki6 says:

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

  67. Danny Watson says:

    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.

  68. w3t says:

    Really very useful article

    Thanks David

  69. Divyanshu says:

    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.

  70. Charles says:

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

  71. Mukesh says:

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

  72. awesome ! thanks for the share

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

  74. Makhan Butt says:

    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/

  75. Jakob says:

    Very nice collection! Thank you for sharing

  76. Bobby Bash says:

    good examples i have found on this article thanks…

  77. sylhet says:

    yes, i am searching something like this.

    Thanks for sharing such blog.

  78. Shekhar says:

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

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

  80. kair says:

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

  81. douche bag says:

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

  82. sudishth says:

    css export drupalbuilder

  83. innam says:

    nice tables. i like them

  84. Itsallabout says:

    very nice examples…

  85. idan says:

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

  86. iwan says:

    nice table style,, thanks for share, good job

  87. Fuarları says:

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

  88. Peter says:

    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

  89. vital psp says:

    informative collections

  90. Manna Shake says:

    very useful collections

  91. mahmud says:

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

  92. Opencart says:

    Thanks for tutorials and example.
    Solved my problem.

    Thanks again.

  93. David Ross says:

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

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

  95. Gary says:

    my blog – website (Gary)

Leave a Comment

Subscribe
Membership
About the Author