SitePoint Sponsor

User Tag List

Page 1 of 6 12345 ... LastLast
Results 1 to 25 of 139
  1. #1
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question 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. If you get where Iím coming from, please help me understand using logic.

    Jennifer

  2. #2
    Non-Member
    Join Date
    Dec 2010
    Location
    /home/pc
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by JenniferBigBlue View Post

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

  3. #3
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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
    All those who wander aren't lost.

  4. #4
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    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:

    http://sixrevisions.com/web_design/s...-html-and-css/

  5. #5
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,147
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    ďGood artists copy, great artists stealĒ (Pablo Picasso - 1934)

  6. #6
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  7. #7
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by donboe View Post
    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.
    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?

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi Jennifer,

    Welcome to Sitepoint

    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

    Quote Originally Posted by JenniferBigBlue View Post
    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?
    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.

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

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

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

  9. #9
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,862
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by JenniferBigBlue View Post
    What is the benefit of separation of document content from document presentation?
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  10. #10
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,147
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by JenniferBigBlue View Post
    Positioning. You mean items positioned where I want them? I thought I do that now.
    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.

    Quote Originally Posted by JenniferBigBlue View Post
    What is the benefit of separation of document content from document presentation?
    See the answers from Paul OB and felgall
    ďGood artists copy, great artists stealĒ (Pablo Picasso - 1934)

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Jennifer
    “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?
    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.

  12. #12
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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! 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

  13. #13
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,862
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by JenniferBigBlue View Post
    Maybe the decision to go CSS or table depends on who you are, how you like to work, and who your clients are.
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  14. #14
    Non-Member
    Join Date
    Dec 2010
    Location
    /home/pc
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by JenniferBigBlue View Post
    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.
    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.

  15. #15
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,862
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by aidos View Post
    but if you're building a website for yourself only and it validates correctly using tables.
    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:
    • 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


    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).
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  16. #16
    Non-Member
    Join Date
    Dec 2010
    Location
    /home/pc
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    If you are building it for yourself only then it doesn't matter whether it validates or not...
    Not true if you want validated html. Even if you choose to use tables you still might want your code to validate successfully.

  17. #17
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,862
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by aidos View Post
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  18. #18
    Non-Member
    Join Date
    Dec 2010
    Location
    /home/pc
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  19. #19
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    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.

  20. #20
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,862
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by aidos View Post
    I don't see the above code as garbage at all
    I guess you ride your bicycle around the moon before breakfast every morning then if you can't tell the difference between a table and a heading. After all a bicycle is a perfectly valid means of transport so why not use it to go to the moon.

    That's as valid a way to get to the moon as the code I posted was for defining that headtableing garbage.

    As I mentioned before - the first time I swapped two columns on my web site it took me months to recode the tables in all the pages, the second time took as long but that time I got rid of the tables and replaced them with CSS, the third, fourth, fifth, sixth, seventh, eight, ninth, and tenth times for switching columns around has taken about two minutes each to change the CSS that ALL two thousand pages use. The nearly 18 months time that getting rid of the tables has saved me would have been totally wasted if I had continued to use tables after it became possible to do it properly with CSS. You may be prepared to spend years monotonously swapping the columns around in table after table on page after page but anyone with a brain would far rather free up that time by using a shared CSS file instead which also has the benefit that those listening to the page be read to them can hear it in a meaningful order rather than mess a jumbled as.

    The page important order in a web of is things. (possible order of content when using tables)

    The order of things in a web page is important. (actual order of content when leaving appearance to CSS).

    Anyway all those borders through the middle of web pages make any table based web layout look ugly.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  21. #21
    Non-Member
    Join Date
    Dec 2010
    Location
    /home/pc
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    I guess you ride your bicycle around the moon before breakfast every morning then if you can't tell the difference between a table and a heading.
    I can tell the difference between a table and a heading. I personally wouldn't put a heading in a table but if someone else chooses to do so, as they are entitled to, then I'm not going to say they must not do that. It's their choice after I or anyone else advises them of other options.

    So it seems we basically are in agreement regarding not using tables for layout except that you seem to be struggling to cope with me not caring if someone else chooses to use tables.

  22. #22
    Non-Member
    Join Date
    Jun 2010
    Location
    47į27′35″N 26į18′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi JenniferBigBlue


    I guess you need logic reasons. So, let me try give you at least one:



    Your content needs structure. Now, structure is a two meanings word here: semantic structure and presentational structure.

    Usually, when making a tableless layout, in order to give your document a presentational structure, you ONLY use SPECIAL html elements that have no semantic meaning: div and span. These two are specifically meant for this kind of job: presentational structure, hooks for presentation. Using them helps your semantic structure remain clean.

    Now, in return, by using tables for layout, you are ruining your semantic content structure you probably worked so hard for, because tables equals elements that have a specific semantic meaning, not a void one.

    It's like you have in your mind very clearly what you want to say, but then, when you start to voice it out, it comes out as a different thing all together, making you sound confusing for those intrepreting your page. And I reffer not to the user, but to the agents. Why? See below



    The sighted user is not the standard by which you develop your webpage. That's a mistake. Different agents interpreting your markup should be your primary concern. Accounting also for possible custom user settings for those agents. And that's where lies the difference between designers and developers!

    Designers consider only well sighted users when making designs, having only a type of agents with default settings. Developers need to account for all types of agents and user custom prefferences, to make sure a design will always make sense.

    Designers consider only the end visual result, overlooking the semantic structure. Developers start with a semantic structure for the content, that will target all types of agents, not just visual agents. Then they build a presentational structure for that semantic content that will keep it that way: semantic content. And only then, they try to make it look like designer's concept, targeting visual agents alone this time.




    So, as far as I can tell, you're asking whether to code like a designer or to design like a developer My advice, design like a designer and code like a developer. Semantic and Tableless.

  23. #23
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Noonnope,

    I AM a highly visual person with no apologies. It's what I've been paid to be for the last 20 years. But I agree with you, form and function are not mutually exclusive. It's a beautiful marriage. I not only want to design gorgeous websites, but ones that function well and accomplish the intended goals.

    If I'm understanding correctly, semantic structure of content is about giving heirachy and order to information. Right now I'm in the WHY phase, so let me ask, why is having a semantic structure important? Does it help more than the blind and the search engines? In what other ways is it useful or used? Please be really specific.

    Thanks for your time!
    Jennifer

  24. #24
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi Jennifer,

    Quote Originally Posted by JenniferBigBlue View Post
    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.
    Yes, I sympathise because it's not easy to let go of something you are familiar with and know how it works. Perhaps, you could take it slowly and rather than trying to do it all at once - do it in stages. When you feel the need for a nested table try and do it with CSS instead.

    I’m comfortable with my peers looking down their noses at me. Never understood why people do that.
    That always happens

    “..tables were never meant for tabular data”…I assume you meant the opposite?
    Doh! I think faster than I can type but you understood what I intended.

    “..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.
    I mean "care about best practices" that aid all visitors to your site (from search engines to the disabled to poor sighted or motor impaired users). They are all your visitors and they will all have a first impression. If they can't find how to get to the content then they will be off to a site that does it better.

    I agree that for small sites this may not be much of an issue but the underlying problem is still there. With a little extra work it can be fixed.

    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.)
    Yes we all want a site that looks good but research shows that users want a site that delivers good content rather than a site that just looks good. To have both is great and there is no reason why a site can't look good and also be good under the hood. Otherwise its like having a Ferrari that has the engine of a mini.

    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?
    Well those are all the reasons for using CSS as CSS does come out top in all those areas. Research has shown it to be true although it's not the whole story and of course table sites can be made to rank high also but by default css comes out in top in all the areas you mention.

    I don't mean to twist your words but in your first post you've already indirectly hinted that you don't care about bandwidth, you don't care about code to content ratio and you don't care that disabled users might not be able to access your content (because you use tables) . There's more to web design that what you see on the screen.

    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.
    Well that's a different issue anyway and you would still use css in your templates. How you work is up to you and what suits you. If you are happy with templates then that's fine.

    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.
    Glad to hear it

    If you are only using a single table to hold the page layout then I don't see much harm in that if done properly. It's the nested table approach that is bad and using tables for menus and tables for lists and tables for pictures that is really bad.

    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.)
    Most SEO specialists are living in the past and will actually harm rankings so if you have a good one then keep hold of them. These days Google will index much more of a site than it used to so content to code ratio is less of an issue but in a recent Video Max Cutts of Google said that it did help to have content high in the page and close to the headings so that the relevance increased. Obviously having tables in the way dilutes this process to some degree. Whether or nt it's a big issue the answer is as I said before why take the risk when there is a better solution available?

    “..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?
    Interesting question and I think you might find some answers in the link that Max posted above. Web designers should fully understand the medium they are working in or at least collaborate with someone who does. My graphic skills are zero but I know instantly I see a PSD whether it will work or not and will advise the designer what changes are needed to make it work on the page.

    Web design is one of the areas where there are so many skills needed that it's not always possible to be master of all and sometimes you just have to get help from those that you know or respect.

    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.
    Yes that may be true

    It all depends whether you want to be at the front or at the back. It can be hard keeping up with everything but inevitably things change and you don't want to be left with a skillset that is no longer much use or not much in demand.

    CSS may not be the ultimate solution and there may be something better around the corner but I can guarantee you that is is not going to be a table approach.

    A lot of well known "experts" have gone as far as to say that CSS3 will become the future and you will find that a lot of applications will be designed in CSS rather than other coding languages.

    John Allsopp
    Over the coming five to ten years, I have little doubt that the vast majority of screen-based interfaces will be developed using CSS, HTML, and JavaScript. That will affect in-flight entertainment systems, car dashboards, ATMs, you name it.
    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! 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.?
    You will find a few answers in this thread. Testing on various devices and browsers is difficult - there's no two ways about it.

    The way I manage it is basically to download as many browsers as I can and test in these. I have a PC with xp, a laptop with vista, and a mac computer running windows 7 under parallels. This allows to me to test a range of browsers under various systems and there's a good chance that I will be able to spot and sort out problems from this.

    I also have the iphone emulator form apple running on the mac which is a true emulation of the iphone (or as close as you can get).

    There's no substitute for having the browser to hand and although sites like browershots are useful they are hard to use for debugging as a screenshot tells you little except that it doesn't look right.
    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
    No problem I think you are asking the right questions and just need some motivation. I wish I could say it would be easy and that the rewards will be great but life isn't like that

  25. #25
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    To help others explain the specific benefits that CSS layout and semantic markup would have for you it would help to see examples of your current work. Please provide links to sites you have created.


Tags for this Thread

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
  •