So zentrieren Sie die Tabelle in HTML

In HTML sind Tabellen eines der häufigsten Elemente, insbesondere in Datenanzeige- und Layoutszenarien. Wenn kein Stil hinzugefügt wird, wird die Tabelle standardmäßig linksbündig gesetzt. In diesem Fall müssen Sie Stile verwenden, um die Tabelle zu zentrieren.

Die folgenden drei Methoden helfen Ihnen, die Tabelle horizontal und vertikal auf der Seite zu zentrieren:

Methode 1: Verwenden Sie CSS, um die Tabelle zu zentrieren.

Dies ist die gebräuchlichste und empfohlene Methode, bei der das CSS-Textausrichtungsattribut „Center“ verwendet wird den Tabelleninhalt.

Der Code lautet wie folgt:

<style>
  table {
    margin: 0 auto;
    text-align: center;
  }
</style>

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>城市</th>
  </tr>
  <tr>
    <td>小明</td>
    <td>18</td>
    <td>北京</td>
  </tr>
  <tr>
    <td>小红</td>
    <td>17</td>
    <td>上海</td>
  </tr>
</table>

Stellen Sie den Tabellentextinhalt über die text-align-Eigenschaft von CSS so ein, dass er zentriert wird. Unter anderem stellt margin: 0 auto den Tisch horizontal zentriert ein.

Methode 2: HTML-Attribute verwenden

Wenn Sie kein CSS verwenden möchten, können Sie auch Attribute in HTML verwenden, um eine horizontale Zentrierung der Tabelle zu erreichen:

Der Code lautet wie folgt:

<table align="center">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>城市</th>
  </tr>
  <tr>
    <td>小明</td>
    <td>18</td>
    <td>北京</td>
  </tr>
  <tr>
    <td>小红</td>
    <td>17</td>
    <td>上海</td>
  </tr>
</table>

Durch Hinzufügen der Ausrichtung ="center"-Attribut zum Tabellen-Tag Zum Zentrieren der Tabelle.

Methode 3: Flexbox verwenden

Flexbox in CSS ist eine sehr nützliche Layoutmethode, mit der problemlos eine horizontale und vertikale Zentrierung erreicht werden kann.

Der Code lautet wie folgt:

<style>
  .wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }
  .wrapper table{
    width: 200px;
  }
</style>

<div class="wrapper">
  <table>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>城市</th>
    </tr>
    <tr>
      <td>小明</td>
      <td>18</td>
      <td>北京</td>
    </tr>
    <tr>
      <td>小红</td>
      <td>17</td>
      <td>上海</td>
    </tr>
  </table>
</div>

Zentrieren Sie die Tabelle, indem Sie display: flex;, justify-content: center; und align-items: center; im div-Element festlegen, wobei height: 100vh; das gesamte Ansichtsfenster hoch.

Die oben genannten sind drei Methoden, um eine horizontale Zentrierung von Tabellen zu erreichen. Es ist jedoch wichtig zu beachten, dass die Verwendung von Attributen zum Festlegen von Stilen in HTML nicht so einfach zu pflegen und zu verwalten ist wie die Verwendung von CSS. In der tatsächlichen Entwicklung wird empfohlen, wann immer möglich CSS zur Steuerung des Tabellenstils zu verwenden, um eine bessere Lesbarkeit und Wartbarkeit zu erreichen.

Das obige ist der detaillierte Inhalt vonSo zentrieren Sie die Tabelle in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!