Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 12

Thread: tables or divs?

  1. #1
    Junior Member
    Join Date
    Mar 2013
    Posts
    5
    Member #
    35596
    The save for web command produces graphics in tables, correct? And if so is it true that one very important issue regarding tables compared to divs -without being 100% certain- is that Google is not fond of sites that use tables, it preferes divs? How will i put my graphics in divs (and not tables) when i slice my site and use the save for web command?

  2.  

  3. #2
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    You are correct, any graphics program that creates an HTML layout to hold a sliced up image is going to use a table.

    Its not that google or any other search engine doesn't like these layouts, its the fact that if you use them ( just slice and dice ) and then save as to create a page... 99.99% of the time, what is generate won't validate for standards on any site validator. More than likely, there will be no alt attributes defined on images, and if you put any kind of image swaps, the generated JS code is so convoluted that search engines won't event bother trying to determine any links that may be in in.

    Yes, most search engines can read JS, but most publish guidelines on their best practices ( which hardly anyone ever reads ).

    The other big drawback to using slice and dice for site layouts is the fact that a table is used.

    Tables were / are / and will forever be intended for "tabular data", they were never intended for design layouts.

    What most never get the grasp for about table based designs... Using tables, and browser encounters the opening <table> tag, no browser cane display any information contained inside theat table until it sees the closing </table> tag.

    Depending on how image intensive, if you've not optimized your images or whatever other data is enosed in that table, the browser is not going to show the visitor anything until its ALL loaded into memory.

    divs on the other hand, are displayed as they are loaded into memory.

    If done properly, a CSS layout, when you click on a page link can appear seemless ? Why, because the base elements ( header, footer, navigation, etc. ) are already in memory and don't have to be reloaded on each page.

    I've heard of designers still using programs like adobe CS to create and slice and dice their layouts, but they don't use any of the generated HTML code, they create their CSS layouts and bring their images into them... Thy still get to slice and dice... But they get the benefits of a properly coded, site that validates and loads quickly.

  4. #3
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Quote Originally Posted by Webzarus, post: 248836
    You are correct, any graphics program that creates an HTML layout to hold a sliced up image is going to use a table.
    I'm ashamed that I know this, but that isn't entirely true. You can use PS to output divs with CSS...even an external CSS file. You can even, if you take the time, set certain slices to use background-color instead of images, where appropriate. Problem is, all the divs are AP, and without painfully time-consuming work, the IDs (everything is named with an ID) are all garbage like, "slice_1". So, in the end, you have a table made of AP divs.

    Oh, and you spent as much time as you would have if you'd just done it all the right way.
    genik likes this.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  5. #4
    Junior Member
    Join Date
    Mar 2013
    Posts
    5
    Member #
    35596

    Webzarus... wow now thats what i call a great explanation and although i really appreciate it -don't get me wrong- im totally stressed cause -for me- all this div thing is a field totally unknown to me!

  6. #5
    Junior Member
    Join Date
    Mar 2013
    Posts
    5
    Member #
    35596
    Thanx Ronald, but what is the correct way to do web thing and how can i get a fast start on this? I know how to design but don't know how to build it using code, efficiently!

  7. #6
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Quote Originally Posted by genik, post: 248840
    Thanx Ronald, but what is the correct way to do web thing and how can i get a fast start on this? I know how to design but don't know how to build it using code, efficiently!
    It seems like you missed a few of the more important points in what I said, like this:
    Quote Originally Posted by Ronald Roe, post: 248837
    I'm ashamed that I know this...
    and this:
    Quote Originally Posted by Ronald Roe, post: 248837
    Problem is, all the divs are AP, and without painfully time-consuming work, the IDs (everything is named with an ID) are all garbage like, "slice_1". So, in the end, you have a table made of AP divs.
    and this:
    Quote Originally Posted by Ronald Roe, post: 248837
    Oh, and you spent as much time as you would have if you'd just done it all the right way.
    Sorry, but I won't be the one to tell you the wrong way to do things. The code that comes out is still completely crap, and will break even easier than the tables. If you're totally against learning to code (read: do it the right way), you probably should either hire out or just download and edit a template.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  8. #7
    Junior Member
    Join Date
    Mar 2013
    Posts
    5
    Member #
    35596
    My english isnt that fluent so give me a few more explanatory hints on
    What does AP mean?
    Why are you ashamed?
    What do you mean by table made of AP divs?
    Cani create in DW divs without coding?

  9. #8
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    Sorry Ron, don't be ashamed of know that ... I had no clue, as I have never used any of the newer versions of adobe... I actually started boycotting ( personal ) , when they bought out macromedia..

    But in knowing every version of DW up to and including MX... I knew there generated code was based on the lowest common denominator of all available browsers at the time... Same with their generated JS.

    I'm thinking of spending sometime trying to find an alternative that will work with html5 and CSS3. I hesitated to go in that direction for a long time ( I'm a late adopter of web stuff, just because there's such a gap between browsers and development tools).

    I can probably use my old version of DW, but really looking forward to utilizing some of the more promising aspects of html5 and css3.

    As for the OP, the learning curve of any WYSIWYG program is pretty hefty and can be frustrating if you don't know or understand the basics of what you are doing.

    Point an click development will only get you part of the way.

    I recently purchased the CSS3 "the missing manual", if you can learn from books ( some people can't ), but if you can, they also make a a series on HTML and CSS. They have a good format and ability to explain things in very easy to learn terms.

  10. #9
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Quote Originally Posted by genik, post: 248842
    My english isnt that fluent so give me a few more explanatory hints on
    What does AP mean?
    Why are you ashamed?
    What do you mean by table made of AP divs?
    Cani create in DW divs without coding?
    AP = Absolute Position
    I'm not actually ashamed, I was being sarcastic, but the way I used to make websites is generally frowned upon. We all start somewhere, I suppose, but I like to think I've come a long, long way since then.
    By "table made of AP divs", I mean you're still going to have a grid of absolutely positioned divs that amounts to the same amount of markup you'd have with tables.
    Yes, you can create div and CSS-based sites in DW without coding. That doesn't mean that you should.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  11. #10
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Quote Originally Posted by Webzarus, post: 248843
    Sorry Ron, don't be ashamed of know that ... I had no clue, as I have never used any of the newer versions of adobe... I actually started boycotting ( personal ) , when they bought out macromedia..

    But in knowing every version of DW up to and including MX... I knew there generated code was based on the lowest common denominator of all available browsers at the time... Same with their generated JS.
    I started out with Photoshop CS slicing and outputting markup. I tried DW at one point, but only as a code editor that was too clunky to be enjoyable to use.

    Quote Originally Posted by Webzarus, post: 248843
    I'm thinking of spending sometime trying to find an alternative that will work with html5 and CSS3. I hesitated to go in that direction for a long time ( I'm a late adopter of web stuff, just because there's such a gap between browsers and development tools).

    I can probably use my old version of DW, but really looking forward to utilizing some of the more promising aspects of html5 and css3.
    Might I recommend a couple options? Sublime Text 2 is my current favorite. And if it doesn't have code highlighting for your particular language/sub-language (SASS, for instance), a couple of keyboard commands are all that separate you from what you need. It's light enough that you can just use it like Notepad++, but has everything you need for higher-end project management.
    Aptana is another one. It's most of what I just said about ST2, but quite a bit heavier. It's geared more toward app development, but perfectly capable for smaller projects.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 06:42 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com