align = "center" is not working with table

Question

I have this table I want to align in the middle of the webpage. But it is stuck on the left hand side of the page. This is my code:

<table class="tableOne" align="center">
    <tr >
        <img src='Images/Header.png' />
    </tr>
</table>

What is wrong with the code? I just need the table in the middle of the page.

Answer 1

Don't use align="center" it's not a standard property. You could opt use CSS instead.

To center the table within its container using margin:auto.

<style>
  .tableOne {
    margin:auto;
  }
</style>

To center the text within the table cell, use text-align:center.

<style>
  .tableOne td {
    text-align:center;
  }
</style>

Also you didn't add a <td> inside the <tr>. You should always make sure the contents of a table cell is within a <td> so your HTML is valid.

<table class="tableOne">
    <tr>
        <td>
            <img src='Images/Header.png' />
        </td>
    </tr>
</table>

---

As a side note, if you're only using the table to center your image you should get rid of the table. This could be replaced by a simple div.

HTML

<div class="center-me">
    <img src='Images/Header.png' />
</div>

CSS

.center-me {
    text-align:center;
}