what is alignment css style for table layout?

Question

I have a table in html. I prefer to layout the table centered. What is the css style for this layout? And any online css tools to interactively see the style change?

Answer 1

If I remember correctly, it's the text-align property. Or do you mean center the table in the html page?

Answer 2

To center the table in the page, use auto left and right margins.

table {
    margin: 0 auto;
}

Answer 3

Given this HTML:

<div>
  <table>
    <!-- contents -->
  </table>
</div>

You can use this CSS:

div{
  margin:0 auto;
  text-align:center;
}
div table{
  margin:0 auto;
  text-align:left;
}

Most browsers will already work if you apply margin: 0 auto to the table.

However, the text-align CSS makes it work for pickier browsers. Specifically, text-align: center will center the table, but since it would have a side effect of also centering each cell's contents, you need to apply text-align: left to the table to reset that property.