Heim > Artikel > Web-Frontend > Wie zentriere ich eine Tabelle mit CSS?

Wie zentriere ich eine Tabelle mit CSS?

王林nach vorne: 2023-09-13 08:21:022008Durchsuche

Das

如何用 CSS 使表格居中？

f5d188ed2c074f8b944552db028f98a1-Tag wird verwendet, um traditionelle Komponenten in HTML zu erstellen, die als Tabellen bezeichnet werden. Beim Entwerfen von Webseiten ist es wichtig zu wissen, wie Sie die Gesamtvisualisierung Ihres Designs verbessern können. Einer der wichtigen Aspekte ist die mittige Ausrichtung des Tisches. In diesem Tutorial lernen wir, wie man eine Tabelle mit CSS zentriert.

Verwenden Sie die Eigenschaften „Rand links“ und „Rand rechts“

Dies ist eine beliebte Möglichkeit, Tabellenelemente in HTML und CSS zentriert auszurichten. Die CSS-Eigenschaften margin-left und margin-right werden verwendet, um den linken bzw. rechten Rand von Elementen festzulegen. Ränder schaffen Platz außerhalb der Ränder eines Elements und drängen das Element effektiv von anderen Elementen auf der Seite weg.

Der Wert des Attributs kann mithilfe eines Längenwerts (z. B. px, em, cm), eines Prozentsatzes oder der vordefinierten Werte auto, inherit oder initial festgelegt werden.

Die chinesische Übersetzung von

Beispiel

lautet:

Beispiel

<!DOCTYPE html>
<html lang="en">
   <head>
      <style>
         .table-container,
         th,
         td {
            border: 2px solid rgb(96, 100, 218);
         }
         .table-container {
            width: 70vw;
            margin-left: auto;
            margin-right: auto;
         }
      </style>
   </head>
   <body>
      <table class="table-container">
         <th>Name</th>
         <th>id</th>
         <th>Salary</th>
         <tr>
            <td>Suranjan</td>
            <td>12475142</td>
            <td>32000</td>
         </tr>
      </table>
   </body>
</html>

Anleitung

Der Code ist eine HTML-Datei, die eine Tabelle mit drei Spalten erstellt: Name, ID und Gehalt. Die Klassenbreite „Tabellencontainer“ der Tabelle beträgt 70 % der Breite des Ansichtsfensters und wird auf der Seite zentriert. Kopfzellen (Name, ID und Gehalt) und Tabellenzellen haben durchgezogene 2-Pixel-Ränder mit der Farbe RGB (96, 100, 218).
Die Tabelle enthält eine Datenzeile, die den Namen „Suranjan“, die ID 12475142 und das Gehalt 32000 enthält.

Rasterattribut verwenden

Eine weitere gängige Methode besteht darin, das Rasterattribut zu verwenden, um die Tabelle zentriert auszurichten. Raster sind zweidimensionale Elemente von HTML und CSS, die wir zum Erstellen von Zeilen und Spalten verwenden können. Wenn wir die Tabelle zunächst als Rasterelement deklarieren, können wir die Tabelle dann mithilfe der Place-Items-Eigenschaft des Rasters zentriert ausrichten. Die Eigenschaft „place-items“ richtet das Raster tatsächlich horizontal und vertikal zur Mitte aus.

Die chinesische Übersetzung von

Beispiel

lautet:

Beispiel

<!DOCTYPE html>
<html lang="en">
   <head>
      <style>
         .table-container,
         th,
         td {
            border: 2px solid rgb(96, 100, 218);
         }
         .table-container {
            width: 70vw;
         }
         body{
            display: grid;
            place-items: center;
         }
      </style>
   </head>
   <body>
      <table class="table-container">
         <th>Name</th>
         <th>country</th>
         <th>Occupation</th>
         <tr>
            <td>Tom Holland</td>
            <td>USA</td>
            <td>Software Developer</td>
         </tr>
      </table>
   </body>
</html>

Anleitung

Dies ist ein einfacher HTML-Code zum Erstellen einer Tabelle mit drei Spalten – Name, Land und Beruf. Die Tabelle enthält eine Datenzeile, die Werte für Name (Tom Holland), Land (USA) und Beruf (Softwareentwickler) enthält.
Der im Kopfabschnitt von HTML definierte CSS-Stil legt die Ränder der Tabelle, die Tabellenzellen (th, td) und die Tabelle selbst (class="table-container") auf eine 2-Pixel-RGB-Vollfarbe (96, 100, 218) fest. . Die Breite der Tabelle ist auf 70 vw (70 % der Breite des Ansichtsfensters) eingestellt. Der Hauptteil ist so eingestellt, dass er als Raster erscheint und die Elemente auf der Seite zentriert.

Flexbox-Eigenschaften verwenden

Eine weitere sehr beliebte Methode besteht darin, die Flexbox-Eigenschaft von CSS zu verwenden, um die Tabelle zentriert auszurichten. Flexbox ist ein responsives Element für HTML und CSS. Flexbox verfügt über bestimmte Eigenschaften wie Alien-Items, Justify-Content usw., die wir zum Zentrieren der Tabelle verwenden können. Für Programmierer ist diese Methode oft die bequemste Möglichkeit, eine Tabelle zu zentrieren.

Die chinesische Übersetzung von

Beispiel

lautet:

Beispiel

<!DOCTYPE html>
<html lang="en">
   <head>
      <style>
         .table-container,
         th,
         td {
            border: 2px solid rgb(96, 100, 218);
         }
         .table-container {
            width: 70vw;
         }
         body{
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
         }
      </style>
   </head>
   <body>
      <table class="table-container">
         <th>Name</th>
         <th>class</th>
         <th>Subject</th>
         <tr>
            <td>Suranjan</td>
            <td>12</td>
            <td>Mathematics</td>
         </tr>
      </table>
   </body>
</html>

Anleitung

Dieser Code ist eine HTML-Datei, die eine Tabelle mit drei Spalten erstellt: Name, ID und Gehalt. Die Tabelle hat eine Klasse namens „table-container“ mit einer Breite von 70 % der Breite des Ansichtsfensters. Die Kopfzellen (Name, ID und Gehalt) und die Tabellenzellen haben alle durchgezogene 2-Pixel-Ränder mit der Farbe RGB (96, 100, 218). Die Tabelle enthält eine Datenzeile, darunter den Namen „Suranjan“, die Nummer 12475142 und das Gehalt 32.000.
Der Hauptteil des HTML-Dokuments verfügt über den CSS-Stil display:flex, wodurch der Hauptteil zu einem flexiblen Container wird. CSS-Stil „flex-direction: row“ legt die Elementrichtung des Flex-Containers auf „row“ fest. Die CSS-Stile align-items und justify-content center Elemente vertikal bzw. horizontal.

Fazit

In diesem Artikel haben wir gelernt, wie man eine Tabelle mithilfe von CSS zentriert. In diesem Tutorial haben wir die Verwendung von Randeigenschaften, Raster, Flexbox und mehr gesehen. Von allen besprochenen Methoden sollte Flexbox verwendet werden. Dies liegt daran, dass Flexboxen bequemer sind und besser auf UI-Elemente reagieren.

Das obige ist der detaillierte Inhalt vonWie zentriere ich eine Tabelle mit CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css html auto class display margin flex table td th ui

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：So implementieren Sie die adaptive Bildgröße mithilfe der CSS-Viewport-Einheiten vmin und vwNächster Artikel：So implementieren Sie die adaptive Bildgröße mithilfe der CSS-Viewport-Einheiten vmin und vw

In Verbindung stehende Artikel

Mehr sehen