10 Replies Latest reply: Apr 28, 2012 1:25 PM by sudarshan.t RSS

    table alignment....vertical alignment

    Taffypro Community Member

      Hi,

       

      I have a table and I want to insert a table within one of the cells. I want the new table to align to the top of the cell.  It is a bit shorter than the table I am placing it into and it centers.

       

      Is this possible?

       

      Here is the code....

       

      <!--Image Gallery TABLE/ width = 800/height=522-->

      <table width="800" height="522" border="1" id="imagegallery">

        <tr>

          <td width="170"><table width="170" border="1" valign="top">

        <tr>

          <td> </td>

          <td> </td>

        </tr>

        <tr>

          <td> </td>

          <td> </td>

        </tr>

      </table>

      </td>

          <td width="614"><img src="images/desert_cool.jpg" alt="mainpic" width="618" height="516" align="top" id="Image1" /></td>

        </tr>

      </table>

        • 1. Re: table alignment....vertical alignment
          sudarshan.t MVP

          If you want to insert one full table inside of an existing table, navigate to the <td></td> that you want to place you new table into.

           

          Use your table code as always.

          Your cell for the new table should hold <td valign="top" align="center"> this will align the new cell inside your existing table to vertical top and horizontal center.

          • 2. Re: table alignment....vertical alignment
            sudarshan.t MVP

            You may also consider using CSS to achieve this. Define a CSS rule with your desired style in it and call that style in your <td> tag. For example, if you define a CSS rule saying newtable, your td could be <td class="newtable">

             

            This will call the style you define in your CSS inside the <td> tag.

            • 3. Re: table alignment....vertical alignment
              Nick Entin Community Member

              You can also consider using the rowspan attribute instead of a table inside a table.  Try this:

              <!--Image Gallery TABLE/ width = 800/height=522-->

              <table width="800" height="522" border="1" id="imagegallery">

                   <tr> <td> </td> <td> </td> <td width="614" rowspan="2"> <img src="images/desert_cool.jpg" alt="mainpic" width="618" height="516" align="top" id="Image1" /> </td> </tr>

                   <tr> <td> </td> <td> </td> </tr>

              </table>

              • 4. Re: table alignment....vertical alignment
                Taffypro Community Member

                That didn't help.  I have attached a .jpg of the table.  Basically I have created a table which is 800 pixels wide (1 row/ 2 columns).  In the second column I want to place a new table and have it to align at the top.  It always centers the table vertically.....Here is the code....

                 

                <!--Image Gallery TABLE/ width = 800/height=522-->

                <table width="800" height="522"border="1" id="contact">

                  <tr>

                    <td valign="top" align="center" td width="340"> </td>

                    <td width="444"><table width="444" border="1">

                  <tr>

                    <td> </td>

                    <td> </td>

                  </tr>

                  <tr>

                    <td> </td>

                    <td> </td>

                  </tr>

                </table>

                 

                table.jpg

                • 5. Re: table alignment....vertical alignment
                  sudarshan.t MVP

                  Try this:

                   

                  <head>

                  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

                  <title>Untitled Document</title>

                  </head>

                  <style type="text/css">

                  .tdtop{

                      vertical-align:top;

                  }

                  </style>

                  <body>

                  <table width="800" height="522" border="1">

                    <tr>

                      <td width="400"> </td>

                      <td width="400" class="tdtop"><table width="390" border="1">

                        <tr>

                          <td> </td>

                          <td> </td>

                        </tr>

                        <tr>

                          <td> </td>

                          <td> </td>

                        </tr>

                      </table></td>

                    </tr>

                  </table>

                  </body>

                   

                  Message was edited by: Sudarshan Thiagarajan to quote the script

                  • 6. Re: table alignment....vertical alignment
                    PJ 123

                    Hi,

                    See if anything here might help you.  You have an id "contact" shown, which may override the class I'm using.  I'm showing three instances with the text aligned to the top, middle, and bottom:

                     

                    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

                    <html xmlns="http://www.w3.org/1999/xhtml">

                    <head>

                    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

                    <title>table td align to top</title>

                    <style type="text/css">

                    <!--

                    table.top td {

                    vertical-align: top;

                    }

                    table.middle td {

                    vertical-align: middle;

                    }

                    table.bottom td {

                    vertical-align: bottom;

                    }

                    -->

                    </style>

                    </head>

                    <body>

                    <table id="contact" class="top" width="800" border="1">

                      <tr>

                        <td height="522">Left Column</td>

                        <td height="522">

                            <table width="100%" border="1">

                              <tr>

                                <td>Right Column 1 Row 1</td>

                                <td>Right Column 2 Row 1</td>

                              </tr>

                              <tr>

                                <td>Right Column 1 Row 2</td>

                                <td>Right Column 2 Row 2</td>        

                              </tr>

                            </table>

                      </td>

                        </tr>

                    </table>

                    <br />

                    <br />

                    <br />

                    <table id="contact" class="middle" width="800" border="1">

                      <tr>

                        <td height="522">Left Column</td>

                        <td height="522">

                            <table width="100%" border="1">

                              <tr>

                                <td>Right Column 1 Row 1</td>

                                <td>Right Column 2 Row 1</td>

                              </tr>

                              <tr>

                                <td>Right Column 1 Row 2</td>

                                <td>Right Column 2 Row 2</td>        

                              </tr>

                            </table>

                      </td>

                        </tr>

                    </table>

                    <br />

                    <br />

                    <br />

                    <table id="contact" class="bottom" width="800" border="1">

                      <tr>

                        <td height="522">Left Column</td>

                        <td height="522">

                            <table width="100%" border="1">

                              <tr>

                                <td>Right Column 1 Row 1</td>

                                <td>Right Column 2 Row 1</td>

                              </tr>

                              <tr>

                                <td>Right Column 1 Row 2</td>

                                <td>Right Column 2 Row 2</td>        

                              </tr>

                            </table>

                      </td>

                        </tr>

                    </table>

                    </body>

                    </html>

                     

                    Message was edited by: PJ 123 to post the code

                    • 7. Re: table alignment....vertical alignment
                      Taffypro Community Member

                      Now I am starting to wonder if my code is wonky.  Below is my entire code for that page.  I have a few different tables on each page.  I have written .css for each table so that the appropriate background displays.  Here is a link to the working site.  I am kinda new to DW so any advice is appreciated.

                       

                      http://taffyproductions.com/test/

                       

                       

                      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

                      <html xmlns="http://www.w3.org/1999/xhtml">

                      <head>

                      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

                      <title>NomTom - Paintings by Nonnie Thompson</title>

                      <meta name="Description" content="" />

                      <meta name="keywords" content=""/>

                      <script type="text/javascript">

                      <!--

                      function MM_preloadImages() { //v3.0

                        var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();

                          var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)

                          if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

                      }

                      function MM_swapImgRestore() { //v3.0

                        var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;

                      }

                       

                       

                      function MM_findObj(n, d) { //v4.01

                        var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {

                          d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

                        if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];

                        for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);

                        if(!x && d.getElementById) x=d.getElementById(n); return x;

                      }

                       

                       

                      function MM_swapImage() { //v3.0

                        var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)

                         if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}

                      }

                      //-->

                      </script>

                      <link href="nontom.css" rel="stylesheet" type="text/css" />

                      </head>

                       

                       

                       

                       

                       

                       

                      <body onload="MM_preloadImages('images/desert_cool.jpg','images/a_moment_of_madness.jpg','image s/jesus_was_a_rapper.jpg','images/nocturnal_exposure.jpg','images/chalayans_harem_hitching _to_mecca.jpg','images/mother_daughter_drama.jpg','images/sweet_charity.jpg')">

                       

                       

                       

                       

                       

                       

                      <div id="wrapper">

                       

                       

                      <!--Start of Header table - height = 169 -->

                      <table id="header"table height="169" width="800" border="0" cellspacing="0" cellpadding="0">

                        <tr>

                          <td> </td>

                        </tr>

                      </table>

                      <!--End of Header Table -->

                       

                       

                      <!--Start of Nav table - height = 62 -->

                      <table id="nav" table height="62" width="800" border="0" cellspacing="0" cellpadding="0">

                        <tr>

                          <td width="75" height="15"> </td>

                          <td width="175"> </td>

                          <td width="186"> </td>

                          <td width="175"> </td>

                          <td width="189"> </td>

                        </tr>

                        <tr>

                          <td height="18"> </td>

                          <td><a href="index.html">Dogma Series</a></td>

                          <td><a href="talkingheads.html">Talking Heads</a></td>

                          <td><a href="landscapes.html">Landscapes</a></td>

                          <td><a href="contact.html">Contact/About</a></td>

                        </tr>

                        <tr>

                          <td> </td>

                          <td> </td>

                          <td> </td>

                          <td> </td>

                          <td> </td>

                        </tr>

                      </table>

                       

                       

                       

                       

                      <!--Image Gallery TABLE/ width = 800/height=522-->

                      <table width="800" height="522"border="1" id="contact">

                        <tr>

                          <td width="340"> </td>

                          <td width="444"><table width="444" border="1">

                        <tr>

                          <td> </td>

                          <td> </td>

                        </tr>

                        <tr>

                          <td> </td>

                          <td> </td>

                        </tr>

                      </table>

                      </td>

                        </tr>

                      </table>

                       

                       

                      <!--Footer Table  800 X 48-->

                      <table width="800" height="48" id="footer">

                        <tr>

                          <td width="382" height="48"> </td>

                          <td width="606">Designed by <a href="http://taffyproductions.com/">Gary Goldblum</a></td>

                        </tr>

                        </table>

                       

                       

                       

                       

                      </div>

                      </body>

                      </html>

                      • 8. Re: table alignment....vertical alignment
                        sudarshan.t MVP

                        I don't see any page on your site that you posted where you've used a table within a table and everything looks aligned perfect.

                        • 9. Re: table alignment....vertical alignment
                          Taffypro Community Member

                          All the thumbnail images are within a table.  The main image is within the other column of the "image gallery" table.  If you look at the second page you will see that the thumnails don't appear at the top.  I want to be able to slide my row and column "guides" and have the images move where I want them.  Is there a general css rule I could write so that all tables align to the top automatically?

                           

                          Thanks for your time,

                           

                          Gary

                          • 10. Re: table alignment....vertical alignment
                            sudarshan.t MVP

                            I've already explained this to you in my previous post:

                             

                            Change your HTML files Line 80 as follows:

                             

                            <td width="164" style="vertical-align: top;"><table width="150" border="0">

                            Note that I've removed valign = top from the new table tag within this line

                             

                            Or, you could define this in CSS as

                             

                            .tdtop{

                                vertical-align:top;

                            }

                            and use this in your HTML

                             

                            <td width="164" class="tdtop"><table width="150" border="0">

                            The vertical-align attribute should be applied to the container holding the content, not within the content.