Search code examples
htmlhtml-tablealignment

Align inner table in outer table td

I have a text and table within another table td tag. That inner table has to be aligned to the top-right corner of the outer table. But in my case,the inner table is aligned to right but not top. There is an unnecessary space between text and inner table.

Any suggestions please?

Here is my code.... 

<html><head>  
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="content-style-type" content="text/css">                        
<style type="text/css">
body{color:#000000; font-family:Arial,Tahoma,helvetica,sans-serif; font-size:9pt;}
table{ font-family:Arial,Tahoma,helvetica,sans-serif;  font-size:9pt;} 
tr{ font-family:Arila,Tahoma,helvetica,sans-serif; font-size:9pt;} 
.header{background:#D2E5FB; font-family:Arial,Tahoma,helvetica,sans-serif; color:#000000;
   padding: 1 1 1 1; border-bottom:1px solid #AEAEAE; border-right:1px solid #AEAEAE;
}
.tableRow{background:#FFFFFF;border-bottom:1px solid #AEAEAE; border-right:1px solid #AEAEAE;padding:3 5 3 0;}
.matches{font-family:Arila,Tahoma,helvetica,sans-serif; font-size:9pt;padding:8 0 8 2;}.ResultTr{}
</style>
<body>
<table style="border:1px solid red;" width="100%" cellpadding="0" cellspacing="2" >
<tr><td  class = "matches" colspan="  7">
 <nobr>
   <b>Number of Matching Addresses:&nbsp;  165 ,&nbsp;Page Numbers</b>
  <style>
      #Paginator{float:right;margin:0px;}<p>
      #Paginator ul{ margin:0px;padding:0px;}
      #Paginator ul li{ font-family::Arial,Tahoma,helvetica,sans-serif;font-size:9pt;list-style:none;
      float:left;margin:2px;
      padding:4px 8px 2px 8px;border:1px solid black; cursor:pointer; }
      #Paginator ul li,#PrevPage{display:none;}
  </style>

 <script>
     var ga_pageId = new Array();
     function pageNavigate()
     {
         if(document.getElementById("FromPage"))
         {  var fromPage = parseInt( document.getElementById("FromPage").value); } 
         if(document.getElementById("ToPage"))
         { var toPage =  parseInt( document.getElementById("ToPage").value); }
         if(fromPage == 1)
         { document.getElementById("PrevPage").style.display="none";} 
         else
         {  document.getElementById("PrevPage").style.display="inline"; }
         if(toPage == 4 )
          {  document.getElementById("NextPage").style.display="none";  }
         else{ document.getElementById("NextPage").style.display="inline";   }

      for(var j=0;j<ga_pageId.length;j++)
       {
        if(document.getElementById(ga_pageId[j]))
        {document.getElementById(ga_pageId[j]).style.display="none"}
      }

      for(var i=fromPage;i<=toPage; i++)
      {
       var pageId = 'PAGE_'+i;
       if(document.getElementById(pageId))
        document.getElementById(pageId).style.display="inline"; }
     }

      function previousPage(){var fromPageEle = document.getElementById("FromPage");var toPageEle = document.getElementById("ToPage");if(fromPageEle && toPageEle){fromPageEle.value = parseInt(fromPageEle.value) - 1;toPageEle.value =  parseInt(toPageEle.value) - 1;pageNavigate();}}

      function nextPage(){var fromPageEle = document.getElementById("FromPage");
      var toPageEle = document.getElementById("ToPage");
      if(fromPageEle && toPageEle){fromPageEle.value = parseInt(fromPageEle.value) + 1;toPageEle.value =  parseInt(toPageEle.value) + 1; pageNavigate();}}

      function pageOver(lv_this){
        if (lv_this.selected!='X')
        {  lv_this.style.backgroundColor = "#F7F7F7";  }
       }

      function pageOut(lv_this)
      {
       if (lv_this.selected!='X')
       {  lv_this.style.backgroundColor = "#FFF"; }
      }
  </script>

  <table id="Paginator" style="border:1px solid blue;"><tr><td > <input type="hidden" id="FromPage" value="1"/>
  <input type="hidden" id="ToPage" value="4"/> <ul>  
  <li onClick="previousPage()" id="PrevPage">Prev</li><script> ga_pageId.push('PAGE_1');</script>
  <li id="PAGE_1" onMouseOVer="pageOver(this)" onMouseOut="pageOut(this)"> 1 </li>
  <li id="PAGE_2" onMouseOVer="pageOver(this)" onMouseOut="pageOut(this)"> 2 </li>
  <li id="PAGE_3" onMouseOVer="pageOver(this)" onMouseOut="pageOut(this)">3</li>
  <li id="PAGE_4" onMouseOVer="pageOver(this)" onMouseOut="pageOut(this)">4</li>
  <li onClick="nextPage()" id="NextPage" style="display:none">Next</li>
   </ul>
    </td> </tr> 
  </table>
  <script> pageNavigate()</script>
  </nobr>

  </td>
 </tr>
</table>
</body>
</html>
Solution

  • Its better if you use Div tag rather then table. Use like this 

    <Div style="float:left;width:20%"></Div>
<Div style="float:left;width:80%"></Div>

    Write your desire code inside the div and give width according to your requirement. If you are designing a form which contain large amout of content then use table.