tags:

views:

87

answers:

3

There are two tables on my page and they appear side-by-side. I want to align the tops of the two tables. How to do that?

Edited:

<body>
 <table id="main" cols="2">
 <tr> 
 <td>
 <Form id="frmNewEntry" method="post" action="insert_listing.php">
  <table id="tblEntry" cols="3" style="border-color:lightblue; border-style:solid;">
   <tr><td colspan="3" bgcolor="lightblue" align="center"><strong>Real-Time Vacancy Entry</strong></td></tr>
   <tr><td>Date:</td><td><input id="LDate" name="LDate" type="text" size="20" maxlength="11"/>[Select Date from the Calendar Control]
    <script type="text/javascript">
     calendar.set("LDate");
    </script></td>
    <td>
     <table>
      <tr>
       <td rowspan="6">
       <!-- <iframe src="show_db_vacancy_entries.php" height="800px" width="300px" bordercolor="cyan">

        </iframe> -->
       </td>
      </tr>
     </table>
    </td>
   </tr>
   <tr><td>Places:</td><td><input id="Places" name="Places" type="text" size="35" maxlength="30" onblur="this.value=MakeInitialCapital(this.value);"></td></tr>
   <tr><td>Company:</td><td><input id="Company" name="Company" type="text" size="50" onblur="this.value=MakeInitialCapital(this.value);">
   <!-- <input type="button" value="Make Initial Capital" align="left" onclick="this.value=MakeInitialCapital(this.value);"></tr> -->
   <tr><td>Designation:</td><td><input id="Designation" name="Designation" type="text" size="50" onblur="this.value=MakeInitialCapital(this.value);"></td></tr>
   <tr><td>Project Details:</td><td><textarea id="ProjectDetails" name="ProjectDetails" cols="100" rows="10"></textarea></td></tr>
   <tr><td>Desired Candidate:</td><td><textarea id="DesiredCandidate" name="DesiredCandidate" rows="3" cols="100"></textarea> <br></td></tr>
   <tr><td>HR Name:</td><td><input id="HRName" name="HRName" type="text" size="50" onblur="this.value=MakeInitialCapital(this.value);"> <br></td></tr>
   <tr><td>HR Contact:</td><td><input id="HRContact" name="HRContact" type="text" size="50"> <br></td></tr>
   <tr><td>Email:</td><td><input id="Email" name="Email" type="text" size="50"> <br></td></tr>
   <tr></tr>
   <tr>
    <td  bgcolor="lightblue">
     <input id="Submit" name="Submit" value="Clear" type="button">
    </td> 
    <td bgcolor="lightblue">
     <input id="Submit" name="Submit" value="Submit" type="button">
    </td>
   </tr>

  </table>
 </Form>
 </td>
 <td>
  <table id="list" cols="2" style="border:none">
   <tr>
    <td colspan="2" style="border:none">
     <iframe src="show_db_vacancy_entries.php" height="800px" style="border:none;">

     </iframe>
    </td>
   </tr>
   <tr>
    <td align="left">
     <input id="Update" name="Update" value="Update" type="button">
    </td>
    <td align="right">
     <input id="Delete" name="Delete" value="Delete" type="button">
    </td>     
   </tr>
  </table>
 </td>
 </tr>
 </table>
</body>
A: 

Maybe this is helpful for you: Tutorial on positioning elements using CSS

Konamiman
+1  A: 

Try This one

 <div>
    <table id="tbl1" style="float:left"></table>
    <table id="tbl2" style="float:left"></table>
 </div>
Treby
please check my answer if it is correct.. tnx
Treby
+1  A: 

as far as i could understand your question: you should use:

<table id="table 1">
  <tr>
    <td valign="top">....<td>
  </tr>
</table>

<table id="table 2">
  <tr>
    <td valign="top">....<td>
  </tr>
</table>
Sarfraz
But where to use?
RPK
That would work if the two tables are stacked side by side inside a third table. The valign attribute would be added to the cells of the outer table in that case.
Anurag
Add it to the cell <td> that contains the table. And checkout display:table-cell, and float:left for css solutions.
Anurag
you should use it in within main TDs of the two tables eg:<td valign="top"....</td>
Sarfraz
or see my answer again; i have modified it
Sarfraz