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.

 

[yilduz]

The css pros are definitely very nice pros. The only reason I don't use it is because it's a lot more complicated than tables. I always have problems with css when it comes to setting up the layout. Things never line up for me and always end up being a major pain.

I will eventually get better at it and it won't be an issue, but for now I use tables because it's easy. As far as having to change things in the future, I don't worry about it because my layouts are in their own files and all the pages use php include to show them. If I have to change anything, I change one file.

 

[aaronfalloon]

This has been talked about so many times before, and I think it's fair to say that for structuring a site, CSS is the way to go. Unless you've got tubular data, then there's no need to use tables.

I'm not a brilliant web developer, but I haven't used tables to design a site since 2003. Perhaps they're a little out of date?

Just do a simple Google search, and go with the flow, so to speak. Look at the mark-up of other popular websites, and see if tables are still the way to go.

As far as incompatibilities go, the number of users using browsers which don't support at least CSS specification 1 is really low. If your current website has an analytics program, use it to see if you actually get any visitors using old browsers. If you don't, go with CSS.

 

[resto]

I try to keep every thing as simple as I can so I use tables. But I can see how css would be an advantage in large site.

I need to get some practice with css I have been having trouble learning it, it can just be a pain in the ass and confusing to work with at times.

 

[raydar]

Just do a simple Google search, and go with the flow, so to speak. Look at the mark-up of other popular websites, and see if tables are still the way to go.

Lots of the mainstream sites: CNN, Apple, Youtube, even Microsoft appear to be using CSS. On the other hand, this site and CoolHomePages use tables.

I've Googled all morning and there are so many differing opinions about which way to go, that it's hard to separate fact from opinion.

 

[shockie]

css is the way to go, small or big site, unless you're making a one page site that only has a table of information.

 

[deleted984054565403]

Tables have their uses. Page layout is not one of them.

Don't forget increased accessibility with CSS. CSS also makes printable and mobile pages very easy. CSS is much more flexible and less tedious.

 

[2knew]

Tables for tabular data, CSS for actual layout.

Having said that, sometimes I cheat. I used tables for a loooong time and don't need to think about them or how they will look. CSS on the other hand throws you the odd curve and is hard to make look the same on different browsers passively. (IE you might find you need to look at the user agent string)

PS what etab said about print specific CSS is worth mentioning - it rocks.

 

[raydar]

Tables have their uses. Page layout is not one of them.

Don't forget increased accessibility with CSS. CSS also makes printable and mobile pages very easy. CSS is much more flexible and less tedious.

Could you help me understand how the accessibility with CSS is related to page layout? Are you saying it's easier to modify the layout for print and mobile pages using CSS?

 

[deleted984054565403]

Could you help me understand how the accessibility with CSS is related to page layout? Are you saying it's easier to modify the layout for print and mobile pages using CSS?

Screen readers (programs to assist the visually impaired) generally have an easier time getting through a CSS page than a table-based page.

CSS separates design and presentation from document structure and content. I recommend reading about the Accessibility Features of CSS.

With CSS, you can select which elements print and which elements are modified or eliminated by assigning a print stylesheet to the page. If you have a page that contains a press release for your company and you decide that you don't want the left side navigation menu to display on the printout -- only the company logo and the article text, you can make that happen in CSS without modifying actual parts of the page.

 

[raydar]

Screen readers (programs to assist the visually impaired) generally have an easier time getting through a CSS page than a table-based page.

CSS separates design and presentation from document structure and content. I recommend reading about the Accessibility Features of CSS.

With CSS, you can select which elements print and which elements are modified or eliminated by assigning a print stylesheet to the page. If you have a page that contains a press release for your company and you decide that you don't want the left side navigation menu to display on the printout -- only the company logo and the article text, you can make that happen in CSS without modifying actual parts of the page.

Great link. Lots of information that I can refer to when justifying my case for CSS. Thanks.

 

[aaronfalloon]

Lots of the mainstream sites: CNN, Apple, Youtube, even Microsoft appear to be using CSS. On the other hand, this site and CoolHomePages use tables.

I've Googled all morning and there are so many differing opinions about which way to go, that it's hard to separate fact from opinion.

You could argue that forum posts are tubular data, and so are best suited for a table.

 

[Ray]

I hate working with css.. let alone to use it completely implace of tables.

Dont get me wrong, css is easier for formatting at times but it can be so compicated at times.

I recommend just sticking to tables for now....

 

[interestedenough]

So far I haven't had the opportunity to learn how to go tableless with CSS. But I know you can do some awesome things with it. I know for example that some drupal template designers are using CSS to have an great looking layout while optimizing for search engines. For example, you can have a template with blocks for login, registering, navigation stuff on the left of your template while the content (on the right hand site) shows first to search engines. This is great for making the best of your page's real estate.

 

[weblord]

im an old school and started with tables as well, i find them useful and easy to place things on my website, but nowadays css has something to say, if I only find time I will convert all my old sites to using css instead of tables but can't find the time for it.

 

[dmi]

CSS all the way!

All CSS Cons that you wrote aren't really cons. If optimized properly, your page will look great in all browsers. 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).

As for tables, the only advantage, as you say, is the "easiness" when building a layout (that's only for those who learned it that way and don't want to learn something new which is much easier).

I think you should follow the current web standards... And that's XHTML/CSS/Ajax.

 

[Keral_Patel]

Nowadays anything is good. :D When you have softwares that turns tabled pages into CSS ones

 

[interestedenough]

Here is a reason I haven't turned into CSS: I haven't found a tutorial that just teaches you how to make CSS tableless layouts. When I've searched all I have found is tutorials that tell you how to merely format tables.

 

[deleted984054565403]

Here is a reason I haven't turned into CSS: I haven't found a tutorial that just teaches you how to make CSS tableless layouts. When I've searched all I have found is tutorials that tell you how to merely format tables.

I learned a lot from the Tizag.com tutorial. :tu:

 

[name-cloud]

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.