centering two nested tables

**goma** · Jun 27, 2002 08:26

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.

**Mark T.** · Jun 27, 2002 08:36

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>

**goma** · Jun 27, 2002 08:46

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>

**trout67** · Jun 27, 2002 14:36

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.

**yuri** · Jun 28, 2002 08:23

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

**Mark T.** · Jun 28, 2002 08:29

The center tag won't validate, it is depreciated. Try to encapsulate the tables in a <div> with a width of 100%.

**yuri** · Jun 28, 2002 08:30

your right. Need to put my head on straight.

chris

**goma** · Jun 29, 2002 03:53

Thanks everyone for the help!

User Tag List

Thread: centering two nested tables

Thread Tools

Display

centering two nested tables

centering tables

Bookmarks

Bookmarks

Posting Permissions