Help with alignment of tables

**biomike** · 12-13-2009, 08:40 PM

I am running into a problem with verticle aligment.

Following is the code for what i am trying to achieve. I want to have 3 columns on the page so i have created a table with 3 columns and inside each column i have put a table. The problem arises is that when i had content to any of the 3 columns i loose the 'top' verticle alignmnet in the other columns and they start drifting down the page.

Any suggestions would be appreciated

Code:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>New Page 1</title>
</head>

<body>

        <table border="0" width="100%" height="619">
          <tr>
            <td width="20%" height="588">
              <div align="center">
                <table border="0" width="103%" height="1">
                  <tr>
                    <td width="100%" height="1"><font face="Arial">video</font>
                      <p>&nbsp;</p>
                      <p>&nbsp;</p>
                    </td>
                  </tr>
                  <tr>
                    <td width="100%" height="171">&nbsp;
                      <p><font face="Arial">quick links</font></p>
                    </td>
                  </tr>
                  <tr>
                    <td width="100%" height="57"><font face="Arial">what the clients have to say</font>
                      <p>&nbsp;
                      <p>&nbsp;</td>
                  </tr>
                  <tr>
                    <td width="100%" height="1"></td>
                  </tr>
                </table>
              </div>
            </td>
            <td width="61%" height="588">
              <table border="2" width="100%" bordercolor="#000000" bordercolorlight="#000000" bordercolordark="#000000" bgcolor="#FFFFFF" valign="top" height="290">
                <tr>
                  <td width="100%" bgcolor="#FFFFFF" bordercolor="#FFFFFF" bordercolorlight="#FFFFFF" bordercolordark="#FFFFFF" height="284">
                    <p class="MsoNormal" style="margin-left: 0pt; margin-top: 0pt; margin-bottom: 0pt">&nbsp;</p>
                    <p class="MsoNormal" style="margin-left: 0pt; margin-top: 0pt; margin-bottom: 0pt"><span lang="EN-US"><font size="2" face="Arial">df</font></span></p>
                    <p class="MsoNormal" style="margin-left: 0pt; margin-top: 0pt; margin-bottom: 0pt">&nbsp;
                    <p class="MsoNormal" style="margin-left: 0pt; margin-top: 0pt; margin-bottom: 0pt">&nbsp;
                    <p>&nbsp;</td>
                </tr>
              </table>
              <table border="1" width="100%" height="49">
                <tr>
                  <td width="100%" height="43">
                    <p align="center"><font face="Arial">what we can do for you</font></p>
                    <p align="center">&nbsp;</p>
                    <p align="center">&nbsp;</p>
                  </td>
                </tr>
              </table>
              <div align="center">
                <table border="1" width="100%" height="241">
                  <tr>
                    <td width="50%" valign="top" align="center" height="235"><font face="Arial">&nbsp;news</font>
                    </td>
                    <td width="50%" valign="top" align="center" height="235"><font face="Arial">Case
                      histories</font></td>
                  </tr>
                </table>
              </div>
            </td>
            <td width="19%" height="588">
              <div align="center">
                <table border="0" width="97%" height="116" valign="top" style="position: relative; top: 0">
                  <tr>
                    <td width="100%" valign="top" align="center" height="1">
                      <p style="margin-top: 0; margin-bottom: 6">
            <b>
            <font size="1" face="Arial">Page updated&nbsp;10 Dec '09</font></b></td>
                  </tr>
                  <tr>
                    <td width="100%" valign="top" align="center" height="133">
                    </td>
                  </tr>
                  <tr>
                    <td width="100%" valign="top" align="center" height="286">
                      <p></p>
                    </td>
                  </tr>
                  <tr>
                    <td width="100%" valign="top" align="center" height="171">&nbsp;<p><font face="Arial">Training</font></p>
                      <p>&nbsp;</p>
                      <p>&nbsp;</p>
                      <p>&nbsp;</td>
                  </tr>
                  <tr>
                    <td width="100%" valign="top" align="center" height="1"><font face="Arial">Research</font>
                      <p>&nbsp;</p>

                      <p>&nbsp;</td>
                  </tr>
                </table>
              </div>
            </td>
          </tr>
        </table>

</body>

</html>

**jscheuer1** · 12-13-2009, 08:48 PM

Add this (highlighted) as shown:

Code:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>New Page 1</title>
<style type="text/css">
td {
	vertical-align: top;
}
</style>
</head>

**biomike** · 12-13-2009, 09:45 PM

thanks for that

**aqeel** · 12-26-2009, 09:47 AM

You should set the alignment of the outer table
1. in case of CSS define
vertical-align:top;

2.Otherwise in in table tag
<table .... valign="top">

Thread: Help with alignment of tables

Thread Tools

Search Thread

Help with alignment of tables

Bookmarks

Bookmarks

Posting Permissions