How to remove table and just use css?

I need to remove the table from this because im redoing my site in div tags and css so I just need the form.

        	<FORM name = "form1" method="post" action="login.php">
            <TABLE width="0" border="0" cellspacing="0" cellpadding="0">
            <TBODY><TR>
            <TD style="width:330px;">
            
                <TABLE width="0" border="0" cellspacing="0" cellpadding="0">
                <TBODY><TR>
                <TD align="left" valign="top" style="height:22px; width:110px;">
                <SPAN class="username"><?php echo $usernamelabel; ?></SPAN></TD>
                <TD width="140" align="left" valign="middle">
                  <INPUT type="text" name="myusername" style="width:150px; height:19px; border:1px solid #DDE6CB; 
                  vertical-align:top;"></td
                </TR>
                <TR>
                  <TD align="left" valign="top" style="height:22px; width:110px;">&nbsp;</TD>
                  <TD align="left" valign="middle">&nbsp;
                <TR>
                  <TD align="left" valign="top" style="height:22px; width:110px;">
                  <SPAN class="username"><?php echo $passwordlabel; ?></SPAN> 
                  <TD align="left" valign="middle">
                  <INPUT type="password" name="mypassword" style="width:150px; height:19px; border:1px solid #DDE6CB; 
                  vertical-align:top;">
                  
                  <INPUT type="hidden" name="referer" style="width:150px; height:19px; border:1px solid #DDE6CB; 
                  vertical-align:top;" value = "<?php echo $id; ?>">
                
                <TR>
                <TD colspan="2" align="left" valign="top" style="height:22px; width:110px;">   
                
                     <center><input type="submit" name="Submit" value="<?php echo $loginbutton; ?>"></td></center>
        
                             
                </TD>
                </TR>
                </TBODY> 
                
                
</FORM>

Code (markup):

Help is greatly appreciated!

 

Probably something like this:

<FORM name = "form1" method="post" action="login.php" style="padding:0;margin:0;">
<div style="width:330px;height:100%;float:left;">

  <!-- USERNAME -->
  <div style="height:22px;width:150px;float:left;">
    <SPAN class="username"><?php echo $usernamelabel; ?></SPAN>
  </div>
  <div style="height:22px;width:180px;float:left;">
    <INPUT type="text" name="myusername" style="width:150px; height:19px; border:1px solid #DDE6CB;vertical-align:top;">
  </div>
  
  <!-- SPACING DIV -->
  <div style="width:330px;height:10px;float:left;"></div>

  <!-- PASSWORD -->
  <div style="height:22px;width:150px;float:left;">
    <SPAN class="username"><?php echo $passwordlabel; ?></SPAN> 
  </div>
  <div style="height:22px;width:180px;float:left;">
    <INPUT type="password" name="mypassword" style="width:150px; height:19px; border:1px solid #DDE6CB;vertical-align:top;">
    <INPUT type="hidden" name="referer" style="width:150px; height:19px; border:1px solid #DDE6CB;vertical-align:top;" value = "<?php echo $id; ?>">
  </div>

  <!-- SPACING DIV -->
  <div style="width:330px;height:10px;float:left;"></div>

  <!-- SUBMIT BUTTON -->
  <div style="height:22px; width:150px;float:left;">
    <input type="submit" name="Submit" value="<?php echo $loginbutton; ?>"> 
  </div>

</div>
</form>

Code (markup):

This was whipped up quite quickly but it should be enough for you to work on by adjusting the DIV sizes, etc.

 

It might also be a good idea to use an external CSS file, instead of using CSS inline.

 

Absolutely - it will help your text to code ratio by doing this. I just left it inline to give you an idea and to reduce the size of my posting. But definitely should be in an external file as Firebolt suggested.

 

If you use Dreamweaver look on the Adobe website in the dreamweaver extensions section and you will find an extension that will do it for you. Hope that helped.

 

Google will still regard your site as any other if you use the old table method.

It is a little harder to edit though and you have more flexibility with divs, don't switch it over if it has no benefits tho.

Some are saying Bing/Yahoo are favouring W3C compatible websites so I'd get it W3C friendly if you want to improve the code