Hur man centrerar en tabell

Lär dig hur du använder CSS för att centrera en tabell.

Centrerad tabell:

Förnamn Efternamn Ålder
Jill Smith 50
Eve Jackson 94
John Doe 80

Hur man centrerar en tabell

Steg 1 - Lägg till HTML:

<table class="center">
  <tr>
    <th>Förnamn</th>
    <th>Efternamn</th>
    <th>Ålder</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>

Steg 2 - Lägg till CSS:

För att centrera tabellen, ställ in vänster och höger marginal som automatisk:

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

Prova det själv

Observera att tabellen inte kan centreras om bredden är satt till 100% (full bredd).

Relaterade sidor

Tutorial:CSS-tabeller