SitePoint Sponsor

User Tag List

Results 1 to 25 of 25
  1. #1
    ********* Poet X Q mano's Avatar
    Join Date
    Oct 2002
    Location
    Still Thulcandra
    Posts
    997
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    The benefits of going tableless?

    Hi, I did ask this question carefully in another thread, but it wasn't the topic, so I decided to start a thread with this question...

    I've seen people say that they want to go from tables to using css for positioning...

    My experience is that tables are easy to use when positioning site elements and that they work very well...

    So my question is: What are the benefits of going tableless, and using CSS instead?

    Someone mentioned that nested tables can make the rendering of the page go slowly, but don't we have more to save in optimizing the graphics?

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)

    Re: The benefits of going tableless?

    Originally posted by X Q mano
    Hi, I did ask this question carefully in another thread, but it wasn't the topic, so I decided to start a thread with this question...

    I've seen people say that they want to go from tables to using css for positioning...

    My experience is that tables are easy to use when positioning site elements and that they work very well...

    So my question is: What are the benefits of going tableless, and using CSS instead?

    Someone mentioned that nested tables can make the rendering of the page go slowly, but don't we have more to save in optimizing the graphics?
    Benefits:
    1. Pages load quicker. What do you think would load faster, this:
    Code:
    <table border="0" cellpadding="0" cellspacing="0" width="500">
    <tr>
    <td>First Cell</td>
    </tr>
    </table>
    or this?:
    Code:
    <div class="layout">
    First div
    </div>
    2. Search engines can find your content faster, as there is less code to wade through.

    3. If all of your layout declarations are in the stylesheet you can modify everything in ONE place and have it propogate thru the site. Changing fonts on your site from arial to geneva? Now you just change a few lines in your stylesheet instead of trying to find all of the <font> tags on your site.

    4. No more stupid browser hacks to worry about (assuming your audience uses a browser that is from the last 2-3 years).

    5. Easier for other devices to parse thru such as handhelds, screen readers for the blind, Internet appliances, cellphones, and other devices we have yet to think of.

    6. You won't have to change your design for years and it will still work if the correct <!DOCTYPE> is applied.

    I'm sure there are more but those are what I can think of off the top of my head.

    --Vinnie

  3. #3
    ********* Poet X Q mano's Avatar
    Join Date
    Oct 2002
    Location
    Still Thulcandra
    Posts
    997
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, for your first point, I can see the benefit. Though I didn't think that the actual code was what took so long to load. Aren't the graphics a little more important to optimize when you want the page to load quicker?

    No. 2, is probably right...

    No. 3, hasn't exactly anything to do with tables has it? I use css so I won't have to write those annoying <font> tags... But I also use tables... (now, it might change)

    No. 4, Well, my experience is that NS 4, (So many people still use NS 4, it scares me) really has a problem with CSS...

    5, I don't know very much about this, so I can't argue with that

    6, That is, if you actually want your design to be the same for YEARS...

  4. #4
    SitePoint Wizard Ian Glass's Avatar
    Join Date
    Oct 2001
    Location
    Beyond yonder
    Posts
    2,384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by X Q mano
    6, That is, if you actually want your design to be the same for YEARS...
    I'm pretty sure he meant that you wouldn't have to change your page's structure at all. You can change your design as many times as you want--all with only one file, too--without ever touching the structure of the1001 pages you're redesigning.

    top-left-corner the number reason seven why: and the top-right-corner this is most important hard to reason, is because you're not understand discombobulating bottom-left-corner the source bottom-right-corner. Comprenda? ;-)

    ~~Ian

  5. #5
    Sidewalking anode's Avatar
    Join Date
    Mar 2001
    Location
    Philadelphia, US
    Posts
    2,205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Re: Re: The benefits of going tableless?

    Originally posted by vgarcia

    1. Pages load quicker. What do you think would load faster, this:
    Code:
    <table border="0" cellpadding="0" cellspacing="0" width="500">
    <tr>
    <td>First Cell</td>
    </tr>
    </table>
    or this?:
    Code:
    <div class="layout">
    First div
    </div>
    From what I understand, the bigger issue as far as slow loading tables is some browsers won't render a table until all of the cells in it are ready to go, or something along those lines.

  6. #6
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Re: Re: The benefits of going tableless?

    Originally posted by vgarcia


    Benefits:
    1. Pages load quicker. What do you think would load faster, this:
    Code:
    <table border="0" cellpadding="0" cellspacing="0" width="500">
    <tr>
    <td>First Cell</td>
    </tr>
    </table>
    or this?:
    Code:
    <div class="layout">
    First div
    </div>
    Aww, come on. That's cheating.

    Don't forget that the class info itself as well as the link to the css file (or the style tags) all add to the read/load time of a site.

    Code:
    <style type="text/css">
    @import url(styles.css);
    </style>
    
    +
    
    layout {
    border: 0;
    width: 500px;
    padding: 0;
    }
    
    +
    
    <div class="layout">
    First div
    </div>
    For the most part css layouts do reduce the amount of code needed.
    It's just unfortunate that the example you gave was being a bit economical with the truth.

    Arguments in favour of css can win the day without resorting to innaccurate comparisons.
    Last edited by Bill Posters; Dec 16, 2002 at 04:42.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  7. #7
    ********* Poet X Q mano's Avatar
    Join Date
    Oct 2002
    Location
    Still Thulcandra
    Posts
    997
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by Ian Glass

    top-left-corner the number reason seven why: and the top-right-corner this is most important hard to reason, is because you're not understand discombobulating bottom-left-corner the source bottom-right-corner. Comprenda? ;-)
    I'm afraid I didn't understand that one... Has it something to do with visually impaired users getting the information read out?

    Don't laugh at me if I'm wrong please...

  8. #8
    SitePoint Wizard samsm's Avatar
    Join Date
    Nov 2001
    Location
    Atlanta, GA, USA
    Posts
    5,011
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by X Q mano

    I'm afraid I didn't understand that one... Has it something to do with visually impaired users getting the information read out?
    Well, yes and no. We are all visually impaired in that a bunch of formatting tags and code in the middle of paragraph content can be a baffling ordeal.

    As far as viewers go, this might make viewing more difficult for visually impaired users but it will also make viewing of the source more diffcult for the coder.
    Using your unpaid time to add free content to SitePoint Pty Ltd's portfolio?

  9. #9
    SitePoint Member
    Join Date
    Dec 2002
    Location
    Wichita, KS
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    about #5

    5. Easier for other devices to parse thru such as handhelds, screen readers for the blind, Internet appliances, cellphones, and other devices we have yet to think of.
    Even if the browser being used doesn't understand the style sheet, it will display the information in a long column in a readable format. It may not be pretty, but it is functional. For an example, build a page using a style sheet and then remove the link from the page. It still displays, it is just really ugly.
    :: halo labs - internet junkies
    :: bzzztboy.com - learning and discussion center :: sign-up here
    :: knowledge is power and information is a commodity - less than zero

  10. #10
    SitePoint Guru
    Join Date
    Sep 1999
    Location
    Singapore
    Posts
    854
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Re: Re: Re: The benefits of going tableless?

    Originally posted by Bill Posters
    Aww, come on. That's cheating.

    Don't forget that the class info itself as well as the link to the css file (or the style tags) all add to the read/load time of a site.
    If external CSS files are used, then the CSS only needs to be downloaded once for the entire site.

    Of course you need code to @import or link to the CSS files, but that is insignificant compared to all the presentational HTML cruft you can get rid of.

  11. #11
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Re: Re: Re: Re: The benefits of going tableless?

    Originally posted by duckie


    If external CSS files are used, then the CSS only needs to be downloaded once for the entire site.

    Of course you need code to @import or link to the CSS files, but that is insignificant compared to all the presentational HTML cruft you can get rid of.
    I was just drawing a fairer comparison of 'just' the code in the example.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  12. #12
    ********* Poet X Q mano's Avatar
    Join Date
    Oct 2002
    Location
    Still Thulcandra
    Posts
    997
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Of course... I understood that too. But we ARE talking real life here...

  13. #13
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Then perhaps vgarcia should have used a little more real-life in the original sales-pitch.
    If I take examples at face value it's because I feel that newcomers might also be inclined to do so (esp. in cases where css is still brand new to them). I just wanted to push someone to make it clearer when the benefits of css really kick in.

    Anyway, it's all good
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  14. #14
    SitePoint Guru
    Join Date
    Sep 1999
    Location
    Singapore
    Posts
    854
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by Bill Posters
    Then perhaps vgarcia should have used a little more real-life in the original sales-pitch.
    If I take examples at face value it's because I feel that newcomers might also be inclined to do so (esp. in cases where css is still brand new to them). I just wanted to push someone to make it clearer when the benefits of css really kick in.
    Point taken. But its probably worth it to mention the savings you'll get if CSS is used site-wide.

  15. #15
    SitePoint Wizard Ian Glass's Avatar
    Join Date
    Oct 2001
    Location
    Beyond yonder
    Posts
    2,384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by X Q mano
    I'm afraid I didn't understand that one...
    Exactly! But, it's not about "visually impaired"--far too many designers/developers use that distinction to write people off.

    Like Sam pointed out, tabled designs can be a bear to edit and wade through for the developer. However, as a viewer, when the browser linerizes the tables (meaning that the browser just ignores <table>, <tr>, etc.) for some reason (i.e. in text-browsers, screen-readers, pocket pcs, old browsers, etc.) you get a very disorderly page--and that just escalates with complexity. Of course, your viewers don't get the advantage of color-coding, either. ;-)

    ~~Ian

  16. #16
    ********* Poet X Q mano's Avatar
    Join Date
    Oct 2002
    Location
    Still Thulcandra
    Posts
    997
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    But is it very common for browsers to ignore <table> tags... How many percent actually use devices that do?

    Now I'm not saying that because they are few, they should be ignored... I'm just wondering...

  17. #17
    Your Lord and Master, Foamy gold trophy Hierophant's Avatar
    Join Date
    Aug 1999
    Location
    Lancaster, Ca. USA
    Posts
    12,305
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by X Q mano
    But is it very common for browsers to ignore <table> tags... How many percent actually use devices that do?

    Now I'm not saying that because they are few, they should be ignored... I'm just wondering...
    I would hazard a guess that 10-15% of all Internet users today have a problem with tables in one way or another.

    This doesn't just include screen readers but it also includes Netscape 4.XX which can't display a page properly if it uses tables, CSS and javascript. It also includes MSNTV (formerly WebTV) and AOLTV. Throw in Cell Phones and PDA's and you have a very sizeable audience.

    It is estimated that by 2007, 1 Billion Cell Phones and PDA's will be connecting to the Internet in some form on a daily basis. The chances are they are going to be able to handle 800 X 600 fixed width table designs in the near future are between nil and zero. So if all you are really worried about it audience and marketshare then this is a sizable market to look at.
    Wayne Luke
    ------------


  18. #18
    SitePoint Enthusiast Option1's Avatar
    Join Date
    Nov 2002
    Location
    Up the back of the bus
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by W. Luke


    I would hazard a guess that 10-15% of all Internet users today have a problem with tables in one way or another.

    This doesn't just include screen readers but it also includes Netscape 4.XX which can't display a page properly if it uses tables, CSS and javascript. It also includes MSNTV (formerly WebTV) and AOLTV. Throw in Cell Phones and PDA's and you have a very sizeable audience.

    It is estimated that by 2007, 1 Billion Cell Phones and PDA's will be connecting to the Internet in some form on a daily basis. The chances are they are going to be able to handle 800 X 600 fixed width table designs in the near future are between nil and zero. So if all you are really worried about it audience and marketshare then this is a sizable market to look at.
    Ummm, don't you think including NS 4.xx in this was pushing it?

    NS 4.xx's display of CSS is problematic at best. I know there is a tableless (and hence CSS-based) design around that DOES work with NS 4.xx, but I've never seen a table not work with NS 4.xx either. Surely, where NS 4.xx will break will be with the additional CSS to make it look "oh so pretty, oh so pretty..."? That's something that's going to break in NS 4 irrespective of whether it's tables or tableless.

    Personally, I've already consigned NS 4.xx to the glue factory of history (unless some pita/difficult client insists on living in the past).

    Neil
    Last edited by Option1; Dec 17, 2002 at 10:19.

  19. #19
    Your Lord and Master, Foamy gold trophy Hierophant's Avatar
    Join Date
    Aug 1999
    Location
    Lancaster, Ca. USA
    Posts
    12,305
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Actually, Netscape 4.XX will show properly written CSS pages linearly since it doesn't recognize the DIV tag as will any other previous browser. The pages aren't the best designed things in the world but they are usable.

    And I have seen thousands of tabled pages choke Netscape 4.XX. Any site with more than 3 nested tables is pushing it and the rendering times are unbelievable. It partially because of Netscape 4.XX's handling of tables that they abandoned the Netscape 5.0 project and started writing the Gecko engine which is now licensed under the Mozilla License.

    I don't know why you would disregard a browser that still has more market share than any of its successors or any other browser on the market except for Internet Explorer.

    http://www.w3schools.com/browsers/browsers_stats.asp
    http://www.theregister.co.uk/content/6/28601.html
    Last edited by Hierophant; Dec 17, 2002 at 10:25.
    Wayne Luke
    ------------


  20. #20
    SitePoint Enthusiast Option1's Avatar
    Join Date
    Nov 2002
    Location
    Up the back of the bus
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmm, I'm not sure if you're saying I'm right or wrong.

    I know that http://www.realworldstyle.com/nn4_3col_header.html works in NS 4, but then again so will a table. My point was that NS 4.xx will not display much of the other CSS enhancements such as when that design is used or when a table is used. For example, http://staging.noao.edu/newnso/nso_kp/nso-kp.html

    My point still remains that it was a bit disingenuous to include NS 4.xx in your post because it displays tables just fine, it's the CSS it has trouble with.

    Neil

  21. #21
    SitePoint Enthusiast Option1's Avatar
    Join Date
    Nov 2002
    Location
    Up the back of the bus
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Seeing we're both here at the same time, I won't edit my previous post, I'll just make a new one.

    I missed the second half of your post above, but for me, I drew the line on NS 4 when it went to 2%. My choice.

    I take your point about nested tables, but then again nesting numerous tables anytime isn't something I'd consider great design. I still think it'll work a lot better than with CSS.

    Having said that, I'll make the same remark that Bill Posters made about an earlier attempt in this thread to push the benefits of tableless design, "Arguments in favour of css can win the day without resorting to innaccurate comparisons." To my mind, including NS 4.xx didn't help given the terrible reputation it has concerning CSS.

    Neil

  22. #22
    Your Lord and Master, Foamy gold trophy Hierophant's Avatar
    Join Date
    Aug 1999
    Location
    Lancaster, Ca. USA
    Posts
    12,305
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    The main point is that by removing the formatting from tables and the HTML file, you can cater to any browser whether it is a 5 year old has been. Or tomorrow's next greatest release. All it takes is a little forethought and a few style sheets.
    Wayne Luke
    ------------


  23. #23
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    I apologize for starting the ongoing war in this thread. It was not my intention to "lie" about anything regarding going table-less. Perhaps I should have been a little clearer with my code example. My points to be made from that post were:

    1. The style sheet need only be downloaded once for use throughout the site. All layout descriptions, etc. are in that one sheet ready for use by any other page in the domain. Thus you only have to do a <div class="layout"></div> to achieve your desired effect once you have gotten the stylesheet. Yes there is code to add to each page (an @import or <link> tag) but it is very small compared to the many table tags needed all over a table-based site.

    2. Style sheets keep you from having to resort to <font> tags littered all over your tables. Currently, all of the sites I maintain at work are table-based so I see both sides of the argument. Depending on when the site was created there are some with font tags littered all over the place that make an otherwise quick-loading site move VERY slowly, and there are other sites using stylesheets to format text, etc. that load much quicker.

    Again, I am sorry for all of the confusion. It was not my intention to give anyone a false impression of the benefits of CSS over tables, so please accept my apology.

    --Vinnie

  24. #24
    SitePoint Enthusiast Option1's Avatar
    Join Date
    Nov 2002
    Location
    Up the back of the bus
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Vinnie, my reading of this thread isn't so much that you started a war, more that people are quibbling over the actual reasons.

    Maybe I didn't make myself clear, but certainly I support tableless over tables and for the reasons you've stated so very well. I think some of us just want the reasons to be clear, accurate and beyond reproach. To my mind using that philosophy convinces more people to switch than using possibly spurious or suspect reasoning - not that I'm alleging anyone here has done that (he says, using both hands and a large piece of board to cover his butt).

    Neil

  25. #25
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Originally posted by Option1
    Vinnie, my reading of this thread isn't so much that you started a war, more that people are quibbling over the actual reasons.

    Maybe I didn't make myself clear, but certainly I support tableless over tables and for the reasons you've stated so very well. I think some of us just want the reasons to be clear, accurate and beyond reproach. To my mind using that philosophy convinces more people to switch than using possibly spurious or suspect reasoning - not that I'm alleging anyone here has done that (he says, using both hands and a large piece of board to cover his butt).

    Neil
    Point well taken. I also don't believe there's an easy "definite" answer as to why to go table-less. If you find yourself racking your brain over CSS and can do it 10x faster with tables then by all means, drop the XHTML for the site you're currently working on. Personally though, I think it's best to know both sides and I plan on learning even more about CSS and table-less designs because I really do believe that (for me anyway) it's a better way to go.

    --Vinnie


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
  •