So zentrieren Sie eine Tabelle in HTML

Eine Tabelle ist eine hervorragende Möglichkeit, viele Informationen organisiert darzustellen. Verkaufsdaten, Webseitenverkehr, Börsentrends und Schülernoten sind Beispiele für Informationen, die häufig in Tabellen dargestellt werden.

Beim Hinzufügen einer Tabelle zu einer Webseite mit HTML kann es optisch ansprechender sein, sie auf der Seite zu zentrieren. Das Zentrieren von Text und Bildern erfolgt normalerweise über die Text-Align-Klasse oder über CSS, aber das Zentrieren einer Tabelle erfordert einen anderen Ansatz. Nachfolgend finden Sie Details zum Zentrieren einer Tabelle auf einer Webseite.

Zentrieren einer Tabelle in HTML

Wenn Sie einer Webseite eine Tabelle hinzufügen, wird sie standardmäßig an der linken Seite der Seite oder des Containers ausgerichtet, wie unten gezeigt.

TREFFER MONAT GESAMTE ERHÖHUNG
324.497 Januar 1998
436.699 Februar 1998 112.172

Der HTML-Quellcode für die obige Tabelle lautet wie folgt.

<table style="border:1px solid black">
  <tr>
    <td><b>HITS</b></td>
    <td><b>MONTH</b></td>
    <td><b>TOTAL INCREASE</b></td>
  </tr>
  <tr>
    <td>324,497</td>
    <td>January 1998 </td>
    <td style="text-align:center">-</td>
  </tr>
    <tr>
    <td>436,699</td>
    <td>February 1998</td>
    <td style="text-align:center">112,172</td>
  </tr>
</table>

Um diese Tabelle zu zentrieren, müssten Sie ;margin-left:auto;margin-right:auto; am Ende des style-Attributs im

-Tag. Das Tabellen-Tag würde wie folgt aussehen.

<table style="border:1px solid black;margin-left:auto;margin-right:auto;">

Das Ändern des style-Attributs im

-Tag, wie oben gezeigt, führt dazu, dass die Tabelle auf der Webseite zentriert wird, wie unten gezeigt.

TREFFER MONAT GESAMTE ERHÖHUNG
324.497 Januar 1998
436.699 Februar 1998 112.172
Tipp

Sie können dem style-Attribut im

-Tag Parameter hinzufügen, um die Tabelle optisch ansprechender zu gestalten. Polsterung hinzufügen: 2px; und Randabstand: 20px; fügt Abstand zwischen den Datenpunkten und dem Rand hinzu, um die Lesbarkeit zu verbessern.

Neueste Artikel
Vielleicht möchten Sie lesen

LEAVE A REPLY

Please enter your comment!
Please enter your name here