HTML-Tabellen: Daten erstellen und strukturieren

Einführung

HTML-Tabellen werden verwendet, um Daten in einem strukturierten, tabellarischen Format anzuzeigen, das aus Zeilen und Spalten besteht. Dies ist unerlässlich, um Informationen wie Produktvergleiche, Finanzberichte oder Zeitpläne klar und organisiert darzustellen.

In diesem Lab lernen Sie die grundlegenden Bausteine einer HTML-Tabelle kennen. Sie beginnen mit der Erstellung der grundlegenden Tabellenstruktur und fügen schrittweise Zeilen, Kopfzeilen und Datenzellen hinzu, um eine vollständige, funktionale Tabelle zu erstellen.

Erstellen Sie das Tabellen-Tag für die Tabellenstruktur

In diesem Schritt erstellen Sie den Hauptcontainer für Ihre Tabelle. Das <table>-Tag ist das Wurzelelement jeder HTML-Tabelle und umschließt alle anderen tabellenbezogenen Elemente.

Zuerst richten wir die grundlegende HTML-Dokumentstruktur ein. Suchen Sie im Dateiexplorer auf der linken Seite die Datei index.html im Verzeichnis ~/project und öffnen Sie sie.

Fügen Sie den folgenden Boilerplate-Code zu index.html hinzu. Dieser Code definiert ein Standard-HTML5-Dokument und enthält ein leeres <table>-Element innerhalb des <body>.

<!DOCTYPE html>
<html>
  <head>
    <title>My First Table</title>
  </head>
  <body>
    <table></table>
  </body>
</html>

Nachdem Sie den Code hinzugefügt haben, können Sie auf den Tab Web 8080 oben in der Benutzeroberfläche klicken, um eine Vorschau Ihrer Seite anzuzeigen. Sie werden noch nichts sehen, da die Tabelle leer ist, aber dies bestätigt, dass die Datei korrekt bereitgestellt wird.

Fügen Sie tr-Tags für Tabellenzeilen hinzu

In diesem Schritt fügen Sie Ihrer Tabelle Zeilen hinzu. Jede horizontale Zeile in einer Tabelle wird durch das <tr>-Tag definiert, was für "table row" (Tabellenzeile) steht. Alle Inhalte innerhalb einer Zeile, wie z. B. Kopfzeilen oder Datenzellen, müssen innerhalb eines <tr>-Elements platziert werden.

Fügen wir unserer Tabelle zwei Zeilen hinzu. Die erste Zeile wird später die Spaltenüberschriften enthalten, und die zweite die Daten.

Ändern Sie Ihre index.html-Datei so, dass sie zwei <tr>-Elemente innerhalb des <table>-Tags enthält, wie folgt:

<!DOCTYPE html>
<html>
  <head>
    <title>My First Table</title>
  </head>
  <body>
    <table>
      <tr></tr>
      <tr></tr>
    </table>
  </body>
</html>

Speichern Sie die Datei. Wenn Sie den Tab Web 8080 überprüfen, werden Sie immer noch keine sichtbaren Änderungen sehen, da die Zeilen noch keinen Inhalt oder Rahmen enthalten.

Fügen Sie th-Tags für Kopfzellen ein

In diesem Schritt definieren Sie die Kopfzellen für Ihre Tabelle. Kopfzellen werden mit dem <th>-Tag erstellt, was für "table header" (Tabellenkopf) steht. Diese Tags werden innerhalb eines <tr>-Elements platziert und werden typischerweise als fetter, zentrierter Text dargestellt, wodurch sie sich von normalen Datenzellen unterscheiden.

Fügen wir der ersten Zeile unserer Tabelle zwei Kopfzeilen hinzu: "Name" und "Age".

Aktualisieren Sie Ihre index.html-Datei, indem Sie zwei <th>-Elemente innerhalb des ersten <tr>-Tags hinzufügen:

<!DOCTYPE html>
<html>
  <head>
    <title>My First Table</title>
  </head>
  <body>
    <table>
      <tr>
        <th>Name</th>
        <th>Age</th>
      </tr>
      <tr></tr>
    </table>
  </body>
</html>

Wenn Sie nun zum Tab Web 8080 wechseln, sehen Sie die angezeigten Kopfzeilen "Name" und "Age".

Verwenden Sie td-Tags für Datenzellen

In diesem Schritt fügen Sie Ihrer Tabelle die eigentlichen Daten hinzu. Standard-Datenzellen werden mit dem <td>-Tag erstellt, was für "table data" (Tabellendaten) steht. Diese Tags werden innerhalb eines <tr>-Elements platziert und enthalten die Informationen, die den Spaltenüberschriften entsprechen.

Fügen wir eine Datenzeile für eine Person namens "Alice" hinzu, die "30" Jahre alt ist. Diese Daten werden in die zweite Zeile unserer Tabelle eingefügt.

Aktualisieren Sie Ihre index.html-Datei, indem Sie zwei <td>-Elemente innerhalb des zweiten <tr>-Tags hinzufügen:

<!DOCTYPE html>
<html>
  <head>
    <title>My First Table</title>
  </head>
  <body>
    <table>
      <tr>
        <th>Name</th>
        <th>Age</th>
      </tr>
      <tr>
        <td>Alice</td>
        <td>30</td>
      </tr>
    </table>
  </body>
</html>

Speichern Sie die Datei und überprüfen Sie den Tab Web 8080. Sie sehen nun die Daten "Alice" und "30" in der zweiten Zeile, die unter den entsprechenden Kopfzeilen ausgerichtet sind.

Fügen Sie das border-Attribut zur Tabelle für die Sichtbarkeit hinzu

In diesem Schritt machen Sie die Struktur der Tabelle sichtbar. Standardmäßig werden HTML-Tabellen ohne Rahmen (Borders) gerendert. Um schnell einen Rahmen zur Visualisierung hinzuzufügen, können Sie das border-Attribut im <table>-Tag verwenden.

Fügen wir unserer Tabelle einen 1-Pixel-Rahmen hinzu. Ändern Sie den öffnenden <table>-Tag in index.html, um border="1" einzufügen.

<!DOCTYPE html>
<html>
  <head>
    <title>My First Table</title>
  </head>
  <body>
    <table border="1">
      <tr>
        <th>Name</th>
        <th>Age</th>
      </tr>
      <tr>
        <td>Alice</td>
        <td>30</td>
      </tr>
    </table>
  </body>
</html>

Nachdem Sie die Datei gespeichert haben, aktualisieren Sie den Tab Web 8080. Sie sehen nun eine vollständige Tabelle mit sichtbaren Rahmen um die Tabelle und jede Zelle, die klar die Zeilen- und Spaltenstruktur zeigt. Obwohl das border-Attribut einfach ist, verwendet modernes Webdesign CSS für das Styling, was wesentlich mehr Kontrolle und Flexibilität bietet.

Zusammenfassung

Herzlichen Glückwunsch! Sie haben erfolgreich eine grundlegende HTML-Tabelle erstellt.

In diesem Lab haben Sie gelernt, wie Sie:

Das <table>-Tag verwenden, um einen Tabellencontainer zu erstellen.
Das <tr>-Tag verwenden, um Tabellenzeilen zu definieren.
Das <th>-Tag verwenden, um Kopfzellen für Spalten zu erstellen.
Das <td>-Tag verwenden, um Datenzellen hinzuzufügen.
Ein border-Attribut hinzufügen, um die Tabellenstruktur sichtbar zu machen.

Dies sind die wesentlichen Elemente für die Anzeige jeglicher tabellarischer Daten auf einer Webseite. Sie können nun auf dieser Grundlage aufbauen, um komplexere und gestylte Tabellen zu erstellen.