HTML Tabellendatenzelle: Beherrschen des TD-Tags

Einführung

In diesem Lab werden Sie über die HTML <td>-Tag lernen, das verwendet wird, um Tabellendaten in einer HTML-Tabelle zu definieren. Sie werden auch über die verschiedenen Attribute lernen, die mit diesem Tag verwendet werden können.

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/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/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-70856{{"HTML Tabellendatenzelle"}} html/doc_flow -.-> lab-70856{{"HTML Tabellendatenzelle"}} html/tables -.-> lab-70856{{"HTML Tabellendatenzelle"}} html/complex_tbl -.-> lab-70856{{"HTML Tabellendatenzelle"}} html/tbl_access -.-> lab-70856{{"HTML Tabellendatenzelle"}} end

Erstellen einer HTML-Tabelle

Der erste Schritt besteht darin, eine HTML-Tabelle mit einigen Daten zu erstellen. Öffnen Sie die Datei index.html und fügen Sie den folgenden Code hinzu:

<!doctype html>
<html>
  <head>
    <title>HTML TD Tag Lab</title>
  </head>
  <body>
    <table>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>22</td>
      </tr>
      <tr>
        <td>Jane</td>
        <td>Smith</td>
        <td>25</td>
      </tr>
    </table>
  </body>
</html>

Hier haben wir eine HTML-Tabelle mit zwei Zeilen und drei Spalten erstellt. Das <td>-Tag wird verwendet, um den Inhalt jeder Zelle in der Tabelle zu definieren.

Verwendung des `colspan`-Attributs

Das colspan-Attribut wird verwendet, um anzugeben, über wie viele Spalten eine Zelle hinausgehen soll. Um das colspan-Attribut zu verwenden, fügen Sie folgenden Code hinzu:

<!doctype html>
<html>
  <head>
    <title>HTML TD Tag Lab</title>
  </head>
  <body>
    <table>
      <tr>
        <td colspan="2">John Doe</td>
        <td>22</td>
      </tr>
      <tr>
        <td colspan="2">Jane Smith</td>
        <td>25</td>
      </tr>
    </table>
  </body>
</html>

Hier haben wir das colspan-Attribut verwendet, um die ersten beiden Spalten zusammenzufassen, um den Namen der Person in einer einzigen Zelle anzuzeigen.

Verwendung des `rowspan`-Attributs

Das rowspan-Attribut wird verwendet, um anzugeben, über wie viele Zeilen eine Zelle hinausgehen soll. Um das rowspan-Attribut zu verwenden, fügen Sie folgenden Code hinzu:

<!doctype html>
<html>
  <head>
    <title>HTML TD Tag Lab</title>
  </head>
  <body>
    <table>
      <tr>
        <td rowspan="2">John</td>
        <td>Doe</td>
        <td>22</td>
      </tr>
      <tr>
        <td colspan="2">Male</td>
      </tr>
      <tr>
        <td rowspan="2">Jane</td>
        <td>Smith</td>
        <td>25</td>
      </tr>
      <tr>
        <td colspan="2">Female</td>
      </tr>
    </table>
  </body>
</html>

Hier haben wir das rowspan-Attribut verwendet, um die Spalte mit dem Vornamen zusammenzufassen, um den Namen der Person in einer einzigen Zelle für zwei Zeilen anzuzeigen.

Verwendung des `header`-Attributs

Das header-Attribut wird verwendet, um anzugeben, dass eine Zelle mit einer oder mehreren Kopfzeilenzellen zusammenhängt. Um das header-Attribut zu verwenden, fügen Sie folgenden Code hinzu:

<!doctype html>
<html>
  <head>
    <title>HTML TD Tag Lab</title>
  </head>
  <body>
    <table>
      <tr>
        <th id="name-header">Name</th>
        <th>Alter</th>
      </tr>
      <tr>
        <td headers="name-header">John Doe</td>
        <td>22</td>
      </tr>
      <tr>
        <td headers="name-header">Jane Smith</td>
        <td>25</td>
      </tr>
    </table>
  </body>
</html>

Hier haben wir das header-Attribut verwendet, um anzugeben, dass die erste Spalte mit der Kopfzeilenzelle mit der ID name-header zusammenhängt.

Zusammenfassung

Herzlichen Glückwunsch! Sie haben gelernt, wie man das HTML-<td>-Tag verwendet, um Tabellendaten in einer HTML-Tabelle zu definieren. Sie haben auch über die verschiedenen Attribute wie colspan, rowspan und header gelernt, die mit diesem Tag verwendet werden können, um komplexere Tabellen zu erstellen.

HTML Tabellendatenzelle