HTML-Tabelle Überschrift

Einführung

Im HTML wird das <caption>-Tag verwendet, um einer Tabelle eine Überschrift oder einen Titel hinzuzufügen. In diesem schrittweisen Lab werden Sie durch den Prozess geführt, eine Tabelle in HTML zu erstellen und ihr eine Überschrift hinzuzufügen.

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.

Erstelle eine einfache Tabelle

Im ersten Schritt erstellen Sie eine einfache Tabelle mit einigen Daten, indem Sie das table-Tag verwenden. Hier ist ein Beispiel:

<table>
  <tr>
    <th>Name</th>
    <th>Alter</th>
  </tr>
  <tr>
    <td>John</td>
    <td>30</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>25</td>
  </tr>
</table>

Füge der Tabelle eine Überschrift hinzu

Um einer Tabelle eine Überschrift hinzuzufügen, fügen Sie einfach das <caption>-Tag nach dem öffnenden <table>-Tag und vor den Tabellenzeilen ein. Hier ist ein Beispiel:

<table>
  <caption>
    Mitarbeiterinformationen
  </caption>
  <tr>
    <th>Name</th>
    <th>Alter</th>
  </tr>
  <tr>
    <td>John</td>
    <td>30</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>25</td>
  </tr>
</table>

Stile die Überschrift

Um die Überschrift zu stylen, verwenden Sie das style-Attribut innerhalb des <caption>-Tags. Hier ist ein Beispiel:

<table>
  <caption style="color: blue; font-size: 20px;">
    Mitarbeiterinformationen
  </caption>
  <tr>
    <th>Name</th>
    <th>Alter</th>
  </tr>
  <tr>
    <td>John</td>
    <td>30</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>25</td>
  </tr>
</table>

Zusammenfassung

Im HTML wird das <caption>-Tag verwendet, um einer Tabelle eine Überschrift hinzuzufügen. Das <caption>-Tag wird innerhalb des <table>-Tags verwendet, direkt nach dem öffnenden <table>-Tag. Eine Überschrift ist eine kurze Beschreibung, die eine kurze Erklärung zur Tabelle liefert. Sie hilft Ihnen, ihren Zweck zu verstehen. Um einer Tabelle eine Überschrift hinzuzufügen, fügen Sie einfach das <caption>-Tag nach dem öffnenden <table>-Tag und vor den Tabellenzeilen ein. Mit dem style-Attribut innerhalb des <caption>-Tags können wir die Überschrift stylen.