Einführung
Tabellen können verwendet werden, um Daten in einem strukturierten Format darzustellen. Die grundlegende Komponente jeder Tabelle ist ein Tabellenzeilen- () Element, das eine Zeile von Zellen definiert. Tabellenzeilen müssen innerhalb eines Tabellen- () Elements eingeschlossen sein. In diesem Lab werden wir lernen, wie HTML-Tabellenzeilen erstellt werden.
Hinweis: Sie können im
index.htmlprogrammieren und lernen, wie Sie in Visual Studio Code HTML schreiben. Klicken Sie bitte auf 'Go Live' in der unteren rechten Ecke, um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.
Erstellen einer HTML-Tabellenstruktur
Um eine HTML-Tabelle zu erstellen, müssen wir zuerst die Struktur der Tabelle definieren. Beginnen Sie damit, eine HTML-Datei namens index.html zu erstellen. Fügen Sie den folgenden Code in Ihre Datei ein:
<!doctype html>
<html>
<head>
<title>Meine Tabelle</title>
</head>
<body>
<table>
<tr>
<th>Spaltenkopf 1</th>
<th>Spaltenkopf 2</th>
</tr>
<tr>
<td>Datenzelle 1</td>
<td>Datenzelle 2</td>
</tr>
</table>
</body>
</html>
In diesem Code haben wir eine HTML-Tabelle mit zwei Zeilen und zwei Spalten erstellt. Die erste Zeile enthält zwei Spaltenköpfe (
<tr>
<td>Datenzelle 3</td>
<td>Datenzelle 4</td>
</tr>
Jetzt hat die Tabelle drei Zeilen, wobei jede Zeile zwei Zellen enthält.
Gestalten der Tabellenzeilen
Wir können mit CSS Stile auf die Tabellenzeilen anwenden. Fügen Sie den folgenden Stil zum -Element hinzu, um der geraden Zeilen eine Hintergrundfarbe hinzuzufügen:
<style>
tr:nth-child(even) {
background-color: lightgray;
}
</style>
Dieser Code wird der zweiten Zeile in der Tabelle eine Hintergrundfarbe von hellgrau hinzufügen.
Zusammenführen von Tabellenzeilen
Wir können zwei oder mehr benachbarte Zeilen zu einer einzigen Zeile zusammenführen, indem wir das rowspan-Attribut verwenden. Beispielsweise wollen wir die ersten beiden Zeilen zu einer einzigen Zeile zusammenführen. Ersetzen Sie das erste
<tr>
<th rowspan="2">Spaltenkopf 1</th>
<th>Spaltenkopf 2</th>
</tr>
Das Attribut rowspan="2" in der ersten Spaltenkopfzelle wird die ersten beiden Zeilen zu einer einzigen Zeile zusammenführen.
Erstellen von Tabellenzellenüberschriften
Wir können das
| ) und die zweite Zeile enthält zwei Datenzellen ( | ).
Hinzufügen weiterer ZeilenUm der Tabelle mehr Zeilen hinzuzufügen, müssen wir der Tabelle mehr | |
|---|---|---|
| -Element verwenden, um Überschriftenzellen in der Tabelle zu erstellen. Überschriftenzellen werden normalerweise verwendet, um den Inhalt der Spalten zu beschreiben. Um einer ersten Spalte eine Überschriftenzelle hinzuzufügen, ersetzen Sie das erste | -Element in der zweiten Zeile durch folgenden Code:
Das Attribut | -Element gibt an, dass dies eine Überschriftenzelle für die erste Zeile ist.
ZusammenfassungIn diesem Lab haben wir gelernt, wie man HTML-Tabellenzeilen erstellt und die Tabelle mit CSS anpasst. Wir haben auch gelernt, wie man benachbarte Zeilen zusammenführt und Überschriftenzellen in der Tabelle erstellt. Mit diesen Fähigkeiten können Sie jetzt schöne und strukturierte Tabellen für Ihre Webseiten erstellen. |
