So zentrieren Sie die HTML-Tabelle

HTML wird als Auszeichnungssprache häufig zum Erstellen von Webseiten verwendet. Unter ihnen sind Tabellen ein wichtiges Element für die Organisation von Daten und das Layout. Beim Entwerfen von Tabellen ist die Zentrierung ein häufig verwendeter Stil, um die Seite schöner und lesbarer zu machen. In diesem Artikel wird erläutert, wie Sie mithilfe von CSS-Stylesheets den Zentrierungseffekt von HTML-Tabellen erzielen.

1. Kenntnisse über HTML-Tabellen

In HTML wird das Tag „table“ zum Definieren der Tabelle, das Tag „tr“ zum Definieren der Zeilen der Tabelle und das Tag „td“ zum Definieren der Zellen verwendet. Wir können CSS-Stylesheets verwenden, um den Stil von Elementen zu ändern, einschließlich Tabellenlayout, Farbe, Rahmen usw.

2. Horizontale Zentrierung

1. Verwenden Sie das text-align-Attribut

Sie können das text-align-Attribut verwenden, um den Text horizontal zu zentrieren. Zum Beispiel:

table{

text-align:center;

}

Dadurch wird der gesamte Textinhalt innerhalb der Tabellenbeschriftung zentriert, unabhängig davon, in welcher Zelle er sich befindet.

2. Verwenden Sie das Randattribut

Wir können auch das CSS-Randattribut verwenden, um eine horizontale Zentrierung zu erreichen. Sie können dem äußeren Element der Tabelle den folgenden Stil hinzufügen:

table{

margin: 0 auto;

}

Dadurch wird die Tabelle unabhängig von ihrer Größe und Position horizontal innerhalb ihres enthaltenden Elements zentriert. Mit dieser Methode können Sie jeweils nur eine Tabelle zentrieren.

3. Vertikale Zentrierung

1. Verwenden Sie das Vertical-Align-Attribut von CSS, um eine vertikale Zentrierung zu erreichen, die im Stil der Zelle oder Tabelle (Kopfzeile) festgelegt werden kann. zum Beispiel:

td{

vertical-align: middle;

}

Dadurch wird der Inhalt in der Zelle vertikal zentriert. Wenn in der Kopfzeile (th) festgelegt, wird die Kopfzeile vertikal zentriert.

Hinweis: Die Verwendung des Vertical-Align-Attributs kann nur in der Zelle festgelegt werden, nicht in der Tabelle selbst.

Verwenden Sie die Eigenschaft „line-height“

2. Sie können eine vertikale Zentrierung erreichen, indem Sie die Eigenschaft „line-height“ von CSS verwenden. Beispiel:

td{

line-height: 100px;

}

Stellen Sie die Zellenhöhe auf 100 Pixel und dann die Zeilenhöhe auf 100 Pixel ein, wodurch der Inhalt der Zelle vertikal zentriert wird. Beachten Sie, dass diese Methode nur für eine einzelne Datenzeile funktioniert.

Fazit

Durch CSS-Stylesheets können wir problemlos den zentrierenden Effekt von HTML-Tabellen erzielen. Für die meisten Designer und Entwickler ist die horizontale Zentrierungsmethode relativ einfach, während die vertikale Zentrierungsmethode schwieriger sein kann. Es wird empfohlen, verschiedene Methoden auszuprobieren, um diejenige zu finden, die für Ihr spezifisches Szenario am besten geeignet ist.

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