SitePoint Sponsor

User Tag List

Page 1 of 3 123 LastLast
Results 1 to 25 of 72
  1. #1
    SitePoint Addict
    Join Date
    Jun 2006
    Location
    Durban, South Africa
    Posts
    287
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Tables vs CSS design

    Hi all.

    Firstly I don't know if I'm posting in the right forum, so please move my post if necessary.

    My question is, why is pure CSS design better than designing with tables?

    We've all heard the "computer geek / purists / standards" reasons (tables were meant for tabular data etc.), but practically, in the real world, does it really matter if you use tables over CSS to design your site?

    Before anyone jumps to conclusions about me, I design my sites with CSS, I don't have any tables! But the reason I ask the question is, there are still so many "reputable" companies that design with tables, but it doesn't really seem to matter... And whats worse, in the public's (ie. the uneducated public, who don't know about the inner workings of a web site, they only know the final product that they can see on the net) eye's, we seems slower to produce work (I mean you can bang up a site with tables in a few minutes. Its also a lots easier to create a cms, that can create a grid like front end, with tables, far easier than with CSS).

    I guess what I'm searching for at the moment, is some kind of validation that "building webs sites the right way" is going to pay off, vs doing it the easy way.

  2. #2
    SitePoint Addict
    Join Date
    Jun 2006
    Location
    Durban, South Africa
    Posts
    287
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Funny haha, I had a quick look at the source for the sitepoint forums, and its all made with tables...
    I must say I'm a little shocked. The site where I had learned so much from, especially regarding CSS design, is its self built with tables... (the front page, is CSS)
    Just thought I'd point that out.

  3. #3
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The layout can be more flexible and adapt to different devices which gets more and more importent.

    With a semantical markup the site will win in the long run in the search indexes.

    Also I believe maintenance is a less effort.

    Not sure I agree about the CMS case, I think it can be more of a structual awareness.
    Happy ADD/ADHD with Asperger's

  4. #4
    SitePoint Addict
    Join Date
    Jun 2006
    Location
    Durban, South Africa
    Posts
    287
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by erik.j

    The layout can be more flexible and adapt to different devices which gets more and more importent.
    This is a nice point, but if the company building the site, is the same one that's designing it, they not going to design anything that they can't build. The client is never aware that the design could be more flexible.

    Originally posted by erik.j

    With a semantical markup the site will win in the long run in the search indexes.
    Really?
    Ill do some research on this today, and try post something later, but if this is true, then that's a great benefit.

    [quote]
    Originally posted by erik.j

    Also I believe maintenance is a less effort.
    [quote]

    I hear you there, but if the site doesn't require a lot of maintenance, then you never going to feel the full effect of that.
    Good point though.

    Thanks for your reply

    Any more comments?

  5. #5
    SitePoint Addict Belfast75's Avatar
    Join Date
    Oct 2005
    Location
    London, England
    Posts
    215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I learnt the value of CSS layout a few years ago, after building a new site for a company that fitted with the agreed design, my boss didn't like it on the screen. I was able to completely change the design, layout and colour scheme of the site within about a day to look completely different. I can't imagine just how long it would have taken me if I'd had to break up and rebuild a table layout.

  6. #6
    SitePoint Addict
    Join Date
    Jun 2006
    Location
    Durban, South Africa
    Posts
    287
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    At Belfast75

    I hear you man, but that only works if you working for the company you doing the site for. Weather a CSS or table design, if a client requested a site, was happy with the design (signed etc.), received the site as in the spec, but didn't like the site in the end, well they still going to have to pay.

    I do agree that the changes would be really quick with CSS, but the company that uses tables, could just bill the client for the "new changes", no matter how long they going to take (its up to the client to accept the new quote then). Again most clients are uneducated, and don't know it could have been done with CSS, and should be simple to change the front end.

  7. #7
    SitePoint Addict jemple's Avatar
    Join Date
    Dec 2008
    Posts
    291
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I admit I still use tables. CSS is great and when you are being creative divs rock. But if its something that requires, cuts, fixes, hacks and hours of emotional pain to make it look the same in IE as other browsers, I just slam it in tables.

    I look at it that you use ALL the tools available to get a good, and quick, end result, not be precious about just a few.

  8. #8
    SitePoint Addict
    Join Date
    Jun 2006
    Location
    Durban, South Africa
    Posts
    287
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    At jemple

    Nice honest answer man

  9. #9
    SitePoint Member
    Join Date
    Feb 2006
    Location
    Manchester, UK
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by poizn View Post
    Funny haha, I had a quick look at the source for the sitepoint forums, and its all made with tables...
    I must say I'm a little shocked. The site where I had learned so much from, especially regarding CSS design, is its self built with tables... (the front page, is CSS)
    Just thought I'd point that out.
    I presume that it's just the forums, marketplace etc that use tables as they are powered by vBulletin. These sections are XHTML 1.0 transitional therefore this is acceptable. Whereas the rest of the site is XHTML 1.0 strict and doesn't use tables.

  10. #10
    SitePoint Enthusiast
    Join Date
    Dec 2008
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Speed Baby!

    When you visit a site you only download the CSS file once and it is cached for the entire time your at the site.

  11. #11
    SitePoint Wizard bronze trophy Tailslide's Avatar
    Join Date
    Feb 2006
    Location
    Bedford, UK
    Posts
    1,687
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Believe me, if CSS took hours of emotional pain then there's no way I'd use it!! I'm basically a lazy person!

    I love the "zen" of CSS. I love the lack of excess markup in the page. I love being able to change the layout of the whole site with a few tweaks in the stylesheet. I love that CSS layouts are generally more accessible and faster too.

    I haven't built a table-layout site for 4 years and I have no plans on going back.
    Little Blue Plane Web Design
    Blood, Sweat & Rust - A Land Rover restoration project

  12. #12
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by poizn View Post
    Hi all.

    Firstly I don't know if I'm posting in the right forum, so please move my post if necessary.
    I'm pretty sure you're in the right section of the forums. "Web Page Design" is another good board for this thread, but I'll leave that decision up to you.

    Quote Originally Posted by poizn View Post
    My question is, why is pure CSS design better than designing with tables?
    There are plenty of reasons. One of my favorites is that it allows the same code to be used on multiple devices, such as traditional browsers, mobile phones, PDAs, and even television sets. Another is the bandwidth savings that a properly marked up CSS based implementation can bring - that translates into lower hosting fees and the ability to serve more page views to site visitors. That alone can increase the number of sales (all other things being equal, of course).

    Quote Originally Posted by poizn View Post
    We've all heard the "computer geek / purists / standards" reasons (tables were meant for tabular data etc.), but practically, in the real world, does it really matter if you use tables over CSS to design your site?
    For me, it does. It's just a lot easier for me to code that way, and I don't have to worry about building a Web page that would be inaccessible, require a special "printer only" version, or have to be duplicated just to be viewed on my cell phone.

    Quote Originally Posted by poizn View Post
    Before anyone jumps to conclusions about me, I design my sites with CSS, I don't have any tables! But the reason I ask the question is, there are still so many "reputable" companies that design with tables, but it doesn't really seem to matter... And whats worse, in the public's (ie. the uneducated public, who don't know about the inner workings of a web site, they only know the final product that they can see on the net) eye's, we seems slower to produce work (I mean you can bang up a site with tables in a few minutes. Its also a lots easier to create a cms, that can create a grid like front end, with tables, far easier than with CSS).
    And those sites also tend to cost a lot more $$$ to maintain and update. If a section has to be added to the site, or even when it comes time to redesign the site, the code will likely have to be thrown out and rewritten from scratch. Not only is that akin to throwing the baby out with the bath water, but it also increases the client's costs unnecessarily. In this economy, that can be a deal breaker for the table-based layout developer.

    "Mr. Smith, while the initial cost is slightly higher, you'll not only be able to save bandwidth with a CSS design, but you'll also be able to serve more people with the site I'll develop for you. This will not only help you save [insert cost here] on hosting, but could also significantly increase your sales revenue, possibly by [insert percentage here] since more people will be able to use the site using the same or even fewer server resources. Additionally, it will be a lot easier (not to mention cheaper) to maintain and update the Web site with a CSS based design. If you feel the need to change or add something, I can have it done in a few minutes, as opposed to hours or days with my competitors, and that will help you save even more money, possibly hundreds of dollars! And if that isn't enough of a reason, when it comes time to redesign the Web site, all I'll have to change are the layout images and a single file, rather than rebuildilng the entire Web site from scratch - which my competitors will have no choice but to do. That alone can save you thousands of dollars right there."

    That right there can be the deal maker. All you have to do is show the prospective client that the extra upfront cost is justified due to lower maintenance and redesign costs, and the chance to increase their sales revenue. If the client doesn't care about making more money (assuming a commercial venture here, of course), or even saving money on expenses, I'd start looking for a new client.

    Quote Originally Posted by poizn View Post
    I guess what I'm searching for at the moment, is some kind of validation that "building webs sites the right way" is going to pay off, vs doing it the easy way.
    Did this post validate your reasons for using CSS for layouts instead of tables?

  13. #13
    SitePoint Addict
    Join Date
    Jun 2006
    Location
    Durban, South Africa
    Posts
    287
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by Dan Schulz

    Did this post validate your reasons for using CSS for layouts instead of tables?
    Well yes half way there
    I like your sales pitch dialog (very clever).

    The reason I say, half way there, is because your post only addresses me (or the company I'm working for) pitching to a client.
    On the flip side, if I were a company who employed tabular designs, I would just re-design my sales pitch, ie emphasize the upfront cost and time, and how quick and cheap it would be, compared with my competitor's (with a little white lie about how quick changes can be done, because everyone knows how sales people can embellish, and thus promise something to a client, that the developers are going to have to make happen later :P).

    I guess the point I'm trying to make is, the uneducated client doesn't know about speed,
    download size, bandwidth used, seo and will eat up what ever the person selling the site is telling them (or not telling them!!!), and this is a real bummer for us "purists", us people trying to do things the right way. Its the same when people complain about the lack of quality of various good these day (cars, electronics, furniture, houses), but the difference with those is eventually, they break, or something goes wrong, something the consumer can see or identify. But its different with a web site, if its not performing at 100% (maybe the markup is bloated, other example above) but the person that bought the site will never notice that... So is there anything they will notice?

  14. #14
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's where I'd bring back the sales pitch. Tell the client that you can have one stylesheet for mobile phones, another for printers, and so on, instead of having to build multple versions for each media. Again, show the monetary savings - these people are generally thinking "how much is this going to cost me" and if you can show that while the upfront cost for the CSS site may be higher, it WILL be much lower compared to a table site, a printer-only version, a mobile version, updates and changes, and the ever-dreaded re-design. This in turn will help eliminate duplicate content issues that drive the search engines insane (tell them this can increase their search engine traffic, and consequently their sales), the site will be faster loading (meaning people won't leave the site before it finishes loading), will be able to serve more people... pretty much what I said before.

    I hate to say it, but when you're selling - or pitching - to a business, you gotta keep four words in mind at all times. "Show me the money." In this case, show you can SAVE the prospective client money while also demonstrating how the CSS version of the site can help them make more of it. If you craft the pitch right, and you use some hard numbers, chances are you'll win the job.

  15. #15
    SitePoint Guru glenngould's Avatar
    Join Date
    Nov 2005
    Posts
    661
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by james_clarky View Post
    I presume that it's just the forums, marketplace etc that use tables as they are powered by vBulletin. These sections are XHTML 1.0 transitional therefore this is acceptable. Whereas the rest of the site is XHTML 1.0 strict and doesn't use tables.
    For your information, the doctype of the document is not related to the use of the table element for presentational purposes. It is semantically wrong in any doctype.
    Tweep List adds an avatar menu to Twitter (open source)
    Word Stats shows your most used words on Twitter

  16. #16
    SitePoint Addict
    Join Date
    Jun 2006
    Location
    Durban, South Africa
    Posts
    287
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nice reply Dan Schulz

  17. #17
    SitePoint Member
    Join Date
    Feb 2006
    Location
    Manchester, UK
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by glenngould View Post
    For your information, the doctype of the document is not related to the use of the table element for presentational purposes. It is semantically wrong in any doctype.
    Yes I was wrong (I'm still learning). Thanks for pointing that out I think I was trying to come from a validation point of view - but in this case that would still be wrong as that's irrelevant as tables will still pass page validation (unless contain incorrect attributes for example). Is this right?

    So tables are fine for the actual content of forums as the data is organised with column headers. But for the forum navigation (for example) tables shouldn't be used as this is merely a presentational choice and therefore you should use CSS.

    Again please correct me as it's been a few years since I got stuck into anything web wise so I'm trying to get myself up to scratch.

  18. #18
    SitePoint Guru glenngould's Avatar
    Join Date
    Nov 2005
    Posts
    661
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by james_clarky View Post
    Yes I was wrong (I'm still learning). Thanks for pointing that out I think I was trying to come from a validation point of view - but in this case that would still be wrong as that's irrelevant as tables will still pass page validation (unless contain incorrect attributes for example). Is this right?

    So tables are fine for the actual content of forums as the data is organised with column headers. But for the forum navigation (for example) tables shouldn't be used as this is merely a presentational choice and therefore you should use CSS.

    Again please correct me as it's been a few years since I got stuck into anything web wise so I'm trying to get myself up to scratch.
    You may read this dated but still nice article on "why tables for layout is stupid"
    Tweep List adds an avatar menu to Twitter (open source)
    Word Stats shows your most used words on Twitter

  19. #19
    SitePoint Enthusiast
    Join Date
    Sep 2007
    Location
    Essex, UK
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Schulz View Post
    That's where I'd bring back the sales pitch. Tell the client that you can have one stylesheet for mobile phones, another for printers, and so on, instead of having to build multple versions for each media. Again, show the monetary savings - these people are generally thinking "how much is this going to cost me" and if you can show that while the upfront cost for the CSS site may be higher, it WILL be much lower compared to a table site, a printer-only version, a mobile version, updates and changes, and the ever-dreaded re-design. This in turn will help eliminate duplicate content issues that drive the search engines insane (tell them this can increase their search engine traffic, and consequently their sales), the site will be faster loading (meaning people won't leave the site before it finishes loading), will be able to serve more people... pretty much what I said before.

    I hate to say it, but when you're selling - or pitching - to a business, you gotta keep four words in mind at all times. "Show me the money." In this case, show you can SAVE the prospective client money while also demonstrating how the CSS version of the site can help them make more of it. If you craft the pitch right, and you use some hard numbers, chances are you'll win the job.
    Tell you what dan!! That's some bloody good advice there mate!! I'm gonna keep that in mind!
    "Show me the money".....great stuff!

  20. #20
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Brendon Sinclair has been saying that for years in the SitePoint Tribune and The Web Design Business Kit. It's only natural that I'd pick it up from him.

  21. #21
    SitePoint Zealot quantum physics's Avatar
    Join Date
    Nov 2008
    Location
    Bombay
    Posts
    152
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I Like css :P

  22. #22
    SitePoint Zealot
    Join Date
    Nov 2008
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jemple View Post
    But if its something that requires, cuts, fixes, hacks and hours of emotional pain to make it look the same in IE as other browsers, I just slam it in tables.
    Like everything else... With time its not as much of a hassle, and you learn to design around / away from the things that can cause problems (not by cutting features, but by going at it a different way). In the end, no matter what. A master of CSS will always have an upper hand on a master of tables.

  23. #23
    SitePoint Zealot
    Join Date
    Oct 2007
    Posts
    148
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    css is a nightmare to maintain in my experience, tables in dreamweaver still a lot easier

  24. #24
    WordPress Freelancer banago's Avatar
    Join Date
    Dec 2006
    Location
    Vlorė, Albania
    Posts
    446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    WPlancer.Com - PHP & WordPress Developer
    ProverbHunter - English Proverbs Explained

  25. #25
    SitePoint Member
    Join Date
    Dec 2008
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My opinion is that CSS is the right way to go for people who have an understanding of how to use it properly and can insure their design is cross browser compatible. CSS sites load faster, index better due to low code to content ratio, are more flexible from a design standpoint and in general look better since they are more customizable.
    When in doubt, build a website!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •