As we move in a world of XHTML, CSS, AJAX, Microformats, Semantic Web, etc. You may think that tables are only used to display… well… tabular data, no you are wrong! Take a look at this list of top sites from Alexa and see who are still in the middle age of web design. Here I am looking only at the home page of every site, may be worst when you click your way inside the site.
Tables are bad? Since when?
Well I am not going to tell the “The History of Tobacco”, you can read some over here. But I want to bring a few things for you: light, understandable, accessible and quasi-more SEO friendly code.
The list
- Yahoo.com – Clean
- Google.com – Tables inside
- YouTube.com – You don´t believe how many they have
- Live.com – Only one… Hmm… not bad at all
- MSN.com – Only one… Amazing!
- MySpace.com – A place for tables… and friends?
- FaceBook.com – Here hang out the tables too.
- Wikipedia.com – Tables, tables, tablepedia over here
- Hi5.com – Only two
- Orkut.com – OK, you too
- RapidShare.com – One
- Blogger.com – None, Zero, Niente, No tables around
- MegaUpload.com – What you think?, yes you are right, there are countless tables inside
- Baidu.com – Two on the home page, one table every 20 visible characters
- Friendster.com – Not as much as you think
- Yahoo.jp – Okay here we come again, back to 1995, Y! on the basics
- Microsoft.com – None, can you believed?
- QQ.com – table is their second CSS declaration, after body of course
- Fotolog.com – Yes this one too
- Ebay.com – Everybody knows
- Google.fr – Tableu à´la carte.
- Mail.ru – Yes in the old Russia, the websites layout the tables
- Google.com.br – Ou Brasil tableleirou (here too)
- Skyrock.com – None, Nicht, Null, 0 tables here
- Sina.com.cn – Hele ale table too
- Google.de – Of course, they have too
- Google.cl – * (for now on I will write only an “*” when Google comes)
- Google.co.uk – *
- Google.es – *
- Flickr.com – You don´t noticed but they are, they are
Finally
From the 30 more popular sites on the world and only 4 are using tableless layouts. Who cares anyway, the users? Nah! XHT hu ha hu who? a user have just said near you.
Stop hunting those IE CSS tricks and bring back your Frontpage 98 my friend designer, we are still in web 0.8889… not really but… think about it.
Keep flowing.
Update: And now… Top 30 popular websites are NOT using tables as main design structure. What is the real problem out there?
Without tables i’d keep kicking my coffee over…
Tables are used for presenting data in a tabular form, whether that is used with layouts or with pure data. CSS on the other hand is used to control how things look on the screen. So if anyone like to reinvent the wheel by using CSS to design tabular layouts, then that is great. Though the source readability of information in CSS is bad compared to that in tables. So use whatever you like, just make the site readable, easy to navigate through, good looking, and compatible with FireFox, Safari, and IE. If you can also provide compatibility to Lynx, then you are a good webpage designer ;)
I try to stick to divs and css, but occasionally a desired result arises where I have to use a table for the layout. I save ‘have to’, because the css way of doing it doesn’t work in IE6.
Probably worth mentioning that the desired ‘layout’ was achievable with css, but not the round corners and sides with tiled graphical elements.
Not that I couldn’t beat the code into submission for IE6 whilst avoiding tables, but that to get it to work requires way too many divs
In my CSS frustration I typed “CSS sucks” in google like the rest of you :)
I’m a noob in webdesign. I have only made 2 simple sites (title bar, left menu, content are) using table.
I decided to try CSS. I have used CSS for “normal” styling. I now have to create a site from scratch and wanted to try CSS for main layout.
I want a fluid top title/header (100% width) using graphics (currently a left.png, spacer.png, and right png).
After 5 hours or more I managed to get this. But already I’ve used a hack or two.
1. hack:
There was a 3pixel gap in IE6 between left.png and spacer.png, but not in FF. Ok found a relatively simple hack for this using google (margin -3px or something like that).
2. hack:
The left.png is static size. The spacer.png is 1 pixel and is set to 100%. This leaves no space for the “end” grafik to the left. It is positioned under the header to the left. I thought it would be able to see that the div to the right takes up fixed space at that the middle 100% would just fill the reamining space. Noooo. apparent CSS does not think ahead.
I then used Float right and offset the top position by the height of the header. This actually seems to work….In Firefox. In IE6 the header is now double the height because is still regards the end grafik i pushed up to be there.
I don’t know how to solve this cross-browser and I’m getting pissed.
To be honest, I’m not even sure if/how to do this with tables but I’m dissapointed with CSS.
I still want to learn CSS even though it sucks, so I’ve decided to make a fixed size centered site instead. Apparently, from my own limited experience and what I read on the net CSS does no do fluid designs well.
For those of you claiming that CSS is superior for layout in all circumstances: Try creating a CSS-only form with fields in multiple ‘columns’. Without javascript. And I’m not talking about a simple contact form, I’d like you to reproduce something more complex, like an HR suite of forms.
I will guarantee you that you will revert back to tables in an instant.
It’s so hard to say which site is the best here.
http://www.tuvinh.com
I agree with both Blacken stan and Mario…..
“”Everythink I read is like:
Mercedes is better than Porsche
Pure C and C++
high level prog vs. low level.
DB2 or Oracle?
Rugby or football?
ad so on…
Go work ..”"
“”So use whatever you like, just make the site readable, easy to navigate through, good looking, and compatible with FireFox, Safari, and IE. If you can also provide compatibility to Lynx, then you are a good webpage designer”"
“”Just because it has become ‘cool’ to go table-less and all the ‘web 2.0′ (god I hate that definitionless term) blogs you read tell you that tables=bad, a real designer realizes when they are needed and doesn’t put down sites that use them with exactly ZERO justification on why they are ‘bad’.”"
Now a day’seople r not developing websites with a tables..by tag it is easy to develope the web pages nd together is called websites
Now a day’s people r not developing websites with a tables..by tag it is easy to develope the web pages nd together is called websites