How two make two lines of a table lie left and right? - html

Question

Can I make two line of a table not align, one tr is left, another is right, using position:relative or position:absolute and margin? But it also align.
How can I make two tr not align?
I want this:
What I want this is:
I have a html:
<table>
<tr colspan="2"><td>top</td><tr>
<tr><td>left 1 2 3</td><td>right</td></tr>
</table>
I want hide the 'left 1 2 3' slowly as a animate, then the width of 'right' becomes 100%
but the effect I need is when left td hide, the whole td move left, first text 'left' disappear, then 1, then 2,3, then the whole td hide.
I have tried this:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script>
<style>
body{margin:0px}
</style>
<script>
function hid() {
$("#d1").animate({ "margin-left": "-102px" });
}
</script>
<table id="d1" cellpadding="0" cellspacing="0">
<tr >
<td style="position: relative; width: 100px; height:100px;border: 1px solid #0050D0;background: #96E555; cursor: pointer">
123
</td>
<td>
abc
</td>
</tr>
</table>
<input type="button" onClick="hid()">
This looks like what I want, but there is only one tr and it is move the whole table but not the tr.

Answer 1

You mean like this JSFiddle?
<table style='width:100%;'>
<tr>
<td style='text-align:right;'>RIGHT</td>
</tr>
<tr>
<td style='text-align:left;'>LEFT</td>
</tr>
</table>
Alternatively, the best way to do this is with two floated elements, as in this fiddle
<div style='border:1px solid black;width:100%;height:44px;'>
<div style='float:right;width:80px;border:1px solid black;height:20px;'></div>
<div style='clear:both;'></div>
<div style='float:left;width:80px;border:1px solid black;height:20px;'></div>
</div>