Whats wrong with tables and why css

Hi people, i wanna know why some people have something against tables for layout and why is css such a better alternative. I am building a website just for marketing and information, i want it neat and professional. From my brief research, i have come across phrases like "frames suck" i wonder why

frames are bad for many reasons, such as SEO and disabilty scripts that read the text for people etc etc.

Tables are bad for layout because:

A) Screen readers (for visually impaired people) have trouble knowing that the 75th <td> 3 miles down in your code is actually related to the 6th <td> tag in your code. While the visual structure may look coherant to you when viewed in a browser, it barely ever reads the same to a screen reader.

B) Tables were intended to layout tabular data... thats it. You wouldn't build your house with Play Dough just because it is easier to use would you?

C) Take it from someone who used tables for a while before seeing the light; designing and updating a site with <div>s and CSS is a million times easier than with tables. Tables are actually harder to use to layout a site...

As herkalees mentioned, tables were only intended for tabular data. The original intent of the internet was for text based structured data. Of course, as everything starts to get more mainstream people will find ways around what they consider limitations. By using tables, people figured out how to manipulate the system and create complex layouts. At first, it really didn't matter since the internet was so new and those using it were capable of reading everything fine. However, this new found use became it's own downfall. Once the web became so integrated in our lives, it also became more important to insure web pages were accessible by anyone and everyone, including people with disabilities, since more and more of these people are re-entering the workforce. Tables are very text reader unfriendly because the document has absolutely no structure. They are also vision impaired unfriendly because you can't increase the text size without making it extremely hard to read. So, now we need to figure out a way to correct the wrong doings that have been going on for all these years.

One of the misconceptions about web pages is that they are similiar to print when in fact are completely different. A printed page has set boundaries and limitations. Web pages have unlimited boundaries and their limitations are tough to define. However, by using tables, people are able to simulate print and thus define boundaries and limitations. This isn't a good thing by any means.

CSS was created in order to once again bring back web pages to their native format which is text based structured data by removing visual formating from the document. What you end up with is a well structured document that screan readers love and the visually impaired regain control by simply adjusting settings in their browser or overriding author CSS documents with their own CSS preferences. Your web page also becomes easier for search engines to crawl and correctly categorize. The overall size of your entire website decreases as well since the CSS gets cached and every page benefits. The entire site becomes easier to manage by controlling things with just one area. Instead of having to adjust every header within 10 pages to add another 0.5em of margin, you simply change it in the CSS file and your done. This is important to know, because if you define everything in table cells, you can't just adjust a header margin without worrying about those cell heights which you'll have to manually go through every page and adjust. NOT ME!!!

It's really tough to get people to accept ditching tables because CSS can put up a fight getting it to conform to the layout you want, but this keeps getting better and better over the years. You can do quite a bit with CSS, it's just a matter of putting in the time to fully understand all the available tools it offers.

Tables are similiar to another trend that is slowly getting phased out... image based text. Controlled font sizes and styles were the main factor behind using images to display text. This is becoming less acceptable because images aren't accessible enough. I believe font styles are constantly on the minds of CSS developers and once a solution is discovered you will be seeing image based text going away fast. Hopefully CSS positioning will continue to grow and we'll start seeing some drastic new abilities that will send tables away forever.

what mreine has just said is a sound answer, and one i would certainly consider posting in the articles section for future refernce....

I don’t agree. Sure in an ideal world CSS would be great but as there are so many browsers out there with bad implementations with CSS it gets very messy using all the CSS hacks.

Ok it is better if people are using other devices to render the page, but I expect this is a very low percentage. Im developing a site at the moment and really wanted to make it without any tables but after a long look into it (that should have been spent on development..) i decided against it. So now I have a page that has a table with 3 columns and 4 rows to display the data in. As for being hard to update all of this design information is kept in two files so its very easy. I did create a tabless design but it would have taken me far more time to update this due to the css looking like a complete mess after implementing all the hacks to make it display properly in the majority of browsers.

Also I dont think that text as images is a trend at all. I use them as many browsers dont smooth the edges of the text, the user is unlikely to have any fonts other than the standard and you can apply advanced affects.

I will review the whole CSS situation in a few years time, would love to have a tabless design, but I think all the hacks needed at the moment defeat the purpose of it.

Just my 2 pence.

if you are using hacks to make a table-less design your doing somthing wrong. Its very easy to build css layouts without hacks. you maybe need to review the way you code these..

(curtain) happenstance (/curtain)

As the great and powerful wizard said...

Pay no attention to the man behind the curtain!