HTML Tabellenüberschrift

Einführung

In HTML werden Tabellen verwendet, um Daten in Zeilen und Spalten anzuzeigen. Das <thead>-Tag wird verwendet, um die Kopfzeile einer Tabelle zu definieren. Die Kopfzeile wird normalerweise verwendet, um die Inhalte in den darunterliegenden Spalten zu kennzeichnen und beschreibende Labels zu enthalten.

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

Erstellen einer Tabelle

Erstellen Sie eine Datei index.html und öffnen Sie sie in Ihrem Texteditor. Hier ist, wo Sie Ihren HTML-Code schreiben werden.

Erstellen Sie eine Tabelle mit dem <table>-Tag.

<table>
  <!-- content goes here -->
</table>

Fügen Sie einer Tabellenüberschrift hinzu

Fügen Sie ein <thead>-Tag hinzu, um die Kopfzeile der Tabelle zu definieren. Innerhalb des <thead>-Tags fügen Sie Ihre Tabellenkopfzeilen mit dem <th>-Tag hinzu.

<table>
  <thead>
    <tr>
      <th>Überschrift 1</th>
      <th>Überschrift 2</th>
      <th>Überschrift 3</th>
    </tr>
  </thead>
  <tbody>
    <!-- table content goes here -->
  </tbody>
</table>

Fügen Sie Inhalte in die Tabelle ein

Fügen Sie Inhalte in die Tabelle hinzu, indem Sie das <tbody>-Tag und die geschachtelten <tr>- und <td>-Tags verwenden.

<table>
  <thead>
    <tr>
      <th>Überschrift 1</th>
      <th>Überschrift 2</th>
      <th>Überschrift 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Inhalt 1</td>
      <td>Inhalt 2</td>
      <td>Inhalt 3</td>
    </tr>
    <tr>
      <td>Inhalt 4</td>
      <td>Inhalt 5</td>
      <td>Inhalt 6</td>
    </tr>
  </tbody>
</table>

Gestalten Sie die Tabellenüberschrift

Verwenden Sie CSS, um das <thead>-Tag zu gestalten. Folgender Code ist ein Beispiel dafür, wie man die Hintergrundfarbe der Überschrift in Grau ändert:

<style>
  thead {
    background-color: gray;
  }
</style>

Zusammenfassung

Das <thead>-Tag wird verwendet, um die Kopfzeile einer Tabelle zu definieren. Es ist ein weiteres Kindelement des <table>-Tags und kommt vor den <tbody>- und <tfoot>-Tags. Mit CSS können Sie die Tabellenüberschrift gestalten, um sie visuell ansprechender zu gestalten.