#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:

Comments

  1. User Avatar
    Mghmg
    Permalink to comment#

    nice tutorial

    thanks a lot very useful

  2. User Avatar
    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. User Avatar
    Art Webb
    Permalink to comment#

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

    Thanks.
    @webb_art

  4. User Avatar
    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>

    • User Avatar
      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. User Avatar
    Drum
    Permalink to comment#

    Great tutorial tnx!

  6. User Avatar
    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. User Avatar
    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.

    • User Avatar
      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. User Avatar
    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?

    • User Avatar
      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. User Avatar
    Navdeep
    Permalink to comment#

    Very nice tutorial Chris.

    @3drockz

  10. User Avatar
    Al
    Permalink to comment#

    does not dislay as well in IE7 as FF2

  11. User Avatar
    savagecorp
    Permalink to comment#

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

  12. User Avatar
    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. User Avatar
    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. User Avatar
    Tutorial City
    Permalink to comment#

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

  15. User Avatar
    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. User Avatar
    Jarod
    Permalink to comment#

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

  17. User Avatar
    Fred
    Permalink to comment#

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

  18. User Avatar
    Ariyo
    Permalink to comment#

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

  19. User Avatar
    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. User Avatar
    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. User Avatar
    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. User Avatar
    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. User Avatar
    Jon Thomas
    Permalink to comment#

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

  24. User Avatar
    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. User Avatar
    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 (tommyalf.blogspot.com)

    • User Avatar
      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. User Avatar
    rob

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

  27. User Avatar
    Web4YOU

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

  28. User Avatar
    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. User Avatar
    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. User Avatar
    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.

    • User Avatar
      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. User Avatar
    roma
    Permalink to comment#

    Not bad, I liked it

  32. User Avatar
    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. User Avatar
    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. User Avatar
    Ibrahim Vatih
    Permalink to comment#

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

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

Submit a Comment

icon-closeicon-emailicon-linkicon-menuicon-searchicon-tag