SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict goma's Avatar
    Join Date
    Jan 2002
    Location
    smelly armpit of Asia
    Posts
    305
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    centering two nested tables

    This is driving me insane..

    I have two tables, one nested into another and the structure of the two are part of the design so I locked with spacers and should not move a pixel.

    I nested both of these in another table and gave this table 100% width so the two nested table will center in the browser at higher resolutions.

    Now for some reason the two tables shift from page to page, a few pixels here and there. I can't seem to keep them in the right place at 800 x 600 and yet have them stretch at hi res.
    http://www.soapbox101.com

  2. #2
    SitePoint Wizard
    Join Date
    Jul 2001
    Location
    The Netherlands
    Posts
    2,617
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Could you post the code for those two tables, maybe some of us can figure something out to help you.
    Just to get the obvious out of the way, did you try:

    Code:
    <table width="100%" cellpadding="0" cellspacing="0" border="0">
    <tr>
    <td align="center">
    
    .. insert nested tables here
    
    </td>
    </tr>
    </table>

  3. #3
    SitePoint Addict goma's Avatar
    Join Date
    Jan 2002
    Location
    smelly armpit of Asia
    Posts
    305
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes, that's what I did..

    here's the code, just the body
    Code:
    <body bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" background="canvas.jpg" onLoad="MM_preloadImages('buttons/faq2.gif','buttons/reviews2.gif','buttons/contact2.gif')">
    <table width="100%" border="0" cellpadding="0" cellspacing="0" >
      <tr> 
        <td height="20" width="42"></td>
        <td width="736"></td>
        <td width="226"></td>
      </tr>
      <tr> 
        <td height="407"></td>
        <td valign="top" align="center"> 
          <table width="735" border="0" cellpadding="0" cellspacing="0" height="200">
            <tr> 
              <td colspan="4" height="5" valign="top" ><img src="transpix.gif" width="735" height="5"></td>
              <td width="1"></td>
            </tr>
            <tr> 
              <td height="10" valign="top" colspan="2"><img src="redgif.gif" width="138" height="10"></td>
              <td width="494"></td>
              <td width="100"></td>
              <td></td>
            </tr>
            <tr> 
              <td valign="top" width="10" rowspan="4"><img src="redgif.gif" width="10" height="128"></td>
              <td valign="top" colspan="2" rowspan="9"> 
                <table width="625" border="0" cellpadding="0" cellspacing="0" class=innertablebg>
                  <tr> 
                    <td valign="top" height="30" colspan="9"><img src="transpix.gif" width="5" height="15"></td>
                  </tr>
                  <tr> 
                    <td width="10" valign="top" rowspan="6"><img src="transpix.gif" width="10" height="5"></td>
                    <td valign="top" width="370" rowspan="5"><img src="1_194.jpg" width="370" height="270" class=imagebox></td>
                    <td width="10" valign="top" rowspan="6"><img src="transpix.gif" width="10" height="5"></td>
                    <td width="1" height="23"></td>
                    <td width="20" valign="top" rowspan="3"><img src="transpix.gif" width="20" height="5"></td>
                    <td valign="top" width="182">&nbsp;</td>
                    <td valign="top" colspan="2" rowspan="3"><img src="transpix.gif" width="20" height="5"></td>
                    <td width="12" rowspan="6" valign="top"><img src="transpix.gif" width="10" height="115"></td>
                  </tr>
                  <tr> 
                    <td height="93"></td>
                    <td valign="top"><img src="logo3.gif" width="178" height="93"></td>
                  </tr>
                  <tr> 
                    <td height="26"></td>
                    <td valign="top">&nbsp;</td>
                  </tr>
                  <tr> 
                    <td height="19"></td>
                    <td valign="top" colspan="3">&nbsp;</td>
                    <td width="1"></td>
                  </tr>
                  <tr> 
                    <td height="109"></td>
                    <td valign="top" rowspan="2" class=textbox colspan="3"> 
                      <p>At Cesca's Goodies, we've created the walnut pie of your 
                        dreams. Luscious filling covered with walnuts over our rich, 
                        flaky crust. Simply delicious.</p>
                      <p>Each 9 inch diameter pie is made from our secret recipe and 
                        baked to perfection. For just Php 350, savor the best walnut 
                        pie you will ever have. </p>
                    </td>
                    <td></td>
                  </tr>
                  <tr> 
                    <td height="60" valign="top">&nbsp;</td>
                    <td></td>
                    <td></td>
                  </tr>
                  <tr> 
                    <td height="30" colspan="9" valign="top"><img src="transpix.gif" width="5" height="10"></td>
                  </tr>
                  <tr> 
                    <td height="1"></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td width="19"></td>
                    <td></td>
                    <td></td>
                  </tr>
                </table>
              </td>
              <td valign="top" height="50"><img src="buttons/wp2.gif" width="100" height="50"></td>
              <td></td>
            </tr>
            <tr> 
              <td height="25" valign="top"><img src="transpix.gif" width="5" height="25"></td>
              <td></td>
            </tr>
            <tr> 
              <td height="50" valign="top"><a href="faq.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('faqbutton','','buttons/faq2.gif',1)"><img name="faqbutton" border="0" src="buttons/faq.gif" width="100" height="50"></a></td>
              <td></td>
            </tr>
            <tr> 
              <td valign="top" rowspan="2"><img src="transpix.gif" width="5" height="25"></td>
              <td height="3"></td>
            </tr>
            <tr> 
              <td height="22"></td>
              <td></td>
            </tr>
            <tr> 
              <td height="50"></td>
              <td valign="top"><a href="reviews.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('reviewbutton','','buttons/reviews2.gif',1)"><img name="reviewbutton" border="0" src="buttons/reviews.gif" width="100" height="50"></a></td>
              <td></td>
            </tr>
            <tr> 
              <td height="25"></td>
              <td colspan="2" valign="top"><img src="transpix.gif" width="5" height="25"></td>
            </tr>
            <tr> 
              <td height="50"></td>
              <td valign="top"><a href="contact.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image13','','buttons/contact2.gif',1)"><img name="Image13" border="0" src="buttons/contact.gif" width="100" height="50"></a></td>
              <td></td>
            </tr>
            <tr> 
              <td height="116"></td>
              <td valign="top"><img src="transpix.gif" width="5" height="115"></td>
              <td></td>
            </tr>
            <tr> 
              <td height="1"></td>
              <td width="131"></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
          </table>
        </td>
        <td></td>
      </tr>
    </table>
    </body>
    </html>
    http://www.soapbox101.com

  4. #4
    SitePoint Enthusiast
    Join Date
    Apr 2002
    Location
    BC, Canada
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    centering tables

    Try adding align="center" to the table element itself, the nested table that you want centered.

    Code:
    <table width="100%" cellpadding="0" cellspacing="0" border="0" align="center">
      <tr>
        <td>
        </td>
      </tr>
    </table>
    This

    However, this would be handled differently using CSS.
    Go Leafs Go!!!!!!!!

  5. #5
    SitePoint Zealot yuri's Avatar
    Join Date
    Oct 2001
    Location
    Just Round The Corner!
    Posts
    166
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the tables misplace sometimes due to the screen resolutions because you specify widths (and heights). they will not be the same across the two resolutions. try using the center tag if that is what you are looking for, or to use complex tables that use percentage widths.

    chris

  6. #6
    SitePoint Wizard
    Join Date
    Jul 2001
    Location
    The Netherlands
    Posts
    2,617
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The center tag won't validate, it is depreciated. Try to encapsulate the tables in a <div> with a width of 100%.

  7. #7
    SitePoint Zealot yuri's Avatar
    Join Date
    Oct 2001
    Location
    Just Round The Corner!
    Posts
    166
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    your right. Need to put my head on straight.

    chris

  8. #8
    SitePoint Addict goma's Avatar
    Join Date
    Jan 2002
    Location
    smelly armpit of Asia
    Posts
    305
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks everyone for the help!
    http://www.soapbox101.com


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
  •