Como centralizar uma tabela

Aprenda a centralizar uma tabela usando CSS.

Tabela centralizada:

Primeiro Nome Sobrenome Idade
Jill Smith 50
Eve Jackson 94
John Doe 80

Como centralizar uma tabela

Primeiro passo - Adicionar HTML:

<table class="center">
  <tr>
    <th>Primeiro Nome</th>
    <th>Sobrenome</th>
    <th>Idade</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

Segundo passo - Adicionar CSS:

Para centralizar a tabela, configure as margens esquerda e direita para automático:

.center {
  margin-left: auto;
  margin-right: auto;
}

Experimente pessoalmente

Atenção, se a largura for definida como 100% (largura total), a tabela não pode ser centralizada.

Páginas relacionadas

Tutorial:Tabela CSS