Search code examples
htmlcsscentercss-tables

How to center a <table>

I have the following css:

table.toe {
  border: 1px solid black;
  width: 80%;
  margin-left:auto; 
  margin-right:auto;
}
table.toe td {
  border:1px solid black;
  text-align: center;
  font-size: 24px;
}

I know this is hitting my table because the width and td styles are present and modifiable. But the table itself is stuck on the left side of the screen, and I'd like it to be centered.

I am using IE 9

Thanks!

Solution

  • Auto margins will centre a table unless you are using Quirks Mode, which will cause IE 9 to emulate IE 5.

    Make sure you start your HTML document with a Doctype. The HTML 5 one is usually a good choice.

    <!DOCTYPE html>

    It would probably be beneficial to run the code through a validator too.