-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.
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.
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.
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!
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Wenn Sie kürzlich mit GraphQL gearbeitet oder seine Vor- und Nachteile überprüft haben, haben Sie zweifellos Dinge wie "GraphQL nicht unterstützen Caching" oder gehört
Unabhängig davon, in welcher Phase Sie als Entwickler Sie befinden, haben die Aufgaben, die wir erledigen - ob groß oder klein - einen enormen Einfluss auf unser persönliches und berufliches Wachstum.
Ich ließ jemanden mit dieser sehr legitimen Frage einschreiben. Lea hat gerade darüber gebloggt, wie Sie gültige CSS -Eigenschaften selbst aus dem Browser erhalten können. Das ist so.
Es gibt eine Reihe dieser Desktop -Apps, in denen das Ziel Ihre Website gleichzeitig in verschiedenen Dimensionen angezeigt wird. So können Sie zum Beispiel schreiben
