title: Centering a two column table with CSS
body: <p>I have the following page on a site:</p>
  
  <p><img src="https://i.stack.imgur.com/828c9.png" alt="Screenshot"></p>
  
  <p>I have centered those two columns by adding two columns around them with defined widths:</p>
  
  <pre><code>    &lt;table class="form"&gt;
      &lt;tbody&gt;
      &lt;tr&gt;
      &lt;td style="width:20%;"&gt;&lt;/td&gt;
      &lt;th&gt;User ID&lt;/th&gt;
      &lt;td&gt;&lt;input type="text" name="userid" id="userid" class="medium" value="" /&gt;&lt;/td&gt;
      &lt;td style="width:20%;"&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;th&gt;Password&lt;/th&gt;
      &lt;td&gt;&lt;input type="password" name="password" id="password" class="medium" /&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;th&gt;&lt;label for="remember"&gt;Remember my user ID&lt;/label&gt;&lt;/th&gt;
      &lt;td&gt;&lt;input type="checkbox" name="remember" id="remember" value="true" /&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;/tbody&gt;
      &lt;tfoot&gt;
      &lt;tr&gt;
      &lt;td colspan="3"&gt;&lt;a href="forgot/"&gt;Forgot your user ID or password?&lt;/a&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="submit" name="submit" id="submit" value="Login" /&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;/tfoot&gt;
      &lt;/table&gt;
  </code></pre>
  
  <p>Is there any way to accomplish this without the two empty columns on the side sized with a width of 20%?</p>