SitePoint Sponsor

User Tag List

Results 1 to 19 of 19
  1. #1
    SitePoint Guru toasti's Avatar
    Join Date
    Feb 2004
    Location
    Grahamstown
    Posts
    634
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Your opinion on hybrid tables

    I origionally designed a site using only CSS with 3 column header and footer. was great, worked well in IE...but complete mess in anything else.

    since then i have learned a thing or 2, have managed to make a CSS 3 col header and footer layout which is a bit more robust (still not ideal in netscape). and now i am just thinking maybe hybrid table are the way forward. i can get the same layout which works perfect in all browsers i've tried using one table as a general container, and seems to afford me a lot more flexibility.

    personally i feel a lot more comfortable going the table route, cause i can feel pretty comfortable that my site will work proberly in most browsers. i will still use CSS for all other elements of the site, just the container as a table.

    what are your opinions? is it really better to go the pure CSS route?

  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)
    Do the table if that's what you're most comfortable with. You're the one maintaining the site, not us

  3. #3
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Yeah, as Vinnie said. There have been countless debates on the topic, but really, the choice is whatever works for you.

  4. #4
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Mark up documents with the proper structural elements. Control presentation with style sheets rather than with presentation elements and attributes.

    Using markup improperly -- not according to specification -- hinders accessibility. Misusing markup for a presentation effect (e.g., using a table for layout or a header to change the font size) makes it difficult for users with specialized software to understand the organization of the page or to navigate through it. Furthermore, using presentation markup rather than structural markup to convey structure (e.g., constructing what looks like a table of data with an HTML PRE element) makes it difficult to render a page intelligibly to other devices.
    From here

  5. #5
    SitePoint Guru toasti's Avatar
    Join Date
    Feb 2004
    Location
    Grahamstown
    Posts
    634
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok. cool. apart from stylistic differences, are there any performance differences? i would guess that pure CSS is faster..?

  6. #6
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by toasti
    ok. cool. apart from stylistic differences, are there any performance differences? i would guess that pure CSS is faster..?
    If you code correctly the difference shouldn't be very much. Just stay away from nested tables and do as much in your CSS file as you can. I'm thinking of a basic structure like this that would work for you:
    HTML Code:
    <body>
    <div id="header">
    <h1>Site header.</h1>
    </div>
    <table id="layout" cellspacing="0">
    <tr>
    <td id="menu">
    <ul>
    <li><a href="/">Menu items.</a></li>
    </ul>
    </td>
    <td id="content">
    <h2>Content</h2>
    <p>More content.</p>
    </td>
    <td id="sidebar">
    <h3>Extra information.</h3>
    <p>Some more information for your readers.</p>
    </td>
    </tr>
    </table>
    <div id="footer">
    <p>Footer information.</p>
    </div>
    </body>
    Then do everything else in your CSS

  7. #7
    SitePoint Guru toasti's Avatar
    Join Date
    Feb 2004
    Location
    Grahamstown
    Posts
    634
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    vgarcia: thanks for the code. never really thought of it like that... i had something more like:
    Code:
    <table>
    <tr><td id="header" colspan="3" >
    <?php include ('header.php') ?>
    </td></tr>
    <tr>
    <td id="leftside" valign="top">
        <?php include('leftside.php'); ?>
    </td>
    <td id="center" valign="top">
         <?php include('index_body.php'); ?>
          </p>
    </td>
    <td id="rightside" valign="top">
        <p> 
          <?php include('rightside.php'); ?>
        </p>
    </td>
    </tr>
    <tr><td id="header" colspan="3" >
    <?php include ('header.php') ?>
    </td></tr>
    </table>
    not too sure of the merits of including/excluding the header and footer from the main content.
    Misusing markup for a presentation effect (e.g., using a table for layout or a header to change the font size) makes it difficult for users with specialized software to understand the organization of the page or to navigate through it.
    point taken...but if CSS (esp. mine!) tends to look rather unideal in different browsers, then i think one would be loosing out on a lot more accessibility than if people using specialized software find it diffecult to understand!

  8. #8
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    I'd keep the header and footer out of the table. Tables don't render onscreen until the whole thing has been loaded. By keeping the header and footer separated they can render first and give an appearance of faster loading. I'd also stay away from presentational class and ID names like "leftside" and "rightside". What if one day you wanted to move your navigation to the right instead of left and move the sidebar to the left instead of right? Then your "leftside" ID would actually apply to the table cell that renders on the right side, confusing the hell out of anyone who has to read your code.

  9. #9
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by toasti
    point taken...but if CSS (esp. mine!) tends to look rather unideal in different browsers, then i think one would be loosing out on a lot more accessibility than if people using specialized software find it diffecult to understand!
    I think you'll find that the number of disabled people who might want to access your website greatly outweighs the numbers still using browsers incapable of handling CSS.

    If you've having problems getting to grips with CSS, just keep trying - or post your problems here for advice. Don't just give up and go back to using tables because it's easier for you.

    All IMHO, of course.

  10. #10
    SitePoint Guru toasti's Avatar
    Join Date
    Feb 2004
    Location
    Grahamstown
    Posts
    634
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Tables don't render onscreen until the whole thing has been loaded. By keeping the header and footer separated they can render first and give an appearance of faster loading
    Thats a very good point! and a nice way to get around it!
    If you've having problems getting to grips with CSS, just keep trying - or post your problems here for advice. Don't just give up and go back to using tables because it's easier for you.
    I'm going to go out on a limb here....but can CSS actually achieve the equivalent of what that table code would? (i'm sure it can, but havent found an adequate solution yet)

    where u have a header and a footer at the top and bottom, and the left, right and content columns are always the same length, and (if you feel like it), take up 100% of the page height.

    I've seen a lot of 3 col layouts with CSS, but i've never managed to get this right...its probibly quite simple...

  11. #11
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by toasti
    I'm going to go out on a limb here....but can CSS actually achieve the equivalent of what that table code would? (i'm sure it can, but havent found an adequate solution yet)

    where u have a header and a footer at the top and bottom, and the left, right and content columns are always the same length, and (if you feel like it), take up 100% of the page height.
    Have you read Paul O'B's thread at the top of this forum? Dozens of ways to achieve this, with varying background effects, code in different orders, etc.

    Also: www.csszengarden.com if you seriously doubt the ability of CSS to achieve any layout imaginable.

  12. #12
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Buddy Bradley
    Have you read Paul O'B's thread at the top of this forum? Dozens of ways to achieve this, with varying background effects, code in different orders, etc.
    But that layout falls apart in some browsers (IE/Mac I'm looking at you) where the table wouldn't. I'm of the mind that the CSS method isn't "better" than the table method, they're just different depending on which set of circumstances match your goals. Tables (even layout tables) can be accessible too ya know.

    Quote Originally Posted by Joe Clark
    The use of tables for layout has never been prohibited by the Web Accessibility Initiative. You are not creating an inaccessible page if it contains tables used for layout. You have committed no sin necessarily. You will not be forced to turn in your trackball and badge while WAI Internal Affairs conducts an investigation. But you are not off the hook: You must code tables properly, which, for layout tables, is not difficult at all.
    http://www.joeclark.org/book/sashay/...Chapter10.html

  13. #13
    SitePoint Wizard silver trophybronze trophy Nadia P's Avatar
    Join Date
    Oct 2004
    Location
    NSW Australia
    Posts
    3,564
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vgarcia
    But that layout falls apart in some browsers (IE/Mac I'm looking at you) where the table wouldn't. I'm of the mind that the CSS method isn't "better" than the table method, they're just different depending on which set of circumstances match your goals. Tables (even layout tables) can be accessible too ya know.[/url]
    Exactly !! there are so many people on the "CSS-P is the only way to go" bandwagon these days. There is nothing wrong with using tables.. particularly for newbies until they get their head around the use of css. Keep the table structure simple and throw in lots of css - will keep most browsers happy

    Nadia

  14. #14
    SitePoint Wizard rbutler's Avatar
    Join Date
    Jul 2003
    Location
    Springfield, MO
    Posts
    1,867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Nadia P
    Keep the table structure simple and throw in lots of css - will keep most browsers happy
    I do not care to get into this debate, but I will argue the point that to get a decent layout in CSS to work in tables, you're going to have to use nested tables within each other which will result in slower load time, therefore, the simple table layout solution is not going to last long. Of course, there's nothing wrong with your statements.
    Ryan Butler

    Midwest Web Design

  15. #15
    SitePoint Guru toasti's Avatar
    Join Date
    Feb 2004
    Location
    Grahamstown
    Posts
    634
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    to get a decent layout in CSS to work in tables, you're going to have to use nested tables within each other
    why? i actually find it easier to work with CSS inside a basic table structure....but then again, maybe im just not doing it right

  16. #16
    SitePoint Guru toasti's Avatar
    Join Date
    Feb 2004
    Location
    Grahamstown
    Posts
    634
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think you'll find that the number of disabled people who might want to access your website greatly outweighs the numbers still using browsers incapable of handling CSS.
    just had a thought...my website is a photo gallery! why the hell would blind people want to see my website! lol.

  17. #17
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by toasti
    just had a thought...my website is a photo gallery! why the hell would blind people want to see my website! lol.
    Accessibility is not just about blind users - what about those with motor or cognitive disabilities; those with no access to the latest browsers; those using WebTV or a PDA to view the site?

  18. #18
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Vinnie
    But that layout falls apart in some browsers (IE/Mac I'm looking at you)
    Fixed that one ages ago Vinnie

    http://www.pmob.co.uk/temp/mac3column.htm

    Thers no issue between css and tables just use the right tool for the job in hand. At present tables support some layouts better so use them. However the w3c guidelines state that you should be moving away from tables for layout and when UA's support css fully then tables certainly should not be used for layout at all. There's some way to go before this happens of course so hybrid tables are fine for now .

    Regarding the fact that tables are easier and render better in all browsers is subjective. I have found that a lot of table layouts are broken and look different in every browser. I test a lot of sites for another organisation and I find display errors all the time in the table layouts. I'm not saying css is any better but well coded css is as good as well coded tables.

    There are some things that tables do very well especially equalising columns as a table-cell is the only element that will size itself depending on another element. IF IE had implemented min-width,max-width and display-table properties then nearly anything would be possible .

    Just use the method that works for the job in hand today but keep an eye on the future.

    my website is a photo gallery! why the hell would blind people want to see my website
    Thats the point they can't see your website. How will they know its a photo gallery unless you provide them with the means to access your site non-visually. I understand your point and if your website is a personal (or family) website then you can do what you like . However if you cater for a wider audience you never know who might drop in. But that's all another issue anyway but worth thinking about

    Paul

  19. #19
    SitePoint Member wvanelderen's Avatar
    Join Date
    Sep 2004
    Location
    Wellen, Belgium
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My advise is start looking at www.csszengarden.com

    The site led me to many solutions to solve css problems in other browsers.


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
  •