Center form in Chrome and Firefox - html

Question

I have a simple login form and it is centered in internet explorer but in Chrome and Firefox it is aligned to the left of the page. What do I need to do to have the form centered in the other 2 browsers.
<form name="form1" method="POST" action="<?php echo $loginFormAction; ?>">
<td>
<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFFF">
<tr>
<td colspan="4"><div align="center"><strong>Client Login</strong></div></td>
</tr>
<tr>
<td></td>
<td></td>
<td><input name="myusername" type="text" id="myusername" placeholder="Company Name" size="24"></td>
<td> </td>
</tr>
<tr>
<td></td>
<td></td>
<td><input name="mypassword" type="password" id="mypassword" placeholder="password" size="25"></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input name="Submit" type="submit" class="submit_button" value="Login"></td>
<td> </td>
</tr>
</table>
</td>
</form>

Answer 1

Try to change the form width to 100%. This the example
<form name="form1" method="POST" action="<?php echo $loginFormAction; ?>" style="width:100%;">

Answer 2

You should avoid using HTML tables to define the layout of your page. Here's a good overview on why tables should not be used for layout.
You should rely on HTML tag for semantic and CSS to tell the browser how he should display the stuff in the page.
Now consider the following:
<style>
form {
width: 200px;
margin: 0 auto;
}
input {
display: block;
margin: 5px 0;
}
</style>
<form name="form1" method="POST" action="/">
<h1>Client Login</h1>
<input name="myusername" type="text" id="myusername" placeholder="Company Name" size="24">
<input name="mypassword" type="password" id="mypassword" placeholder="password" size="25">
<input name="Submit" type="submit" class="submit_button" value="Login">
</form>
The HTML is stripped down to the bare essential: your title then your form elements. The form here is the main container. With CSS we tell the form to have 200px width and we use the margin property to center it.
We also tell the input element to display like a block element to fill it'S container, this way they each occupy 1 line.
Learning CSS is useful to separate appearance from meaning, here's a great demonstration of the relation between content, container and design.

Answer 3

Would you mind to try this maybe :)
<style>
table {
text-align:center;
margin-left:auto;
margin-right:auto;
}
</style>
<form name="form1" method="POST" action="<?php echo $loginFormAction; ?>">
<td>
<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFFF">
<tr>
<td colspan="4"><div align="center"><strong>Client Login</strong></div></td>
</tr>
<tr>
<td></td>
<td></td>
<td><input name="myusername" type="text" id="myusername" placeholder="Company Name" size="24"></td>
<td> </td>
</tr>
<tr>
<td></td>
<td></td>
<td><input name="mypassword" type="password" id="mypassword" placeholder="password" size="25"></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input name="Submit" type="submit" class="submit_button" value="Login"></td>
<td> </td>
</tr>
</table>
</td>
</form>