38 users online (0 members and 38 guests)  


  Results 1 to 6 of 6

Related

  1. Replies: 2
  2. Replies: 0
  3. dumb tables question    Forum: HTML Forum
    Replies: 7
  4. Replies: 2
  5. Replies: 8
  1. #1
    Dinrock's Avatar
    New User

    Status
    Offline
    Join Date
    Sep 2003
    Location
    Michigan
    Posts
    4

    new member: Dinrock w/question regarding TABLES

    Greetings!
    Am new to Frontpage & this forum. Question is in regards to TABLES. I'm using FP 2002 and writing in WYSIWYG. I laid out a table @760 pixels wide and inserted my Xara-created header.
    Below that, I inserted ANOTHER table @758 pixels wide and included informational text etc. now below these, I inserted ANOTHER table, kept @758 pixels wide where all the rest of any information text/paragraphs will carry through and down the rest of the page.
    In reading a couple of books I have (Frontpage Plain & Simple and Microsoft Frontpage 2002 Simply Visual) I found NO technical info on tables, but read on other sites that "nesting" tables causes slower load-times...and I realize this. My question goes out to anyone with deep knowledge and experience in "nesting" and that is, since I basically have 2 tables nested within my primary (760 pix wide) table, will this cause problems for my page in load time?
    Am I going overboard in nesting? Thanks and look forward to any response to this perplexing (to me!) question. I have a temporary page up at http://members.tripod.com/dan_bud/ but that is only VERY temporary and a test page on how I am beginning. I hope you are all well!

    Sincerely,
    Dan

  2. #2
    Android's Avatar

    Status
    Offline
    Join Date
    Oct 2002
    Location
    I AM CANADIAN
    Posts
    440
    From your source I can see this kind of structure:
    Code:
    <table>
     <tr>
       <td>
    some stuff here on top of the nested table
       <!--nested table-->
          <table>
            <tr>
             <td>
           Stuff in the nested table.
             </td>
           </tr>
         </table>
       <!--end of nested table-->
    More stuff here under the nested table.
    </td></tr></table>
    There's nothing wrong with nesting tables unless you are going to go several levels of nesting to achieve the kind of layout you desire. Browsers tend to bog down while rendering several levels of nesting (especially if you use something like Frontpage; it tends to insert alot of useless and unnecessary code).
    I would suggest doing the initial layout in Frontpage just to get the layout, and then inserting the content via a text editor (Notepad) while at the same time removing all the non breaking spaces inserted by Frontpage.
    (When you use Front page, it doesn't know (or care) that you'd be just as happy with the layout if an image is placed left by 2 pixels, or your margins are a couple of pixels wider.)

    The original intention of tables was to structure tabular data; hence W3C's insistance that the style be achieved by CSS positioned DIVs. You also might find that as a site evolves, it could be much more difficult to maintain the original layout if it's in tables. It's much easier to deal with DIVs when you change to a different shaped image, or change the size of the font.
    Hope this isn't too winded! Tables vs DIVs is always an interesting topic for me.
    I'm interested in hearing other takes on this topic.

  3. #3
    Dinrock's Avatar
    New User

    Status
    Offline
    Join Date
    Sep 2003
    Location
    Michigan
    Posts
    4
    Android:
    Appreciate that. No, I don't have any intention of going into several levels of nesting to achieve my desired layout. As mentioned in my initial post, I'll have 2 other tables WITHIN my primary, so essentially I should have a reasonable load-time. I could structure content out of notepad, but feel comfortable working within the editor adding my paragraphs/text in my last (or third) table by separating additional paragraphs/text by adding the horizontal line between each.
    I can then go back & delete the borders of all 3 tables that way. CSS positioned DIVs are a whole new ballgame to me so I'm tending to stay away from it. BTW, I'll hope to re-upload a newer test page later after adding a specific graphic or 2 to the rest of that page you saw.
    Thanks Android...great stuff. As long as someone can see where I'm coming from and if I'm on the right track (from a safe standpoint). I hope to do more research on tables shortly but if there's other insights out there, throw it at me.

    Sincerely,
    Dan

  4. #4
    Android's Avatar

    Status
    Offline
    Join Date
    Oct 2002
    Location
    I AM CANADIAN
    Posts
    440

    Talking

    I Googled:
    --html "nested tables" disadvantages--
    and came up with a couple of interesting pages (among 460 hits!) :

    http://courses.wccnet.org/computer/mod/w24d.htm
    http://www.jegsworks.com/Lessons/web/html/abouthtml.htm

    Interesting reading there.......

  5. #5
    Dinrock's Avatar
    New User

    Status
    Offline
    Join Date
    Sep 2003
    Location
    Michigan
    Posts
    4
    I like it Android! I'm bookmarking those two. The top one is VERY informative. Thank you for turning me onto them.
    I wanted to put EVERYTHING I have planned within a primary table but decided not to.
    After reading through the "advantages" listed in that first site, I really don't foresee a problem but they all say, when you start adding 5,6,7 or more and nesting deeper within a primary table, then the code really becomes "bloated".
    I do hope to structure my page further and format it in a way I eventually foresee it to be and get it up there on Tripod in it's "experimental" state for you to see in a few days.
    Any feedback would be mucho appreciated. As it stands right now I have to put it on the back burner and get to illustrating a comic strip project for Person Education publishing out in NY but will definitely get back into this site design (and the tables that go into it!) very soon.
    I enjoy your response and the relaying of those pages! Thank you.

    Sincerely,
    Dan

  6. #6
    mbh's Avatar
    New User

    Status
    Offline
    Join Date
    Jul 2003
    Location
    USA/Central Kentucky
    Posts
    18

    Pro Bono CSS

    I just threw this in for your reference and trust me it's not near as complicated as you might first think--truly!!!

    As time would permits take a glance at CSS it's so much more wonderful what you can do from a presentation standpoint. As you begin to understand it (won't take long) you'll more than appreciate being able to totally reformat and color things by using stylesheets. I've included the css/stylesheet internal to your document. Don't worry about the link and @import statements at the top for now unless you head for a multiple page web project.

    Anyway, print or cut n paste what follows for later reference if you find it interesting. I'll keep the file for a few days if you need it emailed to you in zip/.html file or whatever

    Take a moment, catch your breathe, and see how handily the divs have totally eliminated the need for tables of any kind. As rest assured CSS can be used many ways and how I have presented this here is NOT THE ONLY way to do it whatsoever...
    ==================================
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Dinrock CSS</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <!--used either one of these in the top of each document if you have a web site with multiple pages-->
    <!--<LINK rel="stylesheet" type="text/css" href="dinrocks.css" title="LinkStyles">-->
    <style>
    <!--
    @import url(dinrocks.css);
    -->
    </style>
    <!-- ================================================================================== -->
    <style type="text/css">
    /* Optional Code For Example/Sample sake */
    body { color: #000; background-color: #fff; text-align: justify; font-family: "Trebuchet MS", Trebuchet, Verdana, Arial, Helvetica, sans-serif; font-size: 86%; }
    p { padding: 0.5em; margin: 0; font-size: 1em; }
    h1 { padding: 0.5em; margin: 0; font-size: 1.3em; font-weight: normal; }
    h2 { padding: 0.5em; margin: 0; font-size: 1em; font-weight: bold; }
    ul { padding-right: 1em; text-align: left; margin-bottom: 1em; }
    .right { font-style: italic; }
    .normal { font-style: normal; }

    .mstr-container {

    }
    /*MAIN CODE FOR DINROCK*/

    .mstr-container {
    width: 100%;
    text-align: center;
    border: 3px solid red;
    }
    .header {
    text-align: center; /* wouldn't need this since the mstr-container is centered*/
    margin: 10px;
    }
    .ctr-container {
    width: 690px;
    margin: 10px;
    font-family: verdana;
    font-weight: bold;
    text-align: justify;
    }
    .ctr2-container {
    width: 690px;
    margin: 10px;
    color: green;
    font-family: Arial;
    font-weight: bold;
    text-align: justify;
    }
    .ctr3-container {
    width: 690px;
    margin: 10px;
    color: blue;
    font-family: Courier;
    font-weight: bold;
    text-align: justify;
    }
    .botm-container {
    width: 100px; /* right column width */
    margin-right: -100px; /* _negative_ right column width */
    }
    /*END MAIN CODE FOR DINROCK*/
    </style>
    </head>
    <body>

    <div class="mstr-container">

    <div class="header"><img border="0" src="DANSCARTOONSCOM.gif" width="690" height="83">
    </div>

    <div class="ctr-container">
    Cartoons by Dan Rosandich are available for any usage from the catalogs available
    here. These cartoons are available for a wide variety of uses including print, web, audio visual presentations, direct mail pieces, apparel, products, corporate usage, promotional items, logos, editorial, advertising and many other forms of graphic design.
    </div>
    <div class="ctr2-container">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </div>
    <div class="ctr3-container"><!--nested div ... unecessary but just for example-->
    <div style="background-color: wheat;">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </div>
    </div>
    </div>

    </div>

    </body>
    </html>
    ==================================