How to Put Table in The Center of The Page Using CSS

How to place the table at the middle of the webpage?

The shortest and easiest answer is: you shouldn't vertically center things in webpages. HTML and CSS simply are not created with that in mind. They are text formatting languages, not user interface design languages.

That said, this is the best way I can think of. However, this will NOT WORK in Internet Explorer 7 and below!

<style>
  html, body {
    height: 100%;
  }
  #tableContainer-1 {
    height: 100%;
    width: 100%;
    display: table;
  }
  #tableContainer-2 {
    vertical-align: middle;
    display: table-cell;
    height: 100%;
  }
  #myTable {
    margin: 0 auto;
  }
</style>
<div id="tableContainer-1">
  <div id="tableContainer-2">
    <table id="myTable" border>
      <tr><td>Name</td><td>J W BUSH</td></tr>
      <tr><td>Proficiency</td><td>PHP</td></tr>
      <tr><td>Company</td><td>BLAH BLAH</td></tr>
    </table>
  </div>
</div>

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:

1. With a class:

   <table class="centerTable"></table>

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

.centerTable { margin: 0px auto; }

2. 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.

How to position a table at the center of div horizontally & vertically

Centering is one of the biggest issues in CSS. However, some tricks exist:

To center your table horizontally, you can set left and right margin to auto:

<style>
  #test {
    width:100%;
    height:100%;
  }
  table {
    margin: 0 auto; /* or margin: 0 auto 0 auto */
  }
</style>

To center it vertically, the only way is to use javascript:

var tableMarginTop = Math.round( (testHeight - tableHeight) / 2 );
$('table').css('margin-top', tableMarginTop) # with jQuery
$$('table')[0].setStyle('margin-top', tableMarginTop) # with Mootools

No vertical-align:middle is possible as a table is a block and not an inline element.

Edit

Here is a website that sums up CSS centering solutions: http://howtocenterincss.com/

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/

Align the table on the center of the page

Try:

table {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}

or:

table {
    width: 200px;
    margin-left: auto;
    margin-right: auto;
}

BTW, this sets this for all tables. You might want to have the properties on a more specific selector (like table.someclass).

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

---

Related Topics