Aligning Text On Top Of Input Field

How can I make text which is placed on top of an input field, align with the left edge, while the input field remains centered in the table cell? I have tried many variations, they either don't work or the input field moves with the text too far to the left, leaving no margin. Link to web-page:

http://www.dynamata.com/flam/player.html

Form is below:

<td class="left2" width="30%" align="center" valign="bottom">
<font face="verdana" font-weight="bold" color="#ffffff" size="1">
<form method="post" action="http://www.dynamata.com/cgi-bin/autoresponder/ar.cgi">
Name:<br>
<input type="text" name="name" style="border: 1px solid #cccccc; background-color: #F0F0F0;" size="26"><br><br>
E-mail Address:<br>
<input type="text" name="email" style="border: 1px solid #cccccc; background-color: #F0F0F0;" size="26"><br><br>
Subject:<br>
<input type="text" name="subject" style="border: 1px solid #cccccc; background-color: #F0F0F0;" size="26"><br><br>
Message:<br>
<textarea name="message" cols="20" rows="5" style="border: 1px solid #cccccc; background-color: #F0F0F0;"></textarea>
<br><br>
<input type="submit" value="send" style="border: 1px solid #cccccc; background-color: #F0F0F0;">
</p>
</form>
</font>
</td>

 

If you want it to be like this:

          Name:
          [INPUT BOX]
          Blah:
          [INPUT BOX]

Code (markup):

Put this in your left2 TD:

<form method="post" action="http://www.dynamata.com/cgi-bin/autoresponder/ar.cgi">
<div style="width: 200px; text-align: left;">
Name:<br />
<input type="text" name="name" style="border: 1px solid #cccccc; background-color: #F0F0F0; width: 100%;" size="26"><br /><br />
E-mail Address:<br />
<input type="text" name="email" style="border: 1px solid #cccccc; background-color: #F0F0F0; width: 100%;" size="26"><br /><br />
Subject:<br />
<input type="text" name="subject" style="border: 1px solid #cccccc; background-color: #F0F0F0; width: 100%;" size="26"><br /><br />
Message:<br />
<textarea name="message" cols="20" rows="5" style="border: 1px solid #cccccc; width: 100%; background-color: #F0F0F0;"></textarea>
<br /><br />
<input type="submit" value="send" style="border: 1px solid #cccccc; background-color: #F0F0F0;">
</div>
</form>

Code (markup):

 

The div works but it drags the input field along with it. I want the input field to remain centered & move the text to the left edge. Problem is I already centered everything in the <td>:

<td class="left2" width="30%" align="center" valign="bottom">

I am trying to find a way to position the text independently, maybe I need a different approach.

 

I solved it using cellpadding:

{
border: thin solid Silver;
background-color: #000080;
padding-left: 19px;
padding-bottom: 19px;
font-weight: bold;
}

I find that what happens with the div & CSS layout in general, is that when you minimize the page, form fields & text drifts across borders. The page layout collapses, this doesn't happen with HTML which is why I went back to using tables.

http://www.dynamata.com/flam/player.html (the form is not working yet).