Meisterung des HTML-Tabellenkörpers

Einführung

Im HTML wird das <tbody>-Tag verwendet, um den Körper einer HTML-Tabelle anzugeben, die aus einer Reihe von Zeilen innerhalb der Tabelle besteht. In diesem Lab werden Sie durch die Schritte geführt, um eine einfache HTML-Tabelle mit dem <tbody>-Tag zu erstellen.

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.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/TablesGroup(["Tables"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/LayoutandSectioningGroup -.-> html/layout("Layout Elements") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/TablesGroup -.-> html/tables("Table Structure") html/TablesGroup -.-> html/complex_tbl("Complex Tables") html/TablesGroup -.-> html/tbl_access("Table Accessibility") subgraph Lab Skills html/basic_elems -.-> lab-70854{{"HTML Tabellenkörper"}} html/layout -.-> lab-70854{{"HTML Tabellenkörper"}} html/doc_flow -.-> lab-70854{{"HTML Tabellenkörper"}} html/tables -.-> lab-70854{{"HTML Tabellenkörper"}} html/complex_tbl -.-> lab-70854{{"HTML Tabellenkörper"}} html/tbl_access -.-> lab-70854{{"HTML Tabellenkörper"}} end

Erstellen eines Tabellentags

Erstellen Sie in Ihrem bevorzugten Code-Editor eine leere HTML-Datei namens index.html.

Erstellen Sie ein <table>-Tag im <body>-Abschnitt der HTML-Datei.

<body>
  <table></table>
</body>

Fügen Sie das Tabellenkopf `<thead>`-Tag hinzu

Im <table>-Tag erstellen Sie ein <thead>-Tag und fügen Sie eine Überschriftzeile mit <th>-Tags hinzu.

<table>
  <thead>
    <tr>
      <th>Vorname</th>
      <th>Nachname</th>
    </tr>
  </thead>
</table>

Fügen Sie das Tabellenkörper `<tbody>`-Tag hinzu

Im <table>-Tag erstellen Sie ein <tbody>-Tag und fügen Sie Zeilen mit <td>-Tags hinzu.

<table>
  <thead>
    <tr>
      <th>Vorname</th>
      <th>Nachname</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>John</td>
      <td>Doe</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>Smith</td>
    </tr>
  </tbody>
</table>

Fügen Sie das Tabellenfuß `<tfoot>`-Tag hinzu (Optional)

Im <table>-Tag erstellen Sie ein <tfoot>-Tag und fügen Sie eine Fußzeile mit <td>-Tags hinzu.

<table>
  <thead>
    <tr>
      <th>Vorname</th>
      <th>Nachname</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>John</td>
      <td>Doe</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>Smith</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td colspan="2">Gesamt: 2 Personen</td>
    </tr>
  </tfoot>
</table>

Gestalten der Tabelle

Verwenden Sie CSS, um die Tabelle zu gestalten, einschließlich <thead>, <tbody> und <tfoot>, sofern anwendbar.

<style>
  table {
    border-collapse: collapse;
    width: 50%;
  }

  th,
  td {
    text-align: left;
    padding: 8px;
    border-bottom: 1px solid #ddd;
  }

  th {
    background-color: #f2f2f2;
    color: #444;
  }

  tbody tr:nth-child(even) {
    background-color: #f2f2f2;
  }

  tfoot td {
    text-align: right;
    font-weight: bold;
  }
</style>

Zusammenfassung

In diesem Lab haben wir gelernt, wie man das <tbody>-Tag verwendet, um eine HTML-Tabelle mit Zeilen und Spalten zu erstellen. Indem wir den Schritten folgten, haben wir eine einfache Tabelle mit Überschrift, Körper und Fußzeile erstellt und die Tabelle mit CSS gestaltet, um sie professioneller aussehen zu lassen. Das <tbody>-Tag ist ein nützliches Werkzeug für das Erstellen komplexer Tabellen in HTML und wird häufig in Verbindung mit anderen Tabellenelementen verwendet, um dynamische und interaktive Datenvisualisierungen zu erstellen.

HTML Tabellenkörper