Come centrare una tabella

Impara come utilizzare CSS per centrare una tabella.

Tabella centrata:

Nome Cognome Età
Jill Smith 50
Eve Jackson 94
John Doe 80

Come centrare una tabella

Primo passo - Aggiungi HTML:

<table class="center">
  <tr>
    <th>Nome</th>
    <th>Cognome</th>
    <th>Età</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>

Secondo passo - Aggiungi CSS:

Per centrare la tabella, impostare i margini laterali su automatico:

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

Prova personalmente

Attenzione, se la larghezza è impostata al 100% (larghezza piena), la tabella non può essere centrata.

Pagine correlate

Tutorial:Tabella CSS