Wie man eine Tabelle zentriert

Lernen Sie, wie man eine Tabelle mit CSS zentriert.

Zentrierte Tabelle:

Vorname Nachname Alter
Jill Smith 50
Eve Jackson 94
John Doe 80

Wie man eine Tabelle zentriert

Schritt 1 - Fügen Sie HTML hinzu:

<table class="center">
  <tr>
    <th>Vorname</th>
    <th>Nachname</th>
    <th>Alter</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>

Schritt 2 - Fügen Sie CSS hinzu:

Um die Tabelle zentriert anzuzeigen, stellen Sie die Seitengrößen auf 'auto' ein:

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

Versuchen Sie es selbst

Please note that if the width is set to 100% (full width), the table cannot be centered.

Related pages

Tutorial:CSS table