Das Festlegen von Tabellengrenzen ist ein wichtiger Teil der Gestaltung von Webseiten. Grenzen ermöglichen es Ihnen, die Trennung von Daten in einer Tabelle explizit zu visualisieren, wodurch sie für die Benutzer verständlicher und attraktiver wird. In diesem Artikel werden wir uns alle Möglichkeiten ansehen, Tabellengrenzen in HTML festzulegen.
1. Verwenden des Border-Attributs in einem Tag
| Ячейка 1 | Ячейка 2 |
Auf diese Weise erhalten wir eine Tabelle mit Rändern, die um jede Zelle und um die gesamte Tabelle herum angezeigt werden.
2. Verwenden von CSS-Stilen
Eine andere Möglichkeit, Tabellengrenzen festzulegen, besteht darin, CSS–Stile zu verwenden. Mit CSS können Sie die Tabellengestaltung flexibler steuern.
Sie können beispielsweise unterschiedliche Randstärken und -farben festlegen und zusätzliche Stile wie das Abrunden von Ecken oder Schatten hinzufügen.
table th, td
| Заголовок 1 | Заголовок 2 |
|---|---|
| Ячейка 1 | Ячейка 2 |
Auf diese Weise werden wir die Tabellengrenzen mit CSS-Stilen festlegen.
Wie füge ich einer Tabelle Grenzen hinzu
Es gibt mehrere Möglichkeiten, um einer Tabelle in HTML Grenzen hinzuzufügen:
-
Verwenden von CSS-Stilen mithilfe der Border-Eigenschaft. Sie können beispielsweise einen Rahmen für alle Zellen in einer Tabelle wie folgt festlegen:
table, th, td
Ячейка 1 Ячейка 2
.bordered-table Ячейка 1 Ячейка 2
Wählen Sie je nach Ihren Anforderungen und Vorlieben eine geeignete Methode aus.
Methode 1: Verwenden des Border-Attributs
Wenn Sie beispielsweise einen Tabellenrahmen mit einer Dicke von 1 Pixel festlegen möchten, fügen Sie ein Attribut hinzu border="1".
Beispiel für die Verwendung des Border-Attributs:
Ячейка 1 Ячейка 2 Ячейка 3 Ячейка 4
Als Ergebnis dieses Codes wird eine Tabelle mit einer 1 Pixel dicken Grenze angezeigt.
Methode 2: Anwenden von CSS-Stilen
Заголовок 1 Заголовок 2 Заголовок 3 Ячейка 1 Ячейка 2 Ячейка 3
In diesem Beispiel legen wir den Rahmen für die Tabelle mithilfe des CSS-Stils fest. Der Wert "1px solid black" bedeutet, dass der Rahmen eine Dicke von 1 Pixel hat, solide und schwarz ist. Sie können diese Werte ändern, um das gewünschte Ergebnis zu erhalten.
Sie können auch CSS-Stile mithilfe von Klassen oder IDs auf bestimmte Zellen oder Tabellenzeilen anwenden. Dazu müssen Sie die Stile für die entsprechenden Klassen oder Bezeichner innerhalb des Tags definieren
