LabEx
LoginBeitreten

HTML Tabellenzeile

HTMLBeginner
Jetzt üben

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.html programmieren 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 (

-Elemente hinzufügen. Beispielsweise um einer Tabelle eine weitere Zeile hinzuzufügen, fügen Sie den folgenden Code zwischen den vorhandenen -Elementen hinzu:

<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

-Element durch folgenden Code:

<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 Zeilen

Um 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:

<th scope="row">Datenzelle 1</th>

Das Attribut scope="row" im

-Element gibt an, dass dies eine Überschriftenzelle für die erste Zeile ist.

Zusammenfassung

In 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.

Verwandt HTML Kurse
HTML für Anfänger

HTML für Anfänger

htmlweb-development
Entwickeln Sie eine Tic-Tac-Toe-Webanwendung

Entwickeln Sie eine Tic-Tac-Toe-Webanwendung

javascriptweb-development
Erstellen eines Whack-a-Mole-Webspiels

Erstellen eines Whack-a-Mole-Webspiels

javascriptweb-development