HTML ist eine Auszeichnungssprache, mit der Sie Webseiten erstellen können. Eines der am häufigsten verwendeten HTML-Elemente ist die Tabelle. Es ermöglicht Ihnen, Informationen in Zeilen und Spalten zu organisieren, was es sehr praktisch macht, verschiedene Daten darzustellen.
Es besteht jedoch häufig die Notwendigkeit, die Tabelle auf der Seite zentriert anzuzeigen. Dies kann nützlich sein, wenn Sie ein responsives Design erstellen oder einfach den visuellen Eindruck Ihrer Seite verbessern möchten.
Eine einfache und elegante Möglichkeit, eine Tabelle auf einer Seite in HTML zentriert zu machen, besteht darin, CSS zu verwenden. Dazu können Sie die Eigenschaft verwenden text-align mit Wert center für ein Element table. Zum Beispiel können Sie Ihrer Stylesheet-Datei die folgenden CSS-Regeln hinzufügen:
Was ist eine Tabelle in HTML
In HTML wird eine Tabelle als geordnete Datensammlung bezeichnet, die als Raster aus Zellen dargestellt wird, die in Zeilen und Spalten unterteilt sind.
Tabellen in HTML können für verschiedene Zwecke verwendet werden, einschließlich der Darstellung von Daten, der Erstellung von Layouts und der Formatierung. Sie ermöglichen es Ihnen, Informationen in Form einer Tabelle zu organisieren, wodurch sie leichter zu lesen und zu organisieren sind.
Es wird empfohlen, die entsprechende Struktur und die korrekte Verwendung von Tags zum Erstellen einer Tabelle zu verwenden, um die Verfügbarkeit und semantische Korrektheit zu gewährleisten. Mit CSS können Sie Tabellen auch stilisieren, indem Sie ihr Aussehen und ihre Position auf der Seite ändern.
Tabellen in HTML sind ein wichtiges Werkzeug für die Arbeit mit Daten und die Darstellung von Informationen auf Webseiten. Sie bieten Flexibilität und Benutzerfreundlichkeit bei der Organisation verschiedener Datentypen, wodurch Sie effektive und verständliche Benutzeroberflächen erstellen können.
Zentrieren einer Tabelle
Sie können eine Tabelle in HTML mit CSS zentrieren. Dazu können Sie die folgende Regel in einer CSS-Datei oder innerhalb eines Tags verwenden:
Diese Regel legt die Einrückung links und rechts von der Tabelle fest und gleicht sie mit "auto" aus. Dadurch können Sie die Einrückungswerte automatisch berechnen und auf gleiche Weise festlegen, sodass sich die Tabelle in der Mitte der Seite befindet.
Damit diese Regel funktioniert, müssen Sie auch sicherstellen, dass sich die Tabelle in einem Container mit der angegebenen Breite befindet. Wenn dem Container keine Breite zugewiesen ist, belegt die Tabelle die gesamte verfügbare Breite und die Zentrierung funktioniert möglicherweise nicht.
Um eine Tabelle auf einer Seite zu zentrieren, müssen Sie also einen Container erstellen, der die Tabelle enthält, und die gewünschte Breite festlegen. Legen Sie dann in CSS oder innerhalb des Tags links und rechts Einrückungen für die Tabelle fest.
Methode 1: CSS-Stile
Sie können CSS-Stile verwenden, um eine Tabelle auf einer Seite in HTML zentriert zu machen. Dazu müssen Sie bestimmte Eigenschaften für die Tabelle und den Container festlegen, in dem sie sich befindet.
1. Erstellen Sie einen Container für eine Tabelle, z. B. mit einem Tag :
2. Legen Sie die Stile für den Container fest, damit der Inhalt horizontal zentriert wird:
3. Fügen Sie die Tabelle in den Container ein:
4. Schließen Sie den Behälter:
Die Tabelle wird nun aufgrund der für den Container definierten CSS-Stile in der Mitte der Seite positioniert. Vergessen Sie nicht, CSS-Stile innerhalb eines Tags oder einer externen Stylesheet-Datei hinzuzufügen.
Methode 2: HTML-Attribute
Wenn Sie eine Tabelle mit zentrierter Ausrichtung auf einer Seite erstellen möchten, können Sie HTML-Attribute verwenden. Sie müssen den Tabellenelementen die Attribute align und valign hinzufügen.
Mit dem align-Attribut können Sie die Tabelle in der Mitte der Seite ausrichten. Setzen Sie den Wert auf "center".
Mit dem valign-Attribut können Sie den Inhalt der Tabellenzellen vertikal zentriert ausrichten. Setzen Sie seinen Wert auf "middle".
So wird der Code aussehen:
Ihre Tabelle wird nun zentriert ausgerichtet und der Inhalt der Zellen wird vertikal zentriert ausgerichtet.
Zentrieren des Tabelleninhalts
Wenn Sie eine Tabelle erstellen und sie in der Mitte der Seite platzieren möchten, müssen Sie mehrere CSS-Eigenschaften anwenden.
Hier ist ein Beispielcode:
table
Ihre Tabelle wird nun unabhängig von ihrer Größe in der Mitte der Seite angezeigt.
Methode 1: CSS-Stile
Der erste Schritt besteht darin, der Tabelle Stile hinzuzufügen. Wir können Inline-Stile in einem Element verwenden . Zum Beispiel:
table In diesem Beispiel legen wir die Eigenschaften margin-left und margin-right für die Tabelle auf auto fest. Dadurch wird die Tabelle automatisch horizontal zentriert ausgerichtet.
Заголовок 1 Заголовок 2 Ячейка 1 Ячейка 2
Jetzt, da wir die Stile und die Tabelle haben, können wir sehen, dass die Tabelle auf der Seite zentriert erscheint, ohne dass zusätzliche Elemente oder Stile benötigt werden.
Methode 2: HTML-Attribute
So wird der Code aussehen:
| Заголовок 1 | Заголовок 2 | Заголовок 3 |
|---|---|---|
| Ячейка 1 | Ячейка 2 | Ячейка 3 |
Mit diesem Code wird die Tabelle unabhängig von ihrer Größe in der Mitte der Seite angezeigt. Das Attribut align="center" richtet die Tabelle innerhalb des übergeordneten Elements zentriert aus, und das Attribut style="margin:auto;" legt die automatische Einrückung fest, damit die Tabelle zentriert wird.
Zentrieren von Tabellenkopfzeilen
Sie können Stilattribute oder CSS-Klassen verwenden, um Tabellenköpfe in HTML zu zentrieren. Im Folgenden sind zwei Beispiele für die Lösung dieses Problems aufgeführt:
1. Stile innerhalb von Tags:
| Überschrift 1 | Überschrift 2 | Überschrift 3 |
|---|---|---|
| Zelle 1 | Zelle 2 | Zelle 3 |
2. Verwenden von CSS-Klassen:
.center
| Überschrift 1 | Überschrift 2 | Überschrift 3 |
|---|---|---|
| Zelle 1 | Zelle 2 | Zelle 3 |
In beiden Beispielen werden die Tabellenköpfe zentriert ausgerichtet.
Methode 1: CSS-Stile
Sie können CSS-Stile verwenden, um eine Tabelle in der Mitte einer Seite in HTML zu erstellen. Dazu müssen Sie eine Kombination aus CSS-Eigenschaften verwenden display: flex und justify-content: center für einen Tabellenbehälter.
