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...

[studioxcess]

I just recently discovered your site and appreciate you sharing your bout with Web Design with the world.but this site also search best knowledge Web Design.




StudioXcess