Meisterklasse: HTML-Tabellenkopfzeilen

Einführung

Im HTML wird das <th>-Tag verwendet, um eine Zelle als Kopfzeile einer Gruppe von Zellen zu definieren. Es gibt zwei Arten von HTML-Tabellenzellen: Kopfzeilenzelle und Standardzelle. Die Kopfzeilenzelle wird als Kopfzeile für die Gruppe von Zellen verwendet, und die Standardzellen enthalten Daten für eine Tabelle.

Dieser schrittweise Lab geht Ihnen durch die Erstellung einer Kopfzeilenzelle in einer HTML-Tabelle mit Hilfe des <th>-Tags mit kurzen Erklärungen und Codeausschnitten.

Hinweis: Sie können im index.html programmieren und lernen, wie Sie HTML in Visual Studio Code 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.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/TablesGroup(["Tables"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/TablesGroup -.-> html/tables("Table Structure") html/TablesGroup -.-> html/tbl_access("Table Accessibility") html/AdvancedElementsGroup -.-> html/custom_attr("Custom Data Attributes") subgraph Lab Skills html/basic_elems -.-> lab-70864{{"HTML-Tabellenkopfzeile"}} html/tables -.-> lab-70864{{"HTML-Tabellenkopfzeile"}} html/tbl_access -.-> lab-70864{{"HTML-Tabellenkopfzeile"}} html/custom_attr -.-> lab-70864{{"HTML-Tabellenkopfzeile"}} end

Erstellen einer einfachen HTML-Tabelle

Zunächst müssen wir eine Tabelle mit HTML erstellen.

Um eine Tabelle zu erstellen, sollten Sie das <table>-Tag verwenden, wobei jede Zeile durch das <tr>-Tag dargestellt wird und jede Zelle durch das <td>-Tag.

Beispielsweise erstellt der folgende Code eine einfache HTML-Tabelle mit zwei Zeilen und zwei Spalten:

<table>
  <tr>
    <td>Zeile 1, Spalte 1</td>
    <td>Zeile 1, Spalte 2</td>
  </tr>
  <tr>
    <td>Zeile 2, Spalte 1</td>
    <td>Zeile 2, Spalte 2</td>
  </tr>
</table>

Erstellen einer Kopfzeilenzelle

Um eine Kopfzeilenzelle zu erstellen, müssen wir das <td>-Tag im Tabellenraster durch das <th>-Tag ersetzen, in dem wir eine Kopfzeilenzelle hinzufügen möchten.

<table>
  <tr>
    <th>Kopfzeile 1</th>
    <th>Kopfzeile 2</th>
  </tr>
  <tr>
    <td>Zeile 1, Spalte 1</td>
    <td>Zeile 1, Spalte 2</td>
  </tr>
  <tr>
    <td>Zeile 2, Spalte 1</td>
    <td>Zeile 2, Spalte 2</td>
  </tr>
</table>

Hinzufügen von Attributen zu dem `<th>`-Tag

Das <th>-Tag unterstützt verschiedene Attribute, um die Formatierung und Strukturierung der Kopfzeilenzelle zu erleichtern.

Abbr: Wird verwendet, um die Kurzbezeichnung für den Inhalt der Zelle zu definieren.
Colspan: Gibt die Anzahl der Spalten an, die die Zelle überdauern soll.
Rowspan: Gibt die Anzahl der Zeilen an, die die Zelle überdauern soll.
Scope: Gibt die Zellen an, mit denen das Kopfzeilentag zusammenhängt.
Header: Wird verwendet, um eine oder mehrere Kopfzeilenzellen anzugeben, die mit einer Zelle zusammenhängen.

Beispielsweise erstellt der folgende Code eine Kopfzeilenzelle mit den Attributen "abbr" und "colspan":

<table>
  <tr>
    <th abbr="Kopfzeile 1" colspan="2">Kopfzeile 1 &amp; Kopfzeile 2</th>
  </tr>
  <tr>
    <td>Zeile 1, Spalte 1</td>
    <td>Zeile 1, Spalte 2</td>
  </tr>
  <tr>
    <td>Zeile 2, Spalte 1</td>
    <td>Zeile 2, Spalte 2</td>
  </tr>
</table>

Zusammenfassung

In diesem schrittweisen Lab haben Sie gelernt, wie Sie eine Kopfzeilenzelle in einer HTML-Tabelle mit dem <th>-Tag erstellen. HTML-Tabellenköpfe sind von großer Bedeutung für die strukturierte Organisation von Daten. Mit dem th-Tag können Sie eine Kopfzeilenzelle erstellen und deren Formatierung und Attribute verwalten.

HTML-Tabellenkopfzeile