Center Table in HTML

Center-align a HTML table

For your design, it is common practice to use divs rather than a table. This way, your layout will be more maintainable and changeable through proper styling. It does take some getting used to, but it will help you a ton in the long run and you will learn a lot about how styling works. However, I will provide you with a solution to the problem at hand.

In your stylesheets you have margins and padding set to 0 pixels. This overrides your align="center" attribute. I would recommend taking these settings out of your CSS as you don't normally want all of your elements to be affected in this manner. If you already know what's going on in the CSS, and you want to keep it that way, then you have to apply a style to your table to override the previous sets. You could either give the table a class or you can put the style inline with the HTML. Here are the two options:

With a class:
<table class="centerTable"></table>

In your style.css file you would have something like this:

.centerTable { margin: 0px auto; }

Inline with your HTML:
<table style="margin: 0px auto;"></table>

If you decide to wipe out the margins and padding being set to 0px, then you can keep align="center" on your <td> tags for whatever column you wish to align.

Center a table within a div

In your initial try, your table won't be centered since you're trying to center something that is taking 100% of the possible space. Technically, it is centered, you just can't see it's taking the entire space.

So imagine if you have a container of 100px. There's a block inside of this container that you want to center. But you're setting this block to have 100px in width. There's just no gap to see!

So this won't work:

{ 
   width: 100%;
   margin: 0 auto;
}

Instead, you should give the centering element a fixed width:

width: 400px; /* or whatever is needed */
margin: 0 auto;

That way it has some space around it.

Here, check this out:
https://jsfiddle.net/9gwcjvp3/

How to center table?

First of all, there are some other good answers you can read:
CSS tricks, Stackoverflow

Here you can do it by CSS 3:

HTML

 <div id="parent">
      <form method="post" id="child">
        <table align="center" cellpadding="2" cellspacing="2" border="0">
          <tr>
            <td>Username:</td>
            <td>
              <input type="text" name="username">
            </td>
          </tr>
          <tr>
            <td>Password:</td>
            <td>
              <input type="password" name="password">
            </td>
          </tr>
          <tr>
            <td> </td>
            <td>
              <input type="submit" name="btnLogin" style="width:173px; height:40px;" value="Login">
            </td>
          </tr>
        </table>
      </form>
    </div>

and CSS:

#parent {
  width: 500px;
  height: 600px;
  background-color: gold;
  position: absolute;
  /*it can be fixed too*/
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  /*this to solve "the content will not be cut when the window is smaller than the content": */
  max-width: 100%;
  max-height: 100%;
  overflow: auto;
}

#child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

}

Fiddle

Center a Table inside a TD

You had the right idea with margin:auto 0; just take off the 0.

Working example: http://jsfiddle.net/cxnR8/

<table style="border:solid;width: 100%">
    <tr>
        <td>
            <table style="margin:auto;border:solid; width:50%">
                <tr>
                    <td >I must be in the center</td>                    
                </tr>
            </table> 
        </td>                    
    </tr>
</table>

But, more importantly, do you really need to use tables and in-line styling?