CSS based design vs. Table based design

[sushil]

CSS based design vs. Table based design has been a debatable topic since long. Both the designs have their own set of advantages and disadvantages. CSS based design is however used by a majority of people today. CSS means cascading style sheets which enable us to split up the design and the content. There is a lesser need of codes in case of the CSS based design as compared to the table based designs.
There are various advantages of CSS based design. As the codes used are smaller in number it enables us to make downloads faster. This also helps the search engines in acquiring proper content from your websites which in turn leads to higher rankings. The ranking that the websites receive is of great importance for greater traffic and visitors.
Table based design makes use of greater number of codes which leads to formation of complicated patterns. This affects the ranking of the website. Here there is a mixture of less meaningful content due to the codes and your own original content. You can use CSS based design so that only meaningful content is displayed. You can also make easier modifications in CSS based design as compared to the table based design. The use of CSS based design is on the rise due to all these benefits.

[DaveSawers]

Originally Posted by sushil

Table based design makes use of greater number of codes which leads to formation of complicated patterns. This affects the ranking of the website.

Really? Where's the evidence?

[MrGamm]

Css is technically the style layer while tables are a part of the data structure layer. One cannot replace the other. They are both useful. There is nothing technically wrong with using tables. I prefer not to use them when I can to help pages load more "gracefully"... However... there are just some things you cannot do without tables (without wasting 3 weeks of your life browser testing javascript hacks).

Use both...

[dmwcons]

Originally Posted by MrGamm

... there are just some things you cannot do without tables (without wasting 3 weeks of your life browser testing javascript hacks).
Use both...

Please will you give some examples.

[MrGamm]

Originally Posted by dmwcons

Please will you give some examples.

Sure... Tables work differently that Divs (block display)... A table will scale to accommodate the contents of the table cell without breaking to the next line... A div acts like a parent container and the layout properties of the contents do not transfer back up the chain while preserving the div layout. There are some css properties which you can use to force a span or a div to act like a table but the workaround breaks compatibility for most browsers requiring complicated JavaScript hacks (if it's even possible I have never bothered).

It's hard to put into words exactly how the behavior differs... but I have a page which illustrates it...

Divs which do not break to the next line

If you have a solution which justifies exclusive div layouts, I am open ears. A practical everyday real world issue which forces my use of tables would be dynamic horizontal menus which cannot break to the next line in order to preserve the design. But there are many other instances where it pops up too... Tables are useful...

[kgun]

Two recommended books:

Everything*You*Know About CSS*Is*Wrong! - SitePoint Books

HTML*Utopia: Designing*Without*Tables Using*CSS, 2nd*Edition - SitePoint Books

Generally use tables for tabular data. Use CSS / XSLT for styling.

Different style sheets can be used to make:

1. Your site more accessible.
2. Easier to adapt to mobile devices.
3. Easier to modify your site wide styling in central single style sheets.
4. That also means that the site will load faster since the style sheet is already in the servers primary storage / memory.

I doubt any direct SEO effect.

[jbladeus]

There is no evidence that either tabled or div-based layouts affect a site's ranking in the search engines.

[MrGamm]

Originally Posted by jbladeus

There is no evidence that either tabled or div-based layouts affect a site's ranking in the search engines.

Agreed... However, I have found evidence that an overall... very poorly constructed website does worse than a website which has been overhauled with good tech in mind.

Just because no one can find differences in divs vs tables layouts, certainly does not mean that Google is capable of wading through a $5.00 website with amazingly shoddy technical. It may have more to do with the architecture, but whatever it is... A high quality website does better.

[james113]

Originally Posted by jbladeus

There is no evidence that either tabled or div-based layouts affect a site's ranking in the search engines.

I used to develop sites with nothing but tables, and now I use CSS as well. I have noticed a slite change in the way my sites are indexed for the better. Thats enough evidence for me.

I read somewhere a while back that google prefers faster loading pages, which CSS accommodates. I still use tables for some layout to achieve centered positioning of the content regardless of the users resolution settings, and for the simple reason that I have seen to many websites load, without loading the refered CSS file for some reason. Fortunately reloading the page will usually render the page completely in tact, but I prefer my sites to be understandable under any circumstance.

[vagabond]

Having started web designs using tables in the mid-90s, then using CSS for text/font configurations with tables for layout, I finally went "all CSS" last year. It took some get'n used to, and a great deal of time scewing around to understand necessary browser hacks, but I haven't had to use a table on any of my new sites in a year.

I would recommend CSS to anyone.

[weegillis]

Where time (clock ticks) and space (reserved memory) are limiting factors, CSS driven pages are more likely to receive thorough and quick parsing of the page markup and indexing of the content, with time and space to spare. Tabled pages require more memory and time to disseminate, and if the above limiting factors 'were' to apply, the job might not be done on the first pass.

Centralized control over presentation is both time saving and space conservative. All the styles can be stored in a hand full of files which will download once, and remain in the browser's cache for any length of time, making future pages download even quicker. Kgun mentions that the files are usually in the servers primary cache, as well, so first time visitors receive the advantage of faster downloading of your pages.

CSS offers another real advantage when it comes to reducing the number of img tags in your pages, especially the skin graphics. Assigning background images in CSS is the easiest way to repeat graphics over an entire site, reserving img tags to just photos in the page that you want indexed.

[ohiowebpro]

The key words sushil mentioned was "based design." He didn’t mention that it was bad to use tables for tabular data. You still need tables. My general rule: if its something that looks like it belongs in Excel, it belongs in a table on your site. But as for something to base the design of the whole site on, XHTML/CSS I feel is best.

One common misconception among some clients looking for a website I’ve had is them wanting the whole site designed in pure CSS. Of course I opened my big mouth and said, HTML still has to be used, and they insist they have read that "pure CSS" or "all CSS" is possible and better, while they don’t realize by pure CSS we mean the styling. Now I keep my mouth shut and say...OK. Anyone else experienced this? We need to be careful how we post, for newcomers and potential clients both read forums.

[DBLL]

Actually, regardless of what some claim, tables still have a solid place in some layouts, which are quite simply impractical to work with being fully CSS based. Hacks are not always accepted in practice, and they should not be taken for granted, using them is a unique skill on its own, as they ain't always obvious.

Equal-height column layouts with a header as well as a footer would be another example, and this is where i would say that it would be fine to use tables, as the known CSS methods are quite complex.


But other then that, there really isn't a good reason to stick with tables for layout. It would be far better to avoid the cases where we would need to resort to tables.

The place where it becomes problematic, is where we have rich containers with borders, that must be scratchable at the same time. There is a position based technique to do this, but tables would still be better when having older browsers in mind.

The separation of content from style is not entirely possible yet, some layouts would still require extra markup, this would usually be in forms of division elements, like in the above technique. And again this is where we have a few arrogant web designers, wo criticize the use of "divitis", both the alternative is however worse, and note that screen readers as well as SEs simply ignore these additional divs, it dose however add a few bytes to the file-size.


While there are some coding specific changes you can apply for better ranking, those are mainly focused on headings, emphasized text, internal links, as well as outgoing links. You should be using headings in the correct order, h1 for the main heading, h2 for subheading of h1, h3 for subheading of h2, Etc.

There is no SEO releted benefit from using XHTML instead of HTML, or having a fully CSS based site instead of table based. Those are likely to be rumors started among novice designers.

[jrai]

Can anyone here recommend any free tutorials for starting out with pure CSS designs?

I've always wanted to go heavier on the CSS, but I'm a Photoshop designer/slicer/html programmer type, and I can't wrap my head around using style sheets to set up a page the way I want it to look...even though I logically know it has to be do-able, as no one else seems to have a problem with it.

Anyone, let me know -

[MrGamm]

Originally Posted by jrai

Can anyone here recommend any free tutorials for starting out with pure CSS designs?

I've always wanted to go heavier on the CSS, but I'm a Photoshop designer/slicer/html programmer type, and I can't wrap my head around using style sheets to set up a page the way I want it to look...even though I logically know it has to be do-able, as no one else seems to have a problem with it.

Anyone, let me know -

I am fairly certain photoshop will allow you to export various levels of HTML... some of that might be more stylesheet oriented...

My favorite html/css/javascript website was quirksmode.org

[DBLL]

I wouldn't recommend using photoshop for anything but grapichs, such as buttons, backgrounds etc.

Check out the links in my sig, as well as w3schools.com

[MrGamm]

I wouldn't recommend using photoshop for anything but grapichs, such as buttons, backgrounds etc.

Agreed... but it can get you started for sure... just for the record... pure css with spans and divs made in a text editor is certainly the best way to go... it really took me a while to realize it.

But for all practical purposes... (in some cases it's the only practical option) tables are fine... especially when used with the css attribute...

table-display:fixed

to speed the rendering of page elements... you will know you are doing something very "wrong" if you start nesting your tables one inside the other. jmo...

[morestar]

Originally Posted by DaveSawers

Really? Where's the evidence?

i second the motion...

[morestar]

Originally Posted by MrGamm

...I prefer not to use them when I can to help pages load more "gracefully"...

one cannot say that a site will load more gracefully if you use DIVs over Tables.

[morestar]

Originally Posted by dmwcons

Please will you give some examples.

example? you can't build a beautiful looking site that has been cut out of PSCS3 that has been cut to use DIVs and have it render the same or properly on every browser.

nor can you do it within a reasonable time frame. you always have to hack the hell out of it. and why?

[morestar]

Originally Posted by dmwcons

Please will you give some examples.

oh, anothe example, just yesterday i was using code that makes display tabs display based on which tab you select.

anyways, when i placed an image into the "div" the image overlapped the div border. to me, that's crap, if it was in a table it would have rendered properly.

[morestar]

Originally Posted by MrGamm

Agreed... However, I have found evidence that an overall... very poorly constructed website does worse than a website which has been overhauled with good tech in mind.

Just because no one can find differences in divs vs tables layouts, certainly does not mean that Google is capable of wading through a $5.00 website with amazingly shoddy technical. It may have more to do with the architecture, but whatever it is... A high quality website does better.

well you need to research a little more. i've designed terribly coded sites that to this day still rank the highest in the serps way over other so called 'properly coded' sites.

[morestar]

Originally Posted by james113

I read somewhere a while back that google prefers faster loading pages...

prefers? as in they sit and have coffee together? oh you mean google ranks pages higher because there is an external style sheet?

google prefers relative content based on keyword searches so as to provide a meaningful experience to the user or the user will go to yahoo or msn or alta.

[DBLL]

The benefits from using the standards correctly, far outweighs the negative aspects.

Using CSS based layouts not only increases productivity, it also makes it much easier to maintain your site. It has the added benefit, that if your client for some reason chooses another designer, then he/she will be able to get right to work, with minimal research into the code.

It has been well documented that table based layouts generally use more markup then css based layouts, there is no reason for me to go into this. But that's not the point, tables should not be used for layout purposes, doing so is just wrong.


You only have to "hack the hell out of it", if you code for older browsers, but coding for such browsers is your own mistake. Most bigger players are starting to phase out support for older browsers, such as IE6, and with good reason.

Search engines dont prefer css based layouts, but there are other benefits, which should be enough to get any serious designer, to pick up web standards.

Further more, if the image "overlapped the border" then morestar did something wrong. Todays browsers do support the standards, there are some well used methods to create both tabs, drop-downs, and navigation menus. But it takes time to learn, its however essential that web designers learn to use these standards as soon as possible, you cant expect to be taken seriously if your code looks like something from the 90s.

Its also generally considered a bad practice to have Photoshop, or any other app for that matter, generate your code. I wont rule out that they have some use in the future, but currently they just mess up your code, which you dont want to happen.

[morestar]

Originally Posted by DBLL

Using CSS based layouts not only increases productivity, it also makes it much easier to maintain your site.

where are you getting this from?

look at this site: http://www.womencertified dot ca

i've been editing this site for days now, trying to add and take away new elements. the site is coded in nothing but DIVs and CSS, and it's brutal. There is no way it should have taken me this long to edit a site, not only that, im only editing the home page which again is in DIVs and CSS, oh the holy DIV/CSS combo. well no, it's brutal code and i suppose now the CSS/DIV pundits would say well, i guess THAT particular DIV/CSS coding isn't good and should be cleaner.

I would say, code in tables and get the job done right once AND let the future editor be able to tell what he's doing...

P.S. that site is NOT my coding, I've had to hack it to add elements to it and was driven mad - ugh

P.P.S. and my point? when ppl code in only DIVs and CSS you are getting their idea of how the code should be, margin this, padding that...once you try to go in and make edits you have to imagine what the hell the previous developer was thinking.

When I use CSS to create a space at the top of the page to divide the top from the main content, i use a margin:20px, other people use padding:20 px, so which one is right? what's the standard? oh ya i know i can use whatever i want but that does NOT make it any easier for the future developer to know what i was doing now does it?

[morestar]

Originally Posted by DBLL

You only have to "hack the hell out of it", if you code for older browsers, but coding for such browsers is your own mistake. Most bigger players are starting to phase out support for older browsers, such as IE6, and with good reason.

I'm coding and testing in IE6, FF, Safari, Opera, IE5, IE4, IE8 and Chrome.

When I code with tables, i never ever have a rendering problem. When I view my sites on an IPhone let's say, they always render properly.

jokes

[morestar]

Originally Posted by DBLL

Its also generally considered a bad practice to have Photoshop, or any other app for that matter, generate your code. I wont rule out that they have some use in the future, but currently they just mess up your code, which you dont want to happen.

where did you read that?

I work for a pretty big design company that has clients all over Canada, PLUS i've worked for and with a few other good sized designed companies and we've all used photoshop to mockup designs...

come on now.

An experienced designer can sift through what would be considered "bad" code and fix it.
However, when I have PS generate my code the only attribute I need to remove is ID="Table-1"

[DBLL]

where are you getting this from?

I don't need to get it from anywhere, my experience tells me that standards increase the productivity.

We are developing and maintaining these standards for a reason, we wouldn't have to develop these standards, if they didn't provide clear benefits above the
old.

look at this site: http://www.womencertified.ca

The mentioned site is very poorly designed, let alone coded. It would be far better to redesign the entire site from the scratch, and avoid the common
pitfalls.

Usage of images to display textural content, is the worst mistake that any site can make, especially when those images only add to the page bloat. The
mentioned site uses images for just about everything, and even to the point where its making it hard to navigate on the site, without accidentally hitting
the wrong link/image.

This is an example of a site which is being harmed by its own design and content, it likely doesn't even rank in the search engines, for its main keywords.
But this is a subject which i could fill out a book about, not something i will go further into here.

The site gives a deceiving impression to visitors, mainly due to the over-usage of promotional text and images, rather then providing visitors with actual
content of value on the subjects.

Lets hammer the below to bits, just for fun.

We pride ourselves on our innovative products and services and truly understand the needs of the Woman Customor - we're WomenCertified...are you?

What are those products exactly? Where is the innovation? And exactly what "needs" are they talking about?

Are they trying to appear ridiculous on purpose? I mean Give me a break! The majority of users dont care about these promotional statements, they actually
effect users negatively when done this way, because it just appears like the site is desperate to sell something that it doesn't have, it being competence. They even managed to misspell the message somewhere along the way.

And they are trying to educate you about how to increase sales? Become WomenCertified? How ridiculous! They don't appear to know how to best represent their own
company online, why would they know anything about marketing, when they include useless statements like that? They should know better!

Admittedly, there is also a world outside the Internet. But if they want their website to be a success, then they need to understand the basic marketing
principles, that apply on the Internet.

I'm coding and testing in IE6, FF, Safari, Opera, IE5, IE4, IE8 and Chrome.
When I code with tables, i never ever have a rendering problem. When I view my sites on an IPhone let's say, they always render properly.

Thats because tables are better supported in these older browsers, but you shouldn't be designing for these browsers in the first place.

Your ipod is not relevant, its the developers of these devices responsibility to support web standards, its not yours to support the device.

P.P.S. and my point? when ppl code in only DIVs and CSS you are getting their idea of how the code should be, margin this, padding that...once you try
to go in and make edits you have to imagine what the hell the previous developer was thinking.

This is not true. If this is how you feel, then its because you ain't yet comfortable working with CSS. You should at least understand topics such as the box model, inheritance, and css selectors.

When I use CSS to create a space at the top of the page to divide the top from the main content, i use a margin:20px, other people use padding:20 px,
so which one is right? what's the standard? oh ya i know i can use whatever i want but that does NOT make it any easier for the future developer to know what
i was doing now does it?

First and foremost, you don't ever want developers to touch your code, they should be working on server configuration and server-sided scripting.

As i also wrote earlier in this post, you should understand the box model. Then it wont be hard to tell what other designers intended with margin/padding.

These are actually some of the easiest properties to use, and you can't always use both, they often each have their own uses. You can sometimes, and thats
where personal preference kicks in.

where did you read that?
I work for a pretty big design company that has clients all over Canada, PLUS i've worked for and with a few other good sized designed companies and we've
all used photoshop to mockup designs...

Being "bigger" as you put it, doesn't really automatically give you, nor the company that you work for, the necessary qualifications.

Clients are not aware about web standards, they rarely look at the code, let alone understand any of what they are viewing. This means that companies who already have an established reputation, will find it easier to get clients then someone who just opened up. Their marketing is often also better then that of those who focus more on standards and industry best practices.

These companies also have good connections, including clients coming back, or recommending them to other companies, along with their established business name. Which all contributes to getting clients, but that will decrease as awareness of web standards increase. They are also likely to get criticized openly by competitors, for their lack of expertise in the area.

You could compare it to a surgeon using sticky tape to close the wound, it may still work, but that doesn't make it the best thing to do.

[morestar]

oh nelly...im working right now, on a beautiful table based layout, using css for styles but will get back to you shortly...i've noticed you went a little off-track in your responses and just as a quick note, the site we are discussing (referenced in our two posts), is all DIV and CSS based and brutal but isn't that site supposed to be a part of the dream team? Well it's not and why is that? In my humble opinion it's because the designer created it with only DIVS and CSS AND according to his knowledge and strategies for designing in DIVS/CSS.

With tables, a cell is a cell. With DIVs, depending on the designers thoughts and desires, he can have a div coded at the top of the page and rendered 600 pixels down the page. How does that make my job easier? Plus that's a bit sneaky would you admit? A lot of people DIV code to have their links display at the top of the page when in the code their actually in the middle or at the bottom. I wonder if the SEs can tell there's a little deception there - and let us think we're getting away with it. <-- don't quote me on that though.

i'll fully respond shortly and thanks for your input DBLL.

[DBLL]

With tables, a cell is a cell. With DIVs, depending on the designers thoughts and desires, he can have a div coded at the top of the page and rendered 600 pixels down the page. How does that make my job easier? Plus that's a bit sneaky would you admit? A lot of people DIV code to have their links display at the top of the page when in the code their actually in the middle or at the bottom. I wonder if the SEs can tell there's a little deception there - and let us think we're getting away with it. <-- don't quote me on that though.

Thats not deceptional at all, the source dose not matter to the virsual placement of elements, and neither should it. Many designers use this technique intentionally, its mainly used for accessibility purposes. People who are visually emparried often "jump" between headings on the page, many designers include a relevant and descriptive heading above their navigation lists, and its not always they want these headings to display in virsual browsers.

It can also be said that its more friendly to include the content before the navigation links in the source, as well as promotional text and logos. Visually emparried would be ennoyed by constantly having to "jump" down to the content.

Some SEOs also claim that it helps to increase the search engine placement, likely originating from back when google only indexed about 100kbs of the page. I havn't noticed much of a differance myself, after implementing it on my own sites.

[morestar]

im sorry but im currently working on a directory site using PHPLinkDirectory which is as most know coded with nothing but DIVs with CSS and I, being a developer for over 10 years, am having a sort of difficulty tracing the template in order to customize it.

I got an idea...

[weegillis]

Add FireBug plug-in to your Firefox browser. It will help you trace parent elements and the inherited properties (or overridden ones) that flow down the cascade to the current element.

[morestar]

however, you don't really need firebug whilst using tables...

of course i have to use firebug when im editing pure css based layouts. thank GOD for firebug...

[jamescabrera]

Using CSS-based structure versus using table-based code is primarily personal preference due to ease of use. In terms of ranking better using one over the other is very negligible based on a myriad of other factors. I wouldn't sweat over it.

As a webdesigner now using CSS converted from purely tabled-based design - I agree that there are just certain things that you have to use tables for, or tables are much more convenient for. Especially when coding modular designs for people who don't even want to look at one bit of HTML or for 3rd party software like Wordpress, vBulletin and the like.

[GarytheGolfer]

I'm pure CSS, no tables allowed. Except for html emails, for some reason every time I have tried to make a pure css layout for an html email the various email clients don't render it properly. So to avoid the headaches I just use tables.

Also, coding with css usually generates less code which means the browser can read and display the page faster than it can when you use tables.

[morestar]

Originally Posted by GarytheGolfer

Also, coding with css usually generates less code which means the browser can read and display the page faster than it can when you use tables.

yes by .00039 seconds.

[jamescabrera]

I think that the most significant factor between using CSS and Tables is the cleanliness of the code, it even outweighs the 0.00039 of faster loading time