CSS vs Tables Debate

raydar · 07-09-2008, 08:00 AM

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 · 07-09-2008, 08:23 AM

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 · 07-09-2008, 08:25 AM

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 · 07-09-2008, 08:28 AM

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 · 07-09-2008, 09:40 AM

Quote:

Originally Posted by aaronfalloon

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 · 07-09-2008, 10:23 AM

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.

Steve · 07-09-2008, 10:27 AM

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 · 07-09-2008, 11:19 AM

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 · 07-09-2008, 11:56 AM

Quote:

Originally Posted by Etab

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?

Steve · 07-09-2008, 12:15 PM

Quote:

Originally Posted by raydar

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 · 07-09-2008, 12:35 PM

Quote:

Originally Posted by Etab

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 · 07-09-2008, 01:14 PM

Quote:

Originally Posted by raydar

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- · 07-09-2008, 07:13 PM

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 · 07-09-2008, 07:29 PM

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 · 07-09-2008, 07:35 PM

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 · 07-10-2008, 01:42 AM

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.

**-Nick-** · 07-10-2008, 03:50 AM

Nowadays anything is good.

When you have softwares that turns tabled pages into CSS ones

interestedenough · 07-10-2008, 05:11 AM

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.

Steve · 07-10-2008, 05:38 AM

Quote:

Originally Posted by 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.

I learned a lot from the Tizag.com tutorial.

name-cloud · 07-10-2008, 06:43 AM

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.

shockie · 07-10-2008, 08:48 AM

Quote:

Originally Posted by dmi

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 · 07-10-2008, 10:52 AM

Quote:

Originally Posted by 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.

Me too!!

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 · 07-10-2008, 11:34 AM

Quote:

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 · 07-10-2008, 02:01 PM

Quote:

Originally Posted by rebecca_1986

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 · 07-10-2008, 04:34 PM

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.

07-09-2008, 08:00 AM	#1 (permalink)
raydar NamePros Member Join Date: Feb 2008 Posts: 26 0.00 NP$ (Donate)	CSS vs Tables Debate 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. __________________ www.creativepatience.com www.whatscookingatdd.com

07-09-2008, 08:23 AM	#2 (permalink)
yilduz Your face is regfee! Join Date: May 2008 Location: Oregon Posts: 864 908.03 NP$ (Donate)	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. __________________ I miss my dog - Athena Yilduz Network \| Gaming Gears \| Affpros.com CodeBoards

07-09-2008, 08:25 AM	#3 (permalink)
aaronfalloon NamePros Regular Join Date: May 2005 Location: Northern Ireland Posts: 747 636.00 NP$ (Donate)	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. __________________ :guilty: A young web developer’s journey to financial freedom. - aaronfalloon.com

07-09-2008, 10:23 AM	#6 (permalink)
shockie Senior Member Join Date: Dec 2006 Posts: 4,478 1,025.10 NP$ (Donate)	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. __________________ - shockie Linux VPS Hosting From $9.95 With A FREE Control Panel & DOUBLE Burst RAM! Monopoly Companies Binary Addition Coffee Makers & Grinders How to Wash Your Hands 5 Ways To Make Money Blogging Do You Want To Make Money Online?

07-09-2008, 07:13 PM	#13 (permalink)
-Ray- An American Soldier Join Date: Jun 2005 Location: Pennsylvania Posts: 1,630 2.53 NP$ (Donate)	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.... __________________ Completely Free cPanel Hosting -- Deployed to Afghanistan -- "There is no such thing as rich over-night unless you owned Google stock in 2006"

07-09-2008, 08:28 AM	#4 (permalink)
resto New Member Join Date: Jul 2008 Posts: 24 0.00 NP$ (Donate)	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.

07-09-2008, 10:27 AM	#7 (permalink)
Steve Senior Member Join Date: Jan 2006 Posts: 4,140 5,730.67 NP$ (Donate)	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.

07-09-2008, 11:19 AM	#8 (permalink)
2knew NamePros Member Join Date: Oct 2005 Posts: 191 3,301.75 NP$ (Donate)	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.

07-09-2008, 07:29 PM	#14 (permalink)
interestedenough NamePros Regular Join Date: Nov 2007 Posts: 279 5,248.28 NP$ (Donate)	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. __________________ _________________________________________________ Florida Drupal Group, Meeting Every 3rd Saturday in Orlando http://groups.drupal.org/florida

07-09-2008, 07:35 PM	#15 (permalink)
weblord NamePros Legend Join Date: Dec 2005 Location: Philippines - www.Nabaza.com Posts: 19,840 21,700.43 NP$ (Donate)	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.

07-10-2008, 01:42 AM	#16 (permalink)
dmi NamePros Regular Join Date: Jan 2008 Location: N43°54′, E017°40′ Posts: 908 1,147.29 NP$ (Donate)	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. __________________ Failure teaches success.

07-10-2008, 03:50 AM	#17 (permalink)
-Nick- I'll do it Technical Services Join Date: Dec 2005 Location: India Posts: 6,434 5,169.80 NP$ (Donate)	Nowadays anything is good. When you have softwares that turns tabled pages into CSS ones __________________ Vhuv\|Delq\|Fhur\|Twut\|Tluz\|Kegh\|Vhir\|Juhy\|Ruuz\|Jyos\|Jupt\|Vhek Webmaster Blog \| Software Downloads Sponsor Ads at SponAds.com

07-10-2008, 05:11 AM	#18 (permalink)
interestedenough NamePros Regular Join Date: Nov 2007 Posts: 279 5,248.28 NP$ (Donate)	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. __________________ _________________________________________________ Florida Drupal Group, Meeting Every 3rd Saturday in Orlando http://groups.drupal.org/florida

07-10-2008, 06:43 AM	#20 (permalink)
name-cloud NamePros Member Join Date: Jun 2008 Posts: 33 0.00 NP$ (Donate)	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. __________________ business: name-cloud.com blog: patdryburgh.net I strongly recommend MediaTemple.net for web hosting.

07-10-2008, 04:34 PM	#25 (permalink)
thebrokenbox Account Closed Join Date: May 2008 Location: USA Posts: 628 13.65 NP$ (Donate)	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.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Technical Services