CSS+div .vs. tables - pros and cons? (Same old problems)

Discussion in 'CSS' started by goldensea80, Apr 3, 2006.

  1. #1
    goldensea80, Apr 3, 2006 IP
  2. sarahk

    sarahk iTamer Staff

    Messages:
    28,908
    Likes Received:
    4,555
    Best Answers:
    124
    Trophy Points:
    665
    #2
    I skimmed the article and would have to agree with the major points raised.

    Using their terminology of CSS and CSS-P and Tables the discussion is focussed on CSS-P and tables.

    My understanding is that a table cell must load fully before it displays while a div can load partially. In that sense CSS-P is better.

    Table were intended for presenting tabular data not structuring a page. Divs were intended for layout.

    What gets me though is having to have "hacks" in CSS-P (and CSS) to make it do what you want, and cope with browser versions etc. There, I stand beside the authors.

    I loathe CSS hacks. They waste time and energy. And for that reason I still use tables in my design. They're reliable, they do what I ask, and they don't need hacking.
     
    sarahk, Apr 3, 2006 IP
  3. the_pm

    the_pm Peon

    Messages:
    332
    Likes Received:
    33
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Decloak has been discussed in a variety of places. Our IWDN discussion went something like this.

    Here's the deal. Decloaked has a vested interest in perpetuating bad coding practices, because their product doesn't work in a properly coded Web environment! Decloaked, simply put, is garbage, and instead of making their garbage better, they cloak it in rhetoric to try to convince you that taking a giant leap backward is the best thing for you and the industry ;)

    Dave Siegal, the man who formally introduced the world to table-based layouts in the mid-90s said it best when he said "the Web is dead, and I killed it." It took him all of a year-and-a-half to recognize what a huge blunder he'd made with his unleashing of the table monster. Read more.

    No browser actually requires "hacks." Every CSS implementation done for the benefit of browsers behind the times uses valid, recognized CSS markup. It's just used in a way a greater variety of browsers can understand. People who use tables because they think it's more cross-browser friendly forget that there is a whole lot more to Web browsing than traditional computers. We can already provide a consistent, functional user experience across all browsers in current release without tables, why not extend the courtesy to other Web browsing platforms as well, such as handheld devices and browsers/devices meant to facilitate browsing for people with impairments? Why not cater to a wider audience using first-rate development techniques?

    In the meantime, you reduce your markup, you may get rewarded for good behavior by search engines, etc. etc. Lastly, I'll point out a post I made about a month ago, concerning the effects of moving from a table-based layout to a tableless layout in a corporate Intranet environment - http://forums.digitalpoint.com/showpost.php?p=683716&postcount=26

    There's a reason tableless layout has gone from being nearly unheard-of five years ago to challenging the table layout for dominence in the industry today. There's a reason five years ago WYSIWYG editors couldn't function without tables, and today they function without them by default (they still do a second-rate job, but they've come a long way). There's a reason these types of discussions are taking place and paradigms are shifting dramatically. There's a reason nearly every developer who makes that shift doesn't look back...
     
    the_pm, Apr 3, 2006 IP
  4. the_pm

    the_pm Peon

    Messages:
    332
    Likes Received:
    33
    Best Answers:
    0
    Trophy Points:
    0
    #4
    One last thing. To fully comprehend how backward Decloaked is, one need only look as far as a prominent example on their site: their argument against the use of null alt text. - https://www.decloak.com/Dev/CSSTables/CSS_Tables_10.aspx

    They use the argument that it's stupid to have to write alt="" for a 1x1 pixel spacer image. No Decloaked, it's stupid to have to use a 1x1 pixel spacer image in the first place, but I'll bet your product relies on them.

    You're not a bad person for using one particular practice or another. But you're a bad company when you deceive your audience in order to cover up your inadequecies.
     
    the_pm, Apr 3, 2006 IP
  5. Solicitors Mortgages

    Solicitors Mortgages Well-Known Member

    Messages:
    2,217
    Likes Received:
    139
    Best Answers:
    0
    Trophy Points:
    103
    #5
    I am surprised after you read that article that you need to question it.
    I read it some time ago and he makes some great points in there.

    Stick to tables..... for the mean time anyway ;)
    If the developers want to harp on about CSS for layout.. let them.
    They are fixated with it...it's like the whole David Koresh thing. :p

    FWIW I made one site in valid xhtml strict CSS-P ..and changed it back to tables 1 week later and that was for a really basic design :eek:
     
    Solicitors Mortgages, Apr 3, 2006 IP
  6. FeelLikeANut

    FeelLikeANut Peon

    Messages:
    330
    Likes Received:
    19
    Best Answers:
    0
    Trophy Points:
    0
    #6
    That article is biased and often inaccurate.

    There are really only two cons to CSS-P, as it now seems to be called.

    The first, and most obvious, is that you will need to learn something new. It is not just a language syntax that is new, but a set of techniques as well. Many developers have been using tables for years and have become extremely accustomed to how they display. They expect CSS to obey the same rules—it doesn’t. The new techniques that go with designing with CSS are what most people skip over, and are what causes the most frustration.

    The second con to CSS-P is hacks. Yes, you will almost certainly need to use a hack. The number of hacks needed, however, is greatly exaggerated. I have developed several sites with CSS-P, and the hacks have usually required only two CSS rules. I have never needed to use more than three. The people that use hack after hack after hack are the ones trying to use their old table techniques with CSS. Naturally, it doesn’t work well.

    The pros for using CSS-P are portability, more control, and maintainability.

    Portability means that your page will work, and even can be customized, for every kind of device. Your page will be more easily interpreted by search engine bots and screen readers, and you can specify what devices get what styles—your page’s design on a computer screen can be different from what a PDA will see, or from what a printer will see. For an example, look at an article from Wikipedia: http://en.wikipedia.org/wiki/History_of_Science. At the top there are links for a discussion, to edit the page, and to see the page’s history. There is also a link to sign in or to create an account, and there are many links along the left. None of these clickable objects make sense on paper. If you look at the print-preview for the Wikipedia page, you will see that none of these objects are present—only the article itself is printed. This is because a separate style sheet—a separate design—was targeted exclusively for print media.

    I say that CSS-P provides more control because there are certain tricks that tables are simply incapable of providing. Some properties are available for specific media, such as in print. There are properties, for instance, that allow you to control where the browser should put page breaks.

    And, finally, maintainability means that after your site is completed, changes to both design and content become much easier. With CSS-P, which implies semantic HTML, there is total separation between a page’s content and its presentation. This means you can change the page’s presentation without tinkering with the HTML. Consider these pages from the CSS Zen Garden:
    * http://www.csszengarden.com/
    * http://www.csszengarden.com/?cssfile=/194/194.css
    * http://www.csszengarden.com/?cssfile=/191/191.css
    All have a very distinct look, but, more importantly, all are the exact same HTML page. And, since switching from one design to another involves switching only a single style sheet, changing the design for one page is just as easy as changing the design for 10 pages which is just as easy as changing the design for 1,000 pages. If you used tables and spacer images, however, those tables and images are present on every one of those 1,000 pages, and you will need to edit every one of those pages to make any change.
     
    FeelLikeANut, Apr 4, 2006 IP