www.webdeveloper.com
Results 1 to 6 of 6

Thread: 5-25 tables in web pages

  1. #1
    Join Date
    May 2007
    Posts
    4

    5-25 tables in web pages

    what are anyone's thoughts regarding tables in web pages.

    We are making a 3 column page and wondering if the way to go is with tables? Site/pages will be linked to a CSS file ..

    I think I read and /or heard modern style tries not to use tables for this kind of thing

    Content in the columns [divided up] text links..
    ie..a little snipt of text which will link to the real content on another page
    Kind a-like http://www.newconsumer.com

    Except our site is only going to have the 3 left columns.

    thanks for any feed back
    Sincerely, Stewart

  2. #2
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    Most assuredly, not TABLEs as the page sited isn't 'tabular data' (e.g., 'like a spreadsheet with comparitive listings').

    http://www.hotdesign.com/seybold/index.html

    TABLEs are read twice by a browser before loading onto the user's screen, and the table will not render until it is 'read' the second time. This causes the delay that typically occurs when viewing a large columns of table-built layout. Complicate things, --start 'nesting' table-inside-of-table... it's a nightmare for user-devices. And there is all that non-semantic markup (images used for spacers, etc), -which all add up to page-bloat.

    The site you cited could be easily created with a vertically-expanding 'wrapper' that contains three columnular DIVs of "height:auto;" so as to 'expand' as any additional DIV topic should be added. And if any column expands 'taller' than the current container DIV, it too 'expands', thus keeping the page together.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

    <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <title></title>
    <style type="text/css">
    * {border:0; padding:0; margin:0;}/* Set everything to "zero" */

    body {min-height:100%; height:101%;
    font:x-small Arial, Verdana, sans-serif;
    voice-family: "\"}\"";voice-family:inherit;
    font-size:small;/*for IE 5.5 */
    } html>body {font-size:small; height:auto;}/* Assist IE6 & <, 100% height */
    font-size: small; voice-family: "\"}\"";
    voice-family: inherit; font-size: medium;} /* Assist IE rendering height, keyword-font sizes, etc. */

    p {font-size: 90%; line-height:1.3em; margin:12px 0 2px 0;}
    h1, h2, h3, h4, h5, h6 {font-family: 'times new roman', arial, verdana, serif; background-color:none;
    font-style:normal; font-variant:normal; font-weight:normal; margin:14px 0 4px 10px;}
    h1{font-size: 1.93em;}
    h2{font-size: 1.72em;}
    h3{font-size: 1.52em;}
    h4{font-size: 1.42em;}
    h5{font-size: 1.32em;}
    h6{font-size: 1.21em;}
    </style>

    <style type="text/css">
    #wrapper {width:95%; height:auto; margin:25px auto; border:3px dashed silver;}

    #left {width:23%; border:1px solid gray; height:auto; padding:10px 6px; float:left;}
    #middle {width:46%; border:1px solid gray; padding:10px 6px; height:auto; float:left}
    #right {width:26%; border:1px solid gray; padding:10px 6px; height:auto; float:left}

    #left div, #middle div, #right div {border:1px solid red; padding-bottom:14px;}
    #left div h3, #middle div h3, #right div h3 {margin:5px;}
    </style>


    <script type="text/javascript"><!--
    // -->
    </script>
    <link rel="shortcut icon" href="favicon.ico"><!-- path to your favicon -->
    </head>
    <body>
    <div id="wrapper">

    <div id="left">
    <div>
    <h3>Header</h3>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
    Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
    quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
    purus, vel hendrerit ipsum tellus at ante.</p>
    </div>

    <div>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
    Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
    quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
    purus, vel hendrerit ipsum tellus at ante.</p>
    </div>

    </div><!-- end "left" -->


    <div id="middle">
    <div>
    <h3>Header</h3>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
    purus, vel hendrerit ipsum tellus at ante.</p>
    </div>
    <div>
    <h3>Header</h3>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
    Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
    quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
    purus, vel hendrerit ipsum tellus at ante.</p>
    </div>
    <div>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
    Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
    quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
    purus, vel hendrerit ipsum tellus at ante. Nam vestibulum porttitor urna. Phasellus aliquet pretium
    quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
    purus, vel hendrerit ipsum tellus at ante.</p>
    </div>

    </div><!-- end "middle" -->

    <div id="right">
    <div>
    <h3>Header</h3>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
    Etiam tellus. </p>
    </div>
    <div>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
    Etiam tellus. </p>
    </div>
    <div>
    <h3>Header</h3>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
    Etiam tellus. </p>
    </div>
    </div><!-- end "right" -->

    <div style="clear:both;"><!-- required, before closing "wrapper" --></div>
    </div><!-- end "wrapper" -->

    </body>
    </html>
    Here is a quick-n-dirty example (took me about 10-mins to write?) of what I mean. Important css is BOLD
    Validates, looks exactly the same to IE as to Fx.
    As you add new "<div></div>" to any of "#left", "#middle" or "#right" DIVs, the "wrapper DIV" exapnds. Note the 'clearing DIV' at the very end. -Must remain just before the closing of "#wrapper" else the visible dotted silver border 'collapses', as 'floating' removes content from page.

    This would work for what you described. Some tweaking to make it 're-size' for smaller resolutions is easily added.

    Enjoy.
    Last edited by WebJoel; 05-26-2007 at 09:41 AM. Reason: speillingg... speltnng... SPELLING!
    I build for: Firefox and tweak for IE

  3. #3
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    I think I read and /or heard modern style tries not to use tables for this kind of thing
    As Yoda would say (Star Wars is 30 you know), there is no "try". Modern web pages do not use tables for layout.
    "Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it." Brian W. Kernighan

  4. #4
    Join Date
    May 2007
    Posts
    4

    WebJoel Thanks!! Vely interesting. as Chan would say

    WebJoel
    Your the MAN!! THANKS!!
    10 minutes..WOW!! I wonder what you can do in 10 hours ..
    because, that is just what we got this other fellow to do and this is all he got done.

    I had suggested we wanted something based on http://www.newconsumer.com
    except only 3 columns and he took me literally and started to recreate the page.
    Said he had to hand code this
    http://metazen.org/index.php/site/SampleNav
    Well he did a good job so far but, I don't think we can afford the time $$ he takes to do what he does..

    We are building a Internet RESOURCE Membership PORTAL for internet marketers and business people.

    for the moment, I was wondering maybe you have a clue why after I downloaded a 3 column temp from the DreamWeaver8 temps.
    their temp has:
    across the top ................. Site Name
    below across ....................global link: global link: global link; global link etc...
    next space down ..............Page Name
    Below that , across ..........breadcrumb; breadcrumb; breadcrumb; breadcrumb; breadcrumb; etc..
    Below that .......................search box
    Left column or nav column with .........links down
    Middle column with graphic placeholders and 4 or 5 sections down with links
    Right column ............ the same
    Bottom across more text links,,,,,,, about us link; site map link contact us link; Privacy Policy ... etc..
    ==========
    When I open the DreamW temp on my desk top, it comes in fine. But, when I drag it to the folder with the css, and then open it, all the fields just nest below each other straight down the page..
    got a clue??

    Thanks, Stewart

    edit by admin: no soliciting and no contact info permitted on the forum, thank you

  5. #5
    Join Date
    May 2007
    Posts
    4

    Thanks admin!! Sorry to take up your time!!

    edit by admin: no soliciting and no contact info permitted on the forum, thank you

  6. #6
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    Well, the template helps. Cut & paste, -also good. The site shown, -nothing complicated to make. Converse? PMs if not forum related.
    I build for: Firefox and tweak for IE

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles