Skip navigation
Currently Being Moderated

table alignment....vertical alignment

Apr 22, 2012 7:50 PM

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>

 
Replies
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Apr 22, 2012 10:55 PM   in reply to Taffypro

    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.

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Apr 22, 2012 10:56 PM   in reply to Taffypro

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 23, 2012 9:27 AM   in reply to Taffypro

    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>

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Apr 28, 2012 10:12 AM   in reply to Taffypro

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 28, 2012 11:09 AM   in reply to Taffypro

    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

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Apr 28, 2012 11:44 AM   in reply to Taffypro

    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.

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Apr 28, 2012 1:25 PM   in reply to Taffypro

    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.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points