trying to position the border related to height

I am trying to position the border with in height range i mean the border will be positioned in same height where key number reports and instructor reports are started

the diagram is like this

and the code for positioning

                <table>
                    <tr style="padding-top:20px: height:18px">
                    <div style="height:03px;width:400px">
                        <td style="width:50%;position:relative;top:10px;bottom:10px;padding-right:8px; padding-top:20px">
                            <b>Key Numbers Report</b><br />
                         <div style=" padding-top:6px;margin-top:07px;text-align:left">                              
                           Text about the information 
                            displayed in this report and what 
                            they can find out here.
                            Text about the information 
                            displayed in this report and what 
                            they can find out here.
                            Text about the information 
                            displayed in this report and what 
                            they can find out here.
                            </div>
                            <a style="float:left;color:#77F;font-size:18px;margin-top:10px" href="./?s=1">View Report</a>
                        </td>

                        <td style="padding-left:25px;position:relative;top:19px;left:10px;border-left:1px #AAA solid;height:10px; padding-top:18px;padding-right:8px">
                            <b>Instructors Report</b><br />
                            <div style ="padding-top:6px;margin-to开发者_如何学Pythonp:07px;text-align:left">
                            Text about the information 
                            displayed in this report and what 
                            they can find out here.
                            Text about the information 
                            displayed in this report and what 
                            they can find out here.
                            Text about the information 
                            displayed in this report and what 
                            they can find out here
                            </div>
                            <a style="float:left;color:#77F;font-size:18px;margin-top:10px " href="./?s=2">View Report</a>
                        </td>
                        </div>
                    <tr>
                </table>

can any one pls help on this

Something like this?

        <table>
            <tr style="padding-top:20px: height:18px">
            <div style="height:03px;width:400px; margin-top: 20px;">
                <td style="width:50%;position:relative;top:10px;bottom:10px;padding-right:8px; padding-top:0px;">
                    <b>Key Numbers Report</b><br />
                 <div style=" padding-top:6px;margin-top:07px;text-align:left">                              
                   Text about the information 
                    displayed in this report and what 
                    they can find out here.
                    Text about the information 
                    displayed in this report and what 
                    they can find out here.
                    Text about the information 
                    displayed in this report and what 
                    they can find out here.
                    </div>
                    <a style="float:left;color:#77F;font-size:18px;margin-top:10px" href="./?s=1">View Report</a>
                </td>

                <td style="padding-left:25px;position:relative;top:19px;left:10px;border-left:1px #AAA solid;height:10px; padding-top:0px;padding-right:8px">
                    <b>Instructors Report</b><br />
                    <div style ="padding-top:6px;margin-top:07px;text-align:left">
                    Text about the information 
                    displayed in this report and what 
                    they can find out here.
                    Text about the information 
                    displayed in this report and what 
                    they can find out here.
                    Text about the information 
                    displayed in this report and what 
                    they can find out here
                    </div>
                    <a style="float:left;color:#77F;font-size:18px;margin-top:10px " href="./?s=2">View Report</a>
                </td>
                </div>
            <tr>
        </table>

I removed the padding-top from your <td>s and added margin-top on your <div> instead.

I have to tell you though, that your html-code is not valid, you are not allowed to have a <div> in a <tr> before your <td>.

Your question is a little hard to understand, but if the problem is the gap between the top border and the divider, then it's probably because you have a lot of padding and margins in there. Play around with those and see if anything changes.

Also is there a reason you're wrapping the two TDs in a DIV? That just seems like you're adding more trouble for yourself.