Why Switch from Table to CSS layout?

I’m really struggling with whether to learn and use CSS for layout. I’ve been a designer for over 20 years and been using tables for layout for 13 years. Most of the sites I create are for small businesses averaging around 10 - 60 pages. (10-20 is most common.) I really like using CSS for formatting text, lists, positioning, etc. In my opinion, combining table layout with CSS works great. I’ve read the debates online. I’m not questioning the benefits of CSS in general. I use it and love it. What I’m trying to figure out is the benefits in using CSS for LAYOUT. Here are my questions which I’m hoping you can help…

CSS Layout Advantages:

  1. Easier Site-Wide Changes – CSS proponents claim site-wide changes are easier with CSS because you change one file and boom, it changes on all pages. I use Dreamweaver template files. I make a change to the template file and boom, it changes on all pages. What’s the difference?

  2. Faster Load Times Because of Lighter Code – I remember load times being a major issue when I first got started but it doesn’t seem to be the case anymore with so few people on dialup. I can’t tell any discernable speed difference between a table layout and a CSS layout’s load time. (Yes, I like clean code too.) Heavy image use and Flash still seem to be the biggest factors in speed. If the human eye can’t tell any difference, then what’s the point? And server space/bandwidth doesn’t seem to be an issue anymore either. Space on the server for all of my client’s sites is generally 1/16 of capacity.

  3. SEO – From what I can tell, search engines aren’t indexing or ranking CSS layouts higher than table layouts. The algorithms used for ranking most often are content and inbound links. The spiders are highly efficient at discerning code from content. So what difference does it make?

  4. Separation of Style and Content – I guess this one is related #1, ease of updating? This is what Dreamweaver template files do. It separates style from content (editable/un-editable). I don’t know about you, but generally speaking what my clients want most often is to update the content. I don’t understand why it would be easier to update content using CSS more so than tables. (Remember, I DO use CSS for formatting.) If they want to tweak something in the design, again, piece of cake to do. Just change the template file. It’s not hard.

  5. Greater Consistency – If you use template files and CSS, where is there inconsistency?

Disadvantages to using CSS for layout

  1. Inconsistent Browser Support - Different browsers will render CSS layout differently as a result of browser bugs or lack of support for various CSS features. This is no small drawback!! It’s huge. I fought this very same battle using tables back in the 90s. Different browsers rendered the design differently. I really resented (and it sounds like many of you do too) all the time I had to spend to get a site to look as it was intended for ALL users. I REALLY don’t have any desire to fight that battle again. I know there are workarounds. But again, if I don’t see the overwhelming benefits, I won’t don my armor or sharpen my weapons.

My questions and concerns are genuine and not an effort to get CSS lovers to defend themselves. If you are designing using CSS for layout, cool! You are a part of an ever growing majority. Personally, if I could instantly convert a design into HTML, I’d do it. I have no great love for code. Right or wrong, I LOVE spending most of my time designing. For me, the rest is a necessary evil to get the design into the medium. So if you feel strong emotions regarding CSS layout, don’t respond. :slight_smile: If you get where I’m coming from, please help me understand using logic.

Jennifer

If someone is starting out in CSS, then the two books Beginng and Pro CSS Techniques by Apress would be my suggestion. When I was diving into CSS (coming from a table based background) the CSS Mastery book was too condensed for my taste.

However, once I completed the Beginning book and hit the Pro CSS Techniques book, I would crack open the Mastery book as an added source of understanding a specific topic.

I still have all of them on my bookshelf and refer back to them every now and again.

my 2 cents anyways.

I don’t think this issue is anywhere as big as it used to be. If you stick to validated (x)html strict and validated css2 you shouldn’t have any significant browser compatibility issues, if any at all, using table less layouts in IE7+, FF2.5+, Opera 10+ and the latest versions of Safari and Chrome

Mostly the pros and cons of css you have stated yourself. given your experience of 20 years in this field of designing and your point are valid. i wouldn’t say tables are “dead” excatly and neither i will say css is mother of web design and layout. they however depend on eachother. not particularly depend as in one cannot survive without the other but it goes well where needed.
CSS is fine in designing unless you need a tabular data. as such a CMS for inventory where u have big huge forms to fill up. search result to show of each record. its CMS like that where css & tables comes into play. combining the two to make a dynamic duo. where obviously CSS is controling the presentation and tables are manging how data is showed.
The biggest CSS advantage i found is how you can go semantic and logical. you can purely pay attention to content like how its flow is going to be (not as in design but as in simple format). and then u style it up with css. with table its like visualizing e.g here is a table, here is nested table and so and so on. making your making complex tables. which as you said and its a big factor for downloading of the page. and when u wanna do some change and your old table person who use little bit of css. OMG, its gonna take forever.
As far as broswers issue is concern. yes that is a big issue and sorry to say if your a IE lover. they messed it all up,there browser has what is “Broken Box Model”, which calculates differently. however other browser namely Firefox,Opera,Safari and Chorme are based of principle laid by w3c i.e correct one. nevertheless there is always workaround. (i remember i had to make rules for IE 8,7,6 for every page and i was like “Argh!” unless my office people took desicon that its gonna be FF or IE 8, after which my life was a bliss).
Again it all come down to what is your website type. is it a website that doesn’t have tabular data. than pure css is the answer as its powerful, semnatic web. if your website require tabular data like huge forms and data coming from database aganist records etc. u should use tables for controling the content, however the cosematic or styling and all should be done with css. another scanerio is that if you got plenty of time on your hands and your guru of css. you can design a tabular website in pure css. (then again double workaround for browsers)
As far as SEO is concerned, as i said above css website are more logical. you have a textual layout/hireachry of your website. which help website crawlers to read website more easily. therefore more easy reading. more easy scoring (think of as a teacher is checking paper, one guy has given answer right to the point, another one has stories to tell and teacher has to figure out, so the teacher will give priority to the later guy who has it right with to the point) as for tables and SEO, crawlers has to work around to find how that “column 1 & column 2 are stacked next to eachother”.
Hope it helps. i just poured my experience.
Cheers
Edit : if you need more logical reason and find my reply worth. let me know, i love to teach with logic :slight_smile:

Lordy, Jennifer, not to crack on you in your very first post (welcome aboard!), but this debate has been long settled. CSS, not tables, are the standard for layout structure and design. Tables present tabular data.

As far as your preference for designing over coding, that’s another interesting topic. I wrote an article about it not long ago (self-promo alert!) that I believe covered both sides fairly well. The commenters added lots of opinion and observations also:

I completely agree with Black Max! I think some of the advantages you mentioned for CSS are important but I.M.O. minor ones. Advantages as positioning are way more important. I also think that you misunderstand the definition of separation of document content from document presentation somehow.

Hmmm, did anyone but aidos address my specific questions or concerns? Adios mentioned that the browser support was becoming less of an issue. There seems to be much talk to the contrary. Not sure what to believe.

Black Max, the debate may have been settled for many, but obviously not for me, hence my questioning the benefits. Here’s my situation. I own my own design business. I don’t work in a team environment where others will have to deal with how I code a site. (Me and the search engines are the only ones that ever see my code.) And I’m not going to be interviewing for a design job anytime soon where I will have to prove my coding abilities.

I don’t mean this to sound callous, but I doesn’t matter to me what everyone else is doing or what the current “standard” is unless I can see the benefit for me and my clients! I’m not going to switch simply because “everyone’s doing it”. I’m looking for good reasons.

Ease of updating: Not any easier with CSS layout than what I’m doing now.
Faster Loading: No discernable difference.
Search Engine Friendly: My sites are ranking well.
Browser Compatibility: Not a problem for tables.

So unless I can really see how switching to CSS layout will benefit me, why endure the learning curve and frustrations? That’s where I was hoping to get some help from you guys in understanding. What am I missing?

Nofel you said…
The biggest CSS advantage i found is how you can go semantic and logical. you can purely pay attention to content like how its flow is going to be (not as in design but as in simple format). and then u style it up with css.
I’m not sure what you mean. How the content flows? Are you referring to line breaks? Please explain.

“Tables are for tabular data.” I’ve heard this before but must admit I don’t quite see the logic in that argument. Stereo sound was originally invented to improve telephone communications, therefore it shouldn’t be used for listening to music or watching movies? What difference does it make what’s its original purpose was? If people are using it to create designs, where’s the problem in that?

I’m serious, help me see the light! Please! Why is CSS layouts so much better than tables?

Jennifer

Positioning. You mean items positioned where I want them? I thought I do that now.

What is the benefit of separation of document content from document presentation?

Hi Jennifer,

Welcome to Sitepoint :slight_smile:

I guess you must have been busy for the last ten years because as Max said above this topic has been done to death and there isn’t really anything left to say that hasn’t already been well said and documented (and to be honest I don’t think this late in the game that we could convince you otherwise anyway ;)).

If you do a search on the forums you will find many similar topics with the same pros and cons and the answers you get here are likely to be the same.

I think the main question is really whether you are willing to take the time to learn something new or are happy to jog along comfortably as you are doing. The right reasons for learning CSS are that tables were meant for tabular data and not layout (although they have been coerced to do the job well). If you don’t care about that then I doubt there is little we can do to persuade you otherwise.

The fact that CSS takes some time to learn and to do properly is not really an issue as that is the case when learning any new skills and it’s always more comfortable to fall back on what you know.

Browsers these days are very good at rendering CSS layouts and if you know what you are doing there is no problem with consistency. Of course there’s a steep learning curve at first but anything worth doing is worth doing well. In my experience its tables when used for layout that are more inconsistent between browsers because they are doing a job that they weren’t really designed for. They do some things really well but they also do a lot of things badly.

If you want to move forward then CSS is the way to go. If you are happy where you are then you may think why bother but if you care about your profession, your clients and your visitors then there is no option but to move forward and drop tables for layout where possible.

You never know you might end up liking it:)

Hmm, that doesn’t seem to be CSS related as such.

I don’t know much about DW templates but I believe that once you change the template file you have to upload all the pages that use that template. That would be a showstopper on some of the 1000 page plus sites I’ve worked on.

You would be better of with SSI and just make changes to the one file and upload one file.

  1. Faster Load Times Because of Lighter Code – I remember load times being a major issue when I first got started but it doesn’t seem to be the case anymore with so few people on dialup. I can’t tell any discernable speed difference between a table layout and a CSS layout’s load time. (Yes, I like clean code too.) Heavy image use and Flash still seem to be the biggest factors in speed. If the human eye can’t tell any difference, then what’s the point? And server space/bandwidth doesn’t seem to be an issue anymore either. Space on the server for all of my client’s sites is generally 1/16 of capacity.

The fact still remains that table markup can double the html size so whether it’s a small issue for you using broadband or a big issue for users on dialup, it’s still an issue that doesn’t need to be in the mix. There can never be a case made for code bloat just because systems can handle it these days.

  1. SEO – From what I can tell, search engines aren’t indexing or ranking CSS layouts higher than table layouts. The algorithms used for ranking most often are content and inbound links. The spiders are highly efficient at discerning code from content. So what difference does it make?

There is an important issue in content to code ratio and you will find that when you have more code than content your search rankings will be hurt. Again, the question is why risk it in the first place? You have nothing to lose but more to gain from using CSS.

  1. Separation of Style and Content – I guess this one is related #1, ease of updating? This is what Dreamweaver template files do. It separates style from content (editable/un-editable). I don’t know about you, but generally speaking what my clients want most often is to update the content. I don’t understand why it would be easier to update content using CSS more so than tables. (Remember, I DO use CSS for formatting.) If they want to tweak something in the design, again, piece of cake to do. Just change the template file. It’s not hard.

Again this doesn’t seem to be a css question. What has CSS got to do with updating content on a site?

You are talking about the benefits of DW templates which has little to do with CSS for layout. Even if you use CSS you will still have html in your template so the issue is the same. Using CSS doesn’t automatically mean that you can completely change the look and structure of your site without changing the html although some times you may be able to make significant changes without resorting to html changes but that was never its primary purpose.

Separating presentation from content means removing the presentational attributes from the html so that you don’t mix nested tables and font tags just to make the layout look the way you want.

You really should be looking at SSI (server side includes) if you want to simplify maintenance of repetitive sections.

Disadvantages to using CSS for layout

  1. Inconsistent Browser Support - Different browsers will render CSS layout differently as a result of browser bugs or lack of support for various CSS features. This is no small drawback!! It’s huge.

That’s just not true these days and modern browsers support css2.1 very well. There are bugs and inconsistencies but most of the problems we see in the forums daily are a result of author mistakes and not a problem with the browser.

It all boils down to taking the time to do the thing properly. It’s not easy and it’s not going to be quick but who said that it should be? It’s a subtle and complicated mark up system that needs to be understood and applied correctly.

Right or wrong, I LOVE spending most of my time designing. For me, the rest is a necessary evil to get the design into the medium.

And there lies the crux of the problem :slight_smile: You have it the wrong way around. It should be the medium that dictates your design and not vice versa. Times have changed and are still changing fast. We no longer have 800x 600px to worry about but we have 50" monitors and 160px mobiles to contend with. You have to move forward with the times or get left behind.

Web pages can be viewed in lots of different media - eg. web browser, web reader, mobile phone, printed, braille etc. You almost certainly do not want the page to have the same appearance in all of those since that will make it unusable in some.

By separating the appearance (which your visitors can override anyway) from the content you allow for multiple ways the page can look depending on what is most appropriate.

Without it you are in the position of Henry Ford when he said you can have a car in whatever colour you like as long as it’s black.

Also with CSS you can do overlapping content and have content that repositions itself depending on the size of the browser viewport and many many other things that cannot be done in HTML.

In CSS you are able to position elements where ever you would like them to appear as if you are using layers. If for example you would like part of your header image to overlap the content below, you can do this very easy using CSS without slicing your image, but simply by using margins and z-index. Something you are not able to do with tables.

See the answers from Paul OB and felgall

The main problem with that approach is accessibility or rather inaccessibility.

Users navigating your table site with screenreaders and the like will have a very hard job understanding what’s going on. There is no correlation between column data when tables are used for layout and screenreaders find them hard to follow

A good designer will to the best of his abilities make a site accessible to as many people as feasibly possible. Not using tables for layout is just one step in the right direction. You may not care about these users and say that it isn’t an issue for you but in essence you do have a duty to make your sites as accessible as you can.

You can ignore accessibility but would a client be happy to find that perhaps 1 in 5 visitors was leaving the site because the site wasn’t accessible to them. I’m not saying that table sites can’t be made more accessible but just when used for layout they are inherently inaccessible by default.

In the end it all boils down to whether you want to do the job properly or not. We can all get by doing as little as possible (and I’ve been guilty of that) but if we want a job well done that we can take pride in then it needs to meet certain standards.

There is no “magic bullet” though and there are just as many badly written and inaccessible CSS sites as there are table ones so it’s not all plain sailing.

As I said originally the question isn’t about CSS v Tables but whether you are willing to take the time to learn something new. You’ve already documented and countered the arguments in your first post so you know what the possible benefits are already. In the end it’s your choice so make a decision that you are happy with and can live with.

Paul,

This is exactly what I was looking for, someone to address my specific questions! Thank you. I’ve been hemming and hawling over switching to CSS layout for a while now. I HAVE done searches and read tons of debates on this topic but this is the first time I’ve asked for clarification on the stated benefits. I know me. I need sufficient MOTIVATION to get me through the frustrations of learning a new way of coding. If I don’t understand WHY I’m putting myself through torture, I’ll bag it. I WANT to be convinced so when I get to the point where I’m thinking “damn, if I was doing this in tables I would have been done 5 hours ago!” I will stick it out because I believe it’s the right way to go.

If I believe in something I can be a bulldog. I like challenges but only when I see the benefit in it. I’m just not the kind of person that does things ONLY because that’s what everyone else is doing it. That doesn’t motivate me. I’m comfortable with my peers looking down their noses at me. Never understood why people do that.

“…tables were never meant for tabular data”…I assume you meant the opposite? Doesn’t matter, for me, if they can be coerced to do the job well, what difference does it make? I want to understand your thinking on this.

Hmmm, I hadn’t noticed my designs looking different in different browsers when using tables. I generally test for such things. I am glad to hear that CSS and browser compatibility are becoming less of an issue. That at least takes one of my major concerns off the table!

“…If I want to move forward and care about my profession.” I’m not sure what you mean by this or if I care about those things. Here’s what I care about. I care that my sites are really well designed and instantly recognized as a quality site. (People’s instant first impressions the moment they arrive.) I care that the site is one my clients are proud of and feels accomplishes what they wanted. I care about the ease of use for the visitor. I care about the site getting a good ranking in the search engines. I care about how fast a page loads. These are the kinds of things I care about. Is that caring about my profession?

Once I change the Dreamweaver template file I have to FTP all the pages that were built using that template. As I said, most of the sites I design are 10-20 pages so were probably talking about ….1 second to upload one file versus 20 seconds? Yes, with 1000 pages that would be a major issue. I don’t think I’ll ever attract a client of that size, but you never know.

Load time: My code is pretty clean even though I use tables. I’m not completely inept. As I stated, I use CSS for all formatting and positioning. I haven’t used a font tag for some time.

SEO: I wish I could know for sure that ranking was being affected by using tables. All of my clients who have paid for promotion get on the first page. (But I have a great SEO and promoter.)

“…it should be the medium that dictates your design.” Well, I do know I’m designing for the internet. I’m not confused and thinking I’m designing a brochure, annual report or billboard. Should I apologize for being a designer who learned how to code? Should web designers be programmers who learned how to design?

Maybe the decision to go CSS or table depends on who you are, how you like to work, and who your clients are. If I was an employee working at a company who developed big sites for high-profile companies where the development was a team effort I would have learned CSS layout 10 years ago because it would have been necessary and required. Who knows.

The biggest question I have in my mind right now is the accessibility issue you mentioned. I have only been testing my sites in various browsers. I looked at my sites on my iphone but that’s not exactly thorough testing! :slight_smile: This WILL become more and more of an issue as new technologies grow. Is there an online site for testing sites on different devices like tvs, screenreaders, ipad, various phones, etc.?

Thanks again for your help. I’m not deliberately being a pain in the a**, I swear! Just searching for motivation to make the leap.

Jennifer

Not really. All table based web sites sound like a jumbled mess when spoken by web readers. You need the content in a logical order to be read out regardless of how you want it arranged visually for those listening to the page to be able to make sense of it.

Of course there are people who prefer to live in caves (HTML layout tables) with no facilities rather than in houses (CSS layouts) that have bathrooms (multiple CSS for different media) and kitchens (CSS that resizes the content to fit) etc.

Some people just like their cave though and dare not try moving to a house because they are too scared to have to learn how to use a kitchen or bathroom. So yes you are right it does depend on who you are as only cavemen use HTML table layouts in the modern world.

I think this pretty well sums it up. Personally I steer away from using tables other than for “tabular” data (and the definition of tabular is debatable) but if you’re building a website for yourself only and it validates correctly using tables for the layout then it doesn’t really matter in this case as long as you will be maintaining/updating your website. I don’t touch other peoples’ websites if they used tables for layout.

If you are building it for yourself only then it doesn’t matter whether it validates or not since blind people wouldn’t be using it in that instance unless you are blind yourself.

If you are building it for others to use then that includes people who can’t see the web page but who instead listen to the content in the exact same order as it appears in the HTML (where in most cases using a table for layout would result in their hearing things in the wrong order so that it makes no sense).

Anyway those who use HTML tables for their web pages are creating web pages that look really stupid when my CSS makes sure that all the table borders are turned on so I can see what aligns with what properly in the tabular data that those HTML tags are for.

The person who invented using tables for layout issued an apology for the huge mess it created several years ago.

Remember that there are up to five parts to any web page:

[LIST][]Your content in the HTML
[
]Your CSS that defines the default page appearance
[]My CSS that overrides your CSS
[
]Your JavaScript that defines the page behaviour
[*]My JavaScript that can override yours
[/LIST]

You only have control of three of these - the other two are under the control of your visitors.

So like you said - if you are building web pages that you and no one else will visit then you can use HTML layout tables as in that instance there will be no one else to receive your content as a jumbled mess.

Of course another thing is if you have several thousand pages and decide to reverse the order of two columns in your layout. That’s about two minutes work to update the CSS if you did the HTML properly but possibly several weeks worth of work to amend each page manually if you incorrectly used HTML tables (I know this from personal experience from back when HTML tables were the only way to create multiple columns compared to now where it is so much easier and saves so much time with using CSS instead).

Not true if you want validated html. Even if you choose to use tables you still might want your code to validate successfully.

Why would you want validated HTML that is not semantic. Either HTML is semantic or it isn’t. Semantic HTML will always be valid AND meaningful. Youi can write complete garbage HTML that is valid and has no meaning whatsoever. If you want valid then the simplest solution is to stick to one tag <span> and ignore all the rest of the tags completely. <span> is always valid and can do everything that most of the other tags can do if you style it correctly if you want something that validates rather than using HTML for its proper purpose of defining the semantics of the content.

You may as well use a pair of scissors to mow the lawn out front of your cave as that would be far more effective.

The following garbage will validate as HTML even though it is garbage.

<table><tbody><tr><td>Heading</td></tr></tbody></table>
<div>list item one</div>
<div>list item two</div>

That is garbage because it is not semantic - it is meaningless. HTML is there to provide the meaning and not just to decorate the content as otherwise there wouldn’t be a need for anything but the span tag.

If it passes the w3c validator then the document is well formed and so is far less likely to break in browsers.

The following garbage will validate as HTML even though it is garbage.

<table><tbody><tr><td>Heading</td></tr></tbody></table>
<div>list item one</div>
<div>list item two</div>

I don’t see the above code as garbage at all, especially since it passes the w3c validator. I’ve already said I steer away from tables for layout but if someone wants to exercise their right to choose to use tables then I have no problem with that since there is nothing cast in stone anywhere that says how we must do things. I would discourage them from using tables and I would be extremely reluctant to help them fix/update the code if asked, but the bottom line here is no-one is accountable to anyone in forums like this and everyone is free to choose to do things however they like after receiving advice on what others believe to be the best way to do things.

Jennifer, it wasn’t that many years ago I was asking the same question on these same forums. As I recall, it was a guy named Kraavitz (and maybe Paul and Tommy Olsson) who patiently talked me into going CSS. Everybody goes through the same learning curve. My stepson just turned 24; he’s designed a couple of sites and has told me flatout that he’s gonna keep using table layouts because it’s what suits him. More power to him.