Centering a two column table with CSS

Question

I have the following page on a site:

I have centered those two columns by adding two columns around them with defined widths:

    <table class="form">
    <tbody>
    <tr>
    <td style="width:20%;"></td>
    <th>User ID</th>
    <td><input type="text" name="userid" id="userid" class="medium" value="" /></td>
    <td style="width:20%;"></td>
    </tr>
    <tr>
    <td></td>
    <th>Password</th>
    <td><input type="password" name="password" id="password" class="medium" /></td>
    <td></td>
    </tr>
    <tr>
    <td></td>
    <th><label for="remember">Remember my user ID</label></th>
    <td><input type="checkbox" name="remember" id="remember" value="true" /></td>
    <td></td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
    <td colspan="3"><a href="forgot/">Forgot your user ID or password?</a></td>
    <td><input type="submit" name="submit" id="submit" value="Login" /></td>
    </tr>
    </tfoot>
    </table>

Is there any way to accomplish this without the two empty columns on the side sized with a width of 20%?

Answer 1

<style>
table.form {
    width: 400px; /* or however wide you want it */
    margin: 0 auto;
}
</style>

You can then make the submit button span the entire width by putting it in its own element if you wish, or you can keep it in the table for a consistent width.