Zentrieren Sie eine Tabelle in HTML

1. Setzen Sie die Eigenschaft margin auf auto, um eine Tabelle in HTML zu zentrieren
2. Setzen Sie die Eigenschaft margin auf Prozentwerte, um eine Tabelle in HTML zu zentrieren

In diesem Artikel werden Möglichkeiten zum Zentrieren einer Tabelle in HTML vorgestellt.

Setzen Sie die Eigenschaft margin auf auto, um eine Tabelle in HTML zu zentrieren

Der einfachste Weg, eine HTML-Tabelle zu zentrieren, besteht darin, die Eigenschaft margin zu verwenden und sie auf auto zu setzen. Diese Methode funktioniert zum Zentrieren aller Blockelemente.

Wenn Sie den Wert auto für margin verwenden, wird der verfügbare horizontale Platz gleichmäßig beansprucht. Folglich nimmt die Tabelle eine bestimmte Breite ein, und ihr linker und rechter Rand werden gleichmäßig angepasst.

Wir können die Eigenschaft margin auch auf 0px auto setzen. Dabei steht der Wert 0px für den oberen und unteren Rand und der Wert auto für den linken und rechten Rand.

Die Eigenschaft margin setzt einen Abstand zwischen den benachbarten Elementen. Die Eigenschaft kombiniert die vier Eigenschaften margin-top, margin-right, margin-bottom und margin-left.

Ein einzelner Wert in der Eigenschaft margin ähnelt dem Wert für diese vier Eigenschaften.

Erstellen Sie beispielsweise eine HTML-Tabelle mit einigen Zeilen und Spalten. Setzen Sie das style-Attribut für das Tag table auf margin:auto.

Um das CSS spezifischer zu schreiben, können Sie die Eigenschaften margin-left und margin-right auch auf auto schreiben.

Hier haben wir das Inline-CSS verwendet, um die Zentrierung einer Tabelle in HTML zu erreichen.

Beispielcode:

<table border=1 style="margin:auto">
  <tr>
    <th>Country</th>
    <th>Continent</th>
    <th>Capital</th>
  </tr>
  <tr>
    <td>Nepal</td>
    <td>Asia</td>
    <td>Kathmandu</td>
  </tr>
  <tr>
    <td>Spain</td>
    <td>Europe</td>
    <td>Madrid</td>
  </tr>
</table>

Setzen Sie die Eigenschaft margin auf Prozentwerte, um eine Tabelle in HTML zu zentrieren

Wir können eine Tabelle auch in HTML zentrieren, indem wir den Prozentwert in der Eigenschaft margin verwenden. Das Konzept hinter diesem Ansatz besteht darin, das horizontale Ansichtsfenster des Bildschirms in drei Abschnitte zu unterteilen.

Dies sind der linke Rand, der rechte Rand und die Breite der Tabelle. Wir können eine bestimmte Breite der Tabelle in Prozent festlegen.

Als nächstes können wir die verbleibende Länge des Ansichtsfensters gleichmäßig aufteilen und den linken bzw. rechten Rand festlegen.

Legen Sie beispielsweise die folgenden Eigenschaften im Attribut style im Tag table fest. Setzen Sie die Eigenschaft width auf 50% und die Eigenschaften margin-left und margin-right auf 25%.

Als Ergebnis nimmt die Tabelle die Hälfte der Breite des horizontalen Ansichtsfensters des Bildschirms ein. Der verbleibende Platz wird gleichmäßig an den linken und rechten Rand angepasst.

Somit können wir die Tabelle in HTML zentrieren.

Beispielcode:

<table border=1 style="width:50%;
margin-left: 25%; margin-right: 25 %;">
  <tr>
    <th>Country</th>
    <th>Continent</th>
    <th>Capital</th>
  </tr>
  <tr>
    <td>Nepal</td>
    <td>Asia</td>
    <td>Kathmandu</td>
  </tr>
  <tr>
    <td>Spain</td>
    <td>Europe</td>
    <td>Madrid</td>
  </tr>
</table>