Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    New Coder
    Join Date
    May 2007
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Making a Table within a Table.

    Ok, I'm working on a design using tables, I haven't learned to us div yet. But I can't seem to remember how to do a table within a table. The reason I want to do this, is I want to do an expanding table on the outside that will grow with the table/s I may put on the inside. Please help, thanks.

  • #2
    New Coder sdcomputerz's Avatar
    Join Date
    Feb 2007
    Location
    Hawaii
    Posts
    62
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Try
    Code:
    <table>
       <tr>
          <td>
             <table>
                <tr>
                   <td>
                      <p>Hello World!</p>
                   </td>
                </tr>
             </table>
          </td>
       </tr>
    </table>
    Last edited by sdcomputerz; 05-31-2007 at 02:45 AM.
    You can never have nothing, because nothing is still something.
    SD Computerz
    Free Domain Names
    Gaming Lagoon - Buying your game time!

  • #3
    New Coder
    Join Date
    May 2007
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts
    So, kinda like this? I'm sorry I learn from example.

    Code:
    <table>
    <td>
    <tr>
    Words....
    </td>
    </tr>
    </table>
    </td>
    Another table words...
    </tr>
    </table>
    I am sorry but that was too vague for me...

  • #4
    New Coder sdcomputerz's Avatar
    Join Date
    Feb 2007
    Location
    Hawaii
    Posts
    62
    Thanks
    0
    Thanked 0 Times in 0 Posts
    First of all, you have <td> and <tr> mixed up. Second, if you learn by example, read my first post again. Below: the first table is in blue, the second table is in red. The red table is inside the blue table.

    <table>
    <tr>
    <td>

    <table>
    <tr>
    <td>
    <p>Hello World!</p>
    </td>
    </tr>
    </table>

    </td>
    </tr>
    </table>
    You can never have nothing, because nothing is still something.
    SD Computerz
    Free Domain Names
    Gaming Lagoon - Buying your game time!

  • #5
    New Coder
    Join Date
    May 2007
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Man. Sorry about this. but when I first saw your post, this was all that showed up.

    Code:
       </tr>
             </table>
          </td>
       </tr>
    </table>
    I had copied this using the right click too. Maybe the page didn't load right. Anyway, thank you very much.

  • #6
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,623
    Thanks
    6
    Thanked 1,001 Times in 974 Posts
    You know, you would probably be faster learning how to create pages with semantic HTML rather than us explaining you how to “correctly” nest tables…

    Where to nest tables depends on how your layout is supposed to look like. And that’s the complicated thing with tables because it’s nasty to change the layout later on.

    Basically you always put a nested table into a table cell (td), either next to each other or in another row:

    Code:
    <table>
      <tbody>
        <tr>
          <td>
            <table>
              <tbody>
                <tr>
                  <td>text here</td>
                  <td>next column to the right</td>
                </tr>
               </tbody>
             </table>
            </td>
            <td>
             <table>
               <tbody>
                 <tr>
                   <td>this table is next to the other one but in another column of the parent table</td>
                   <td>next column to the right</td>
                 </tr>
                </tbody>
              </table>
             </td>
            </tr>
           </tbody>
          </table>
         </td>
        </tr>
        <tr>
          <td>
            <table>
              <tbody>
                <tr>
                  <td>this table is one row below the others</td>
                </tr>
              </tbody>
             </table>
           </td>
          </tr>
      </tbody>
    </table>
    You see how annoying this can become? With semantic HTML you would have three or four elements and position them wherever you want using floats and/or postioning.
    Last edited by VIPStephan; 05-31-2007 at 03:09 AM.

  • #7
    New Coder
    Join Date
    May 2007
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks. I think your example makes more sense.

  • #8
    New Coder
    Join Date
    May 2007
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry about the double post, but a friend just said this was easier, to do.

    Code:
    <table>
    <td>
    <table>
    <td>
    This is Column 1
    </td>
    <tr>
    <td>
    This is Column 2
    </td>
    </tr>
    </table>
    </td>
    </table>

  • #9
    New Coder sdcomputerz's Avatar
    Join Date
    Feb 2007
    Location
    Hawaii
    Posts
    62
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well that code is not written very well at all. You have the <tr> and <td> tags confused again. You might want to google table tutorials, and try to straighten things up.
    You can never have nothing, because nothing is still something.
    SD Computerz
    Free Domain Names
    Gaming Lagoon - Buying your game time!

  • #10
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,623
    Thanks
    6
    Thanked 1,001 Times in 974 Posts
    Oh my! You know, with 4 divs and a little simple CSS you can achieve the very same thing as with the tables I posted previously. And you are waaaaaaay more flexible:

    HTML
    Code:
    <div id="container">
      <div id="section1">content</div>
      <div id="section2">more content</div>
      <div id="section3">other content</div>
    </div>
    CSS
    Code:
    #container {
      width: 600px;
      margin: auto;
    }
    #section1 {
      float: left;
      width: 50%;
    }
    #section3 {clear: both;}
    Now, this is a very simple and basic example but you might get the idea. This is putting section1 and section2 next to each other, kinda like two columns, and section 3 underneath, like another row if you were thinking in tables.

    If you wanted section 1 on the right next to section 2 instead of on the left you would just change the float: left; to right in the CSS. You could also put section 3 on top of everything in one second. I wanna see you doing that with tables.

    And also your code becomes just so clean you won’t have trouble editing it later on.
    So please do it correctly right away. The time you waste on trying how you can do that with tables (and the time we waste by trying to help you) can easily be invested in learning how to use semantic code and CSS. And you will have a lot of spare time.

  • #11
    New Coder
    Join Date
    May 2007
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This sounds very interesting. I'm not sure what kind of search keywords to use to get a tutorial for div's. Perhaps someone can help?

  • #12
    New Coder sdcomputerz's Avatar
    Join Date
    Feb 2007
    Location
    Hawaii
    Posts
    62
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You can never have nothing, because nothing is still something.
    SD Computerz
    Free Domain Names
    Gaming Lagoon - Buying your game time!

  • #13
    New Coder
    Join Date
    May 2007
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks, I'll check it out. I was using the wrong keywords.

  • #14
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,623
    Thanks
    6
    Thanked 1,001 Times in 974 Posts
    No, no, NO! When I see the first result in that Google search already I’m getting a headache. The keyword is not, I repeat: NOT “div layout” because it's not all about divs, you know? The keyword you wanna look up is “semantic HTML” (and I posted a link already) because that’s the correct approach.

    Drop the table column and row and cell thinking, drop thinking in div boxes or layers, start thinking out of the box. (Hah! That’s matching the subject. ).

    Damn, I really should write a tutorial on how to start right. I’m repeating myself.

    OK, to give you an idea: Structure comes first, then the design/style. Divide your page into sections (not boxes) using the division element. Yes, divs are needed but they aren’t the cure for everything (as isn’t absolute positioning).

    A basic page could look like this:

    Code:
    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>title here</title>
    </head>
    
    <body>
    <div id="container">
    	<div id="header">Content for "header" Goes Here</div>
    	<div id="content">Content for "content" Goes Here</div>
    	<div id="footer">Content for "footer" Goes Here</div>
    </div>
    </body>
    </html>
    Don’t forget the doctype in the very beginning.
    And then you put the respective content in those sections:

    Code:
    <div id="container">
    	<div id="header">
              <h1>page title/company name</h1>
    	  <ul>
                <li><a href="#">Home</a></li>
    	    <li><a href="#">About</a></li>
    	    <li><a href="#">Contact</a></li>
    	  </ul>
            </div>
    	<div id="content">
              <p>text</p>
              <img />
              <div id="special">
                  <h2>special announcement</h2>
                  <p>text</p>
              </div>
            </div>
    	<div id="footer">copyright or whatever</div>
    </div>
    And look how you would assign sub sections and name them after their purpose.

    And after you’ve got that all clearly marked up and sorted out you start styling it with CSS. BonRouge’s website is a good resource (look at the CSS layouts). But for more basic things htmldog.com might be a good start as well.
    Last edited by VIPStephan; 05-31-2007 at 07:08 PM.

  • #15
    New Coder
    Join Date
    May 2007
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok, I'll take a look at all that, and thanks. I did understand the basics of it.


  •  

    Posting Permissions

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