78 Comments
- inactive, on 08/14/2008, -1/+40Funny comments on Smashed "Tables still suck!"
Yeah - if you use them for layout they suck. If used for...well...tables...then what is your problem? - WesleyD, on 08/14/2008, -0/+35From #9.
"Cons: Needs hack to get the background work in IE 6"
Damn IE.. always there to ***** up the party. - Smwbigboss, on 08/14/2008, -0/+17The comments on that site really seem to hate tables.
- vainbrian, on 08/14/2008, -1/+15You could always get some inspiration here http://icant.co.uk/csstablegallery/index.php
lots of pre-made css tables to choose from - quii, on 08/14/2008, -0/+13They're noobs basically.
- sloppychris, on 08/14/2008, -0/+13Join the movement: no special treatment for IE ever again.
- aksn1p3r, on 08/13/2008, -3/+13Thats one of the best designs for tables I've ever seen.
- subxero37, on 08/14/2008, -0/+8Tables are not site layout devices. They are for displaying and manipulating tables of data, and despite the web's recent hatred for them, they are not bad HTML/XHTML elements.
There is really no reason to use divs and spans for tables when there is a perfectly good table element designed to do exactly what you want it to do. - boomybx, on 08/14/2008, -0/+8I didn't know about the colgroup tag. Pretty useful !
- Natnie, on 08/14/2008, -0/+7Yeah. Digg me down... nobody explain why... keep me ignorant...
- inactive, on 08/14/2008, -0/+6Ha ha, I know, my inner web developer always has a brief struggle with my inner FPS-er any time I hear the acronym... web dev usually wins, though, since I'm better at floats then headshots...
- Zounas, on 08/13/2008, -1/+6They forgot tr:nth-of-type(odd) and other CSS3 nifties.
- inactive, on 08/14/2008, -0/+5you saw, you conquered?
- inactive, on 08/13/2008, -1/+6This is sweet stuff. Damn't maki, you beat me to it. :-)
- ShinuToki, on 08/14/2008, -0/+5"tr:hover rules don’t work in IE 6"
"Add large border-left and border-right with the same color as background. You can use transparent borders if you want, but IE 6 screws it all up."
"The necessary tr:hover effect does not work in IE, suitable for certain types of tables only"
"Unfortunately, IE 6 goes berserk and the table appears ugly, so the most stable way to do this is to put ID or class to all four corner cells of the table. "
"You can add 50% grey png-image as background-image of the cells to improve readability, and that means that you need a CSS-hack to make it work in IE 6"
"Needs hack to get the background work in IE 6, needs images"
IE6 rules. - rd3k, on 08/14/2008, -0/+5Not very widely supported yet sadly, thats probably why.
- inactive, on 08/14/2008, -0/+5cross browser compatibility, code legibility, code bulk, simplified layout dependency, lack of or confusion concerning semantic value, use of a markup language as a layout language, disregarding separation of content and presentation... need I say more?
- inactive, on 08/14/2008, -1/+5tables are for tabular data only. this should be part of every aspiring web developer's mantra.
- rpardz, on 08/14/2008, -0/+4Using tables for what they were originally intended... I.e. not website layouts.
- inactive, on 08/14/2008, -0/+4Natnie,
CSS allows the use of divs for layouts instead of tables. Using tables for layout purposes used to be the norm but that method is being deprecated. You can contain your entire layout in CSS and only a few lines of XHTML. This is beneficial for basically all the reasons mattiohamp listed.
Tables are bulky, hard to edit, hard to make compatible...the list goes on and on. - markstory, on 08/14/2008, -0/+3Wow, so you spent an enormous about of effort to replicate tabular data styling because you are crazy. Tables are the best element to present tabular data. Using other elements to present tabular data is semantically wrong, and akin to use tables for layout.
- svivian, on 08/15/2008, -0/+3That's because they've been told "don't ever use tables for layout", which they've interpreted as "don't ever use tables".
- pezholio, on 08/14/2008, -0/+3Because browser vendors (especially Microsoft) don't follow standards correctly, basically.
- Metasquares, on 08/14/2008, -0/+3It's not advanced and it's not confusing. You're still nesting tds within trs, only now you're applying styles to the cells.
- sirbeta, on 08/14/2008, -1/+4I'm a big fan of #8. Always love the rounded corners.
- markstory, on 08/14/2008, -0/+2IE 8 looks like it will just get CSS2 support done, I wouldn't hold my breath for anything CSS3 for quite some time.
- mudgie, on 08/15/2008, -0/+2What's with all these people regurgitating "tables suck!" like a flock of ***** parrots? Tables are for table data, and yes, they do it better than divs. It's not hard to tell who are real web designers and who makes sites for their clan in Frontpage.
Great article, I never really think of ways to improve things like tables, but the results speak for themselves. - svivian, on 08/15/2008, -0/+2It's because for "vertical" tables - where the headers are in a column - you can't use THEAD (it's only for a header row). So you need TH elements to say those elements are header cells.
And the article only uses the "odd" class, and not an "even" class. - inactive, on 08/15/2008, -0/+2Not all websites. And "everyone else is doing it" is not valid reasoning. Tables were always a hack - they were never meant to be used in a layout capacity. We all used to use tables - but some of us have grown up.
- Metasquares, on 08/14/2008, -0/+2Tables are actually among the easiest elements to style, IMO. There are a bunch of things you can easily do with them (such as set vertical-align: middle on a cell and have it actually vertically center the content) that you can't do as easily with any other element.
- EradicateFaith, on 08/14/2008, -1/+3i came
- StandardsGuy, on 08/14/2008, -0/+2Natnie, tables should only be used to display tabular data - not for layout as was the way of things in the beginning. As well as the comments above, tables for layout can cause real headaches for screen reader users because it can break the order of content when it is linearised. If you struggle with the concept of CSS positioning (the curve is somewhat steep thx to IE6 bugs) you can always google for "CSS frameworks" to get yourself up and running.
- elementalgrace, on 08/14/2008, -0/+2Genuinely excellent article on styling tables. Thanks!
It's really nice to (A) see the table element used for what it was designed for i.e. displaying tabular data and (B) an article showing that just because an element is functional doesn't mean it has to be ugly. Bookmarked as a favourite. - Whitey07, on 08/14/2008, -0/+2Dugg for CSS.
- rd3k, on 08/14/2008, -0/+2"Separation of content and presentation" just about sums it up
- Natnie, on 08/14/2008, -2/+4Question: why is CSS so complicated if it's supposed to make things simpler?
- xerigen, on 08/14/2008, -0/+2Yeah.. I used to code specifically for IE6 (or 5.5 or 5, whatever was most current) but ***** that. I now code for Firefox/IE7 and fudge stuff for IE6. I should code for universal standards, not Microsoft's whatever you want to call them.
- inactive, on 08/15/2008, -0/+1Think of it this way - we're each building a bridge over a river. You build Rennie's London Bridge using tables - it takes you 7 years to complete, lasts for about 70 years, and then is taken down in favor of something more modern. I build the Golden Gate Bridge using semantic standards-compliant XHTML + CSS, it takes me 4 years to complete, and at about 80 years it's still holding up well.
Don't feel bad - I used to use tables too, but that was like 6 years ago. I was in highschool, I thought Microsoft Frontpage was an excellent design tool, and wished I knew how to use 'DHTML'. Luckily, those days have passed. Now I use text editors with syntax highlighting and prompting, am continuously surprised at the innovations jQuery has made on javascript, and make up bridge metaphors to convince people to let go of the old ways and revel in the future. - svivian, on 08/15/2008, -0/+1*loud rabble*
Bender: Moron! - appleswitch, on 08/15/2008, -0/+1Wait... an intelligent/enjoyable tech/design related article... on Digg?
What the ***** just happened? - svivian, on 08/15/2008, -0/+1And do what a lot of sites are doing these days (eg facebook): encourage your visitors to upgrade browsers.
http://www.doheth.co.uk/news/1196216917 - srg13, on 08/16/2008, -0/+1If you are a web designer, I feel really sorry for your clients...
- electrifried, on 08/17/2008, -0/+1I dont see why you would want to use CSS to emulate tables when you could quite simply use a regular table....CSS tables makes things so complicated.
I guess if you have Dreamweaver/Frontpage it makes it a hell of a lot easier too :-P - MScrip, on 08/14/2008, -0/+1All websites used tables for layout until about 5 years ago. Look it up.
It was a big deal when sites like ESPN.com 'switched' to CSS in 2003. So, they must have been using tables before that. - electrifried, on 08/17/2008, -0/+1ugh only noobs use IE -.- I dont even know why anyone even bothers coding for IE anymore
- MScrip, on 08/14/2008, -0/+1> "and akin to use tables for layout."
And what about all those years BEFORE CSS when EVERY site used tables for layout? Do you wanna get in your time machine and tell them they are doing it wrong?
CSS is great. But it's only been about 5 years since browsers could render CSS correctly. The web has been around 13 years. So, unless I'm missing something... millions of sites have used tables for layout. Were they wrong? - MScrip, on 08/14/2008, -0/+1> "If you need to use tables for layout, you're incompetent and should learn how to do it properly."
If you used tables for layout, you were a web designer from 1995-2002. ALL websites used tables for layout in the beginnings of the web. And they still work today.
Remember when big sites like ESPN.com switched TO CSS in 2003? Were they doing it wrong all those years?
Yes, CSS and browsers have matured today... and you should definitely use CSS now. But if you stood up in 1999 and said "don't use tables for layout" you would have been laughed at. - svivian, on 08/15/2008, -0/+1Using "display:inline-block" is a great solution for most things like that. You need a couple of small fixes for unsupporting browsers:
- Set "display:inline-block" on an element that is normally inline (eg span), that fixes IE problems.
- Add -moz-inline-box for FF2 (maybe 1.5, too). - xerigen, on 08/14/2008, -0/+1As if those ever do what you need them to do.
- svivian, on 08/14/2008, -0/+1I like the "graceful degradation" approach, and I've used it on a couple of sites. Basically, you style the table simply with eg horizontal borders as row separators, then add some nth-child selectors to remove the borders and add alternate colours.
-
Show 51 - 79 of 79 discussions




What is Digg?