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:
- View Demo
- W3C on Tables
- Nice tutorial from Veerle on CSS Table Styling
nice tutorial
thanks a lot very useful
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)
You so read my mind. I am working on a project now that screams for a table.
Thanks.
@webb_art
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>
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).
Great tutorial tnx!
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..
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.
I’d love to see an example of this if you can cook one up. That would be a pretty serious bug.
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?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.
Very nice tutorial Chris.
@3drockz
does not dislay as well in IE7 as FF2
i can’t wait to see an advanced table screen-cast !!!
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?
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.
Very cool! I think it’s very important to have a good looking table
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.
Cool. I’ll have to check this out tomorrow if I get some downtime at the office.
A good videocast Chris, enjoyed it and learnt a couple of bits, cheers.
Very Nice Chris. Thanks! I learned a lot. I can’t wait for the advance screencast.
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~
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!
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)
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!
I like your tone. Nice vid. Not drab and boring like some. U cracked me up a bit.
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;)
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)
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
I was yelling at the screen when you had that image problem, you couldn’t hear me though.
Great stuff, very useful I love it! Keep up to good work.
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. :)
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! :)
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.
Or IE 7, which is the real kicker of why CSS tables are a long way from being truly useful.
Not bad, I liked it
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.
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?
I just need this tutorial to makeover my site. Thanks Chris (y)
@ChrisCoyier Thanks for the nice video on tables. I have a question about table’s column width, so I posted a question on css forums: https://css-tricks.com/forums/topic/fixed-percentage-and-auto-all-in-one-table/ If you get time then can you please try to answer it?