CSS vs Tables Debate

[raydar]

Hello,

My company is designing it's new corporate website, and I just wanted to check to see if my thinking is correct in terms of recommending CSS (tableless) vs. Tables Layout. If you agree or disagree, could you please let me know why and site a source (that'll help me present the case either way)?

CSS Pros:
Design flexibility - especially for larger sites; it could be a matter of changing code on the stylesheet only vs changing code on 100+ pages (depending on the size of the site

SEO (is this debatable?) - using CSS reduces the amount of code on the html page, which makes it more search engine friendly

Reduced load times (is this also debatable?) - the reduced amount of code also reduces load times; also - especially with images that are repeated on multiple pages - if the image is included in the .css file, it is loaded once and then cached, versus if the image is loaded on each page in the .html page using an <img> tag, it has to be loaded each time a new page is loaded. (Example would be a header <div> background in the .css versus a header <img> in the .html code)

CSS Cons:
Browser Compatibility - CSS hacks are required for complete cross browser functionality, may not play well with older browsers

Potential front page load time (not sure about this one either?) - Having a large .css file can increase the initial page load time, but then it also decreases other page load times since all the loading and caching was done on the front page

Table Pros:
Initial Layout - Easy to throw together the first layout by chopping up images and sticking them in the table.

Table Cons:
Future design changes - Any design changes are restricted to the size of your current table, or you run the risk of having to change the table code on every page of your site (could be time-consuming for larger sites)

Design Complexity - Creates a lot of extra code on your .html page that both coders and search engines will need to wade through.

Any thoughts and additional comments would be greatly appreciated.

Thx.

 

[shockie]

Loading time... that's ridiculous. A page made in CSS will always load faster than the one made in tables (because CSS decreases the use of images when doing certain things).

and the amount of coding required is substantially less too. "designing" with tables can easily add five times the number of lines to reproduce the exact same thing that css can do in one line... although those who don't use css probably don't close their tags either... so maybe four times, lol.

the css vs. table debate really shouldn't be a debate in today's age, and another great read is: why tables for layout is stupid

 

[TeviH]

I am surprised this is still a debate.

Check out www.alistapart.com for some of the best articles on the web regarding web design.

Me too!! :o

The only people who still use tables for layout are those without the css skills. There are no other "pros" of using tables for layout. I still use tables for email design, though, thanks to MS Outlook.

 

[rebecca_1986]

Table Pros:
Initial Layout - Easy to throw together the first layout by chopping up images and sticking them in the table.

This is easily achieved with CSS and divs It can be outputted with Imageready as CSS even!

Theres is not even a debate. Tables are for tabular data and nothing else. The web is going semantic and CSS and XHTML is the only way forward for accessable and clean, valid web design.

CSS is easier to modify and easier to write, and it just makes sense. It is also constant across all browsers!
One myth is that CSS is 'hard'. It isn't hard. Well, not any more difficult than any other approach. The problem is that experienced web designers started out by using tables for layout and then had to completely change their approach to do things the CSS way.
I worked with tables based layout for years and when I first started playing with CSS layout I got stumped. "It was so much easier with tables" I thought. But that just came from the fact that I was comfortable with tables. I knew how to manipulate them. Any change, especially such a radical one, is inevitably going to prove difficult. But I even remember when I first taught myself how to use tables for layout. That confused the hell out of me too. Looking back on it, I would even have to say that table layouts were the more difficult of the two approaches to learn, what with all of those rowspans, colspans and spacer gifs.

People will stick with the last century habits encouraged by big names saying "tables are ok", missing the "sometimes", and "used properly" from the context.

 

[dmi]

One myth is that CSS is 'hard'. It isn't hard. Well, not any more difficult than any other approach. The problem is that experienced web designers started out by using tables for layout and then had to completely change their approach to do things the CSS way.

People tend to say that XHTML/CSS is 'hard' because there is no tool that will do the job for them (unlike tables -- you can just draw tables in Dreamweaver and it will write the code for you). You have to code it yourself (which isn't hard, it just takes some time to learn it).

 

[thebrokenbox]

CSS is definitely the way to go. it's much more widely accepted among coders and designers as the way to go and shuts tables down all the time. Tables are so 2000. Seriously. the flexibility that CSS allows the design and look of the site is amazing. if you ever want to change the design you can just alter the CSS file rather then redoing a whole site, which costs time and money. So I say spend that time now to learn CSS and do it right in the first place rather then regret it later.

 

[raydar]

I didn't think it was debatable until...

I thought that the CSS preference was clear to most designers, but I had to pause and spent two days trying to support my thoughts when the web design company who is doing the coding gave me a layout in tables. I didn't (and still don't) understand why a design company would try to code a dynamic, several hundred page website using tables.

 

[deleted984054565403]

I thought that the CSS preference was clear to most designers, but I had to pause and spent two days trying to support my thoughts when the web design company who is doing the coding gave me a layout in tables. I didn't (and still don't) understand why a design company would try to code a dynamic, several hundred page website using tables.

That's beyond me, too... somebody's stuck in 1997. :o

If you're hiring someone to code a page for you in 2008, it needs to be done with valid html/css. They're called standards for a reason.

 

[shockie]

They're called standards for a reason.

:bingo:

 

[Name Trader]

This might be a stupid question but are their any tools for converting tables to CSS?