The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

#61: Basic Table Styling with CSS

Tables are great. They are perfectly suited for use on the web. That is, for displaying tabular data! In this screencast we'll cover what that actually means, take a look at a table, the markup that creates it, quirks and things-you-should-know. Then we start styling it up with CSS and quickly touch on some jQuery bonus stuff at the end.

Links from Video:


  1. Mghmg
    Permalink to comment#

    nice tutorial

    thanks a lot very useful

  2. Harald
    Permalink to comment#

    Great screencast. Was interessting event thou I knew some of the stuff but I learnd a lot of new stuff too. Kinda didn’t understand the css tables stuff earlier, but you cleared that up nicley. Really like the jquery stuff. Looking forward to the next screencast. :o)

  3. Art Webb
    Permalink to comment#

    You so read my mind. I am working on a project now that screams for a table.


  4. Ian
    Permalink to comment#

    Very useful screencast. Nice and concise.

    One thing I would have done differently, would be to use text where you have the ‘tick’ and ‘exclamation marks’, then use CSS image replacement to replace the words with the images – probably by using a span around the text. Seems a bit more semantic than relying on the alt tag to me, but I’m not sure how search engines/screen readers would see these techniques differently.

    <td><span class="yes">Yes</span></td>

    • Chris Coyier
      Permalink to comment#

      Yep definitely, that would be a good way to go! In addition, the icons should be a CSS sprite not inline images that need to load a zillion times (instead of once).

  5. Drum
    Permalink to comment#

    Great tutorial tnx!

  6. Snookerman
    Permalink to comment#

    Thanks Chris, just what I wanted. I can’t believe I requested this just four days ago, you are quick! I just need to watch it but I’m sure it’s awesome, heheh..

  7. jay
    Permalink to comment#

    I with Ian. Safari has a bad habit of not displaying alt tags on small images when images are disabled anyway. Not that using sprites always solves this, just have to get creative on markup.

    • Chris Coyier
      Permalink to comment#

      I’d love to see an example of this if you can cook one up. That would be a pretty serious bug.

  8. John Grinde
    Permalink to comment#

    Hey Chris, instead of using jQuery for the row highlighting, couldn’t you do something like tr:hover td { background: red; }? Or is this not cross-browser reliable?

    • Chris Coyier
      Permalink to comment#

      Yes you absolutely could do that, that would be the ideal way, it’s just dumb IE doesn’t do hovers on anything but anchor links. The jQuery method is just safer.

  9. Navdeep
    Permalink to comment#

    Very nice tutorial Chris.


  10. Al
    Permalink to comment#

    does not dislay as well in IE7 as FF2

  11. savagecorp
    Permalink to comment#

    i can’t wait to see an advanced table screen-cast !!!

  12. Vasili
    Permalink to comment#

    I hate when you get those little things that mess up the code (like the callback in jQuery). I’ve thought myself, especially when working with jQuery, to check to make sure that the event handler is closed.

    Just wondering, what microphone are you using?

  13. Kevin
    Permalink to comment#

    Thanks Chris, that specificy tangent solved hours of grief!!! I didn’t know that a parent with an id’s styles overrode a child’s classes.

  14. Tutorial City
    Permalink to comment#

    Very cool! I think it’s very important to have a good looking table

  15. Jussi
    Permalink to comment#

    Thanks Chris, nice stuff once again from you. I really love the way you are doing stuff, not too much editing out if everything is not working as intended.

    Laughing maybe abit too hard on some of your comments (watching these normally quite late), have to hope neighbors are not too mad at me :)

    Jussi from Finland.

  16. Jarod
    Permalink to comment#

    Cool. I’ll have to check this out tomorrow if I get some downtime at the office.

  17. Fred
    Permalink to comment#

    A good videocast Chris, enjoyed it and learnt a couple of bits, cheers.

  18. Ariyo
    Permalink to comment#

    Very Nice Chris. Thanks! I learned a lot. I can’t wait for the advance screencast.

  19. Jim Zak
    Permalink to comment#

    Hey Chris, yet again, another great instructional video :) Just finished up my html/xhtml class at my local C.C. they covered css and intro to javascript. But still don’t cover what the kewl techniques that you cover so I still continue to learn a lot from you. Love the jQuery stuff too.

    I am always recommending to my class mates to check out your site so they can learn some kewl stuff from you.

    Keep up the great work and as usual, I’m always looking forward to your emails with the newest video tutorials etc… from CSS-Tricks.

    Thanks a Billion,

    ~Jim Zak~

  20. z0r
    Permalink to comment#

    Chris, you are amazing!
    Found you with the help of wpcandy and webtuts and you are the person who helped me to understand the CSS basics (and further). Thx alot ! Cheers from Russia!

  21. nkrstevski
    Permalink to comment#

    You can style different columns without giving classes to separate cells – just go out and search for colgroup/col tags combination to achieve this effect (like here: link)

  22. Nyte
    Permalink to comment#

    Hey Chris,

    I really like your video’s (only seen a few, but plan to watch them all). I found this website at the start of my internship at a web-development company and this website helped me a lot with the assignments I get (i’m a total newbie when it comes to CSS).

    Also, you’re little troubleshootings are quite interesting as well. I learned where to look at when I screw something up myself!

  23. Jon Thomas
    Permalink to comment#

    I like your tone. Nice vid. Not drab and boring like some. U cracked me up a bit.

  24. Aleksander
    Permalink to comment#

    I love your tutorials! This one was very helpfull to me;)
    Your voice is a bit low sometimes.

    Could you do more tutorials on jQuery and AJAX in jQuery? I’m working on a site and want to use AJAX and jQuery on it, but i don’t manage it too well by this date;)

    Regards from Norway;)

  25. tommyalf

    Very nice tutorial Chris but i believe that it is not complete. I can look only about 75%. I’m fall in mistake? thank’s tommyalf (

    • Aleksander

      The movie is complete. I watched the whole movie. And at the end he say “ok, thanks bye” or something like that;)

      Try SHIFT + F5

  26. rob

    I was yelling at the screen when you had that image problem, you couldn’t hear me though.

  27. Web4YOU

    Great stuff, very useful I love it! Keep up to good work.

  28. Johnb

    I was a bit disappointed to see you add classes to table cells in order to highlight a column. I’m not a Table master, but even i knew about the col and colgroup tags! :)

    The book “pro css and html design patterns” by Michael Bowers, Apress explains how browsers calculate column widths. There’s a lot more to it than you think! It’s very interesting but quite complex. I forget how it works just minutes after reading. :)

  29. Florian Dellé

    Hey Chris, this was the second Screencast I watched (after Episode 41 – WP as a CMS) and I am really amazed. I created step by step a table with your help and it looks great.

    Thanks for your help! :)

  30. Lee Floyd
    Permalink to comment#

    No good examples of why CSS table styles are useful?
    I would say the best example is equal-height columns.

    Forget backgrounds for faux-columns or any other technique, all you need is to set display:table, display:table-row, and display:table-cell as described in the screencast. The only problem is IE6 doesn’t support it.

    • Chris Coyier
      Permalink to comment#

      Or IE 7, which is the real kicker of why CSS tables are a long way from being truly useful.

  31. roma
    Permalink to comment#

    Not bad, I liked it

  32. Savageweb
    Permalink to comment#

    I was using jQuery for the first time to highlight a row on a table. As you said, I had problems only IE, but the first row after my header row worked fine, so I alternated the rows with and it worked fine in IE and another browser I tried. Not sure why.

  33. autoreviewblog
    Permalink to comment#

    Great looking tables, but a few unanswered questions: Why do IE7 and below need border-collapse:collapse? And why does border-collapse:collapse prevent rounded corners on modern browsers?

  34. Ibrahim Vatih
    Permalink to comment#

    I just need this tutorial to makeover my site. Thanks Chris (y)

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed