Der beste Weg, um Text in einer Tabellenzelle zu zentrieren

Wenn Sie ein unerfahrener Webdesigner sind, haben Sie möglicherweise Fragen zum Zentrieren des Texts in einer Tabellenzelle. Mit dieser Anleitung lernen Sie diese Technik in wenigen Minuten. Es ist ganz einfach – auch wenn Sie es noch nie versucht haben.

Einstieg

Text zentrieren innerhalb einer Zelle erfolgt am besten mit CSS, so wie Sie Text in einem anderen Element auf Ihrer Webseite zentrieren würden. Bevor Sie beginnen, müssen Sie jedoch entscheiden, was genau zentriert werden soll. Bei einer Tabelle haben Sie mehrere Optionen, einschließlich jeder Zelle in der Tabelle; jede Kopfzeile der Tabelle jede Zelle im Tabellenkopf, Tabellenkörper oder Tabellenfuß. Sie können auch eine bestimmte Zelle oder eine Gruppe von Zellen innerhalb der Tabelle zentrieren.

Außerdem sollten Sie eine internes Stylesheet im Kopf Ihres Dokuments oder als Anhang an das Dokument angehängt externes Stylesheet. Sie werden die Stile platzieren, um Ihre Tabellenzellen in diesem Stilblatt zu zentrieren.

So zentrieren Sie jede Zelle in der Tabelle

instagram viewer

Fügen Sie Ihrem Stylesheet die folgenden Zeilen hinzu:

td, d {
Textausrichtung: Mitte;
}

So zentrieren Sie jede Kopfzeilenzelle in der Tabelle

Fügen Sie Ihrem Stylesheet die folgenden Zeilen hinzu:

th {
Textausrichtung: Mitte;
}

Zentrieren jeder Zelle im Tischkopf, -körper oder -fuß

Um diese Zellen zu zentrieren, müssen Sie Tabellen-Tags hinzufügen, die nicht immer verwendet werden, wie z.

thead th, thead td {
Textausrichtung: Mitte;
}
tbody th, tbody td {
Textausrichtung: Mitte;
}
tfoot t, tfoot td {
Textausrichtung: Mitte;
}

Entfernen Sie die Stile für die Bereiche, die nicht zentriert werden sollen.

So zentrieren Sie eine bestimmte Zelle oder Zellen in einer Tabelle

Dazu müssen Sie eine Klasse für die Zellen festlegen, die zentriert werden sollen.

Fügen Sie den Tabellenzellen, die zentriert werden sollen, das folgende Attribut hinzu:

Fügen Sie dann Folgendes zu Ihrem Stylesheet hinzu:

.zentrierte-Zelle {
Textausrichtung: Mitte;
}

Sie können diese Klasse zu jeder Zelle in Ihrer Tabelle hinzufügen.

Einpacken

Zögern Sie nicht, diese Stile für jede Ihrer Tabellenzellen zu verwenden. Sie können sie auf verbundene Zellen oder auf einzelne Zellen verwenden und der Text darin wird zentriert.