Erstellen von HTML-Tabellen mit grundlegenden Attributen

Einführung

In diesem Lab werden die Schüler lernen, wie man HTML-Tabellen erstellt und manipuliert, indem man grundlegende HTML-Tabellen-Tags und -Attribute verwendet. Das Lab konzentriert sich auf das Verständnis der Kernstruktur von HTML-Tabellen, einschließlich essentieller Tags wie <table>, <tr>, <td> und <th>, die für die Organisation und Präsentation von Daten in einem strukturierten, gitterartigen Format auf Webseiten von entscheidender Bedeutung sind.

Die Teilnehmer werden sich durch eine umfassende Lernreise bewegen, die das Erstellen einfacher Tabellen, das Hinzufügen von Kopfzeilen und Körperabschnitten, das Zusammenführen von Zellen mit colspan und rowspan sowie das Anwenden grundlegender Styling-Attribute umfasst. Am Ende des Labs werden die Schüler praktische Fähigkeiten in der Erstellung gut strukturierter HTML-Tabellen haben und verstehen, wie man Daten effektiv mit HTML-Tabellenelementen und ihren zugehörigen Attributen darstellt.

Grundlegendes Verständnis der HTML-Tabellenstruktur und der grundlegenden Tags

In diesem Schritt lernen Sie die grundlegende Struktur und die grundlegenden Tags kennen, die zum Erstellen von HTML-Tabellen verwendet werden. HTML-Tabellen sind unerlässlich für die Organisation und Darstellung von Daten in einem strukturierten, gitterartigen Format auf Webseiten.

HTML-Tabellen werden mit mehreren wichtigen Tags erstellt:

<table>: Der Hauptcontainer für die gesamte Tabelle
<tr>: Definiert eine Tabellenzeile
<td>: Definiert eine Standard-Tabellenzelle (Datenzelle)
<th>: Definiert eine Tabellenkopfzeilenzelle

Lassen Sie uns ein einfaches Beispiel erstellen, um diese grundlegenden Tabellentags zu demonstrieren. Öffnen Sie die WebIDE und erstellen Sie eine neue Datei namens basic_table.html im Verzeichnis ~/project.

touch ~/project/basic_table.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Basic HTML Table</title>
  </head>
  <body>
    <table border="1">
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>City</th>
      </tr>
      <tr>
        <td>John Doe</td>
        <td>25</td>
        <td>New York</td>
      </tr>
      <tr>
        <td>Jane Smith</td>
        <td>30</td>
        <td>San Francisco</td>
      </tr>
    </table>
  </body>
</html>

Lassen Sie uns die Tabellenstruktur analysieren:

<table border="1"> erstellt den Tabellencontainer mit einer sichtbaren Umrandung. Das border-Attribut ist optional.
Die erste <tr> enthält <th>-Kopfzeilenzellen für die Spaltentitel.
Die folgenden <tr>-Elemente enthalten <td>-Datenzellen mit dem eigentlichen Inhalt.

Anmerkung: Erfahren Sie mehr über Wie man HTML-Dateien in der WebIDE vorschaut.

Wichtige Punkte, die Sie sich merken sollten:

Jedes <tr> repräsentiert eine Zeile in der Tabelle.
<th> wird für Kopfzeilenzellen verwendet (typischerweise fett und zentriert).
<td> wird für Standard-Datenzellen verwendet.
Das border-Attribut hilft, die Tabellenstruktur zu visualisieren (obwohl in der Praxis für das Styling lieber CSS verwendet wird).

Erstellen einer einfachen Tabelle mit Zeilen und Spalten

In diesem Schritt lernen Sie, wie Sie eine komplexere Tabelle mit mehreren Zeilen und Spalten erstellen. Basierend auf dem vorherigen Schritt werden wir untersuchen, wie man Tabellen mit unterschiedlicher Anzahl von Zeilen und Spalten strukturiert, um Informationen effektiv darzustellen.

Öffnen Sie die WebIDE und erstellen Sie eine neue Datei namens product_table.html im Verzeichnis ~/project. Wir werden eine Produktbestandstabelle erstellen, um die Erstellung einer Tabelle mit mehreren Zeilen und Spalten zu demonstrieren.

touch ~/project/product_table.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Product Inventory Table</title>
  </head>
  <body>
    <table border="1">
      <tr>
        <td>Product ID</td>
        <td>Product Name</td>
        <td>Price</td>
        <td>Quantity</td>
      </tr>
      <tr>
        <td>001</td>
        <td>Laptop</td>
        <td>$999.99</td>
        <td>50</td>
      </tr>
      <tr>
        <td>002</td>
        <td>Smartphone</td>
        <td>$599.99</td>
        <td>75</td>
      </tr>
      <tr>
        <td>003</td>
        <td>Tablet</td>
        <td>$299.99</td>
        <td>100</td>
      </tr>
    </table>
  </body>
</html>

Wichtige Punkte bei der Erstellung von Tabellen mit mehreren Zeilen und Spalten:

Jedes <tr> (Tabellenzeile) repräsentiert eine horizontale Zeile in der Tabelle.
Innerhalb jeder <tr> erzeugen mehrere <td> (Tabellendaten)-Elemente Spalten.
Die Anzahl der <td>-Elemente in jeder <tr> bestimmt die Anzahl der Spalten.
Alle Zeilen sollten die gleiche Anzahl von Spalten haben, um ein konsistentes Layout zu erzielen.
Das border-Attribut hilft, die Tabellenstruktur zu visualisieren.

Beachten Sie, wie wir eine 4-Spalten-Tabelle erstellt haben:

Die erste Zeile als Spaltenüberschriften
Drei zusätzliche Zeilen mit Produktinformationen
Jede Zeile enthält vier Zellen, die den Spalten entsprechen.

Die Beispielausgabe in einem Webbrowser würde ein 4x4-Raster anzeigen, das die Produktbestandsdetails darstellt.

Beispiel für eine Produktbestandstabelle

Hinzufügen von Tabellenköpfen und -körperabschnitten

In diesem Schritt lernen Sie, wie Sie die Tabellenstruktur verbessern können, indem Sie die semantischen HTML-Tags <thead>, <tbody> und <tfoot> verwenden, um den Tabelleninhalt effektiver zu organisieren. Diese Tags helfen, die Lesbarkeit und Barrierefreiheit Ihrer HTML-Tabellen zu verbessern.

Öffnen Sie die WebIDE und erstellen Sie eine neue Datei namens student_grades.html im Verzeichnis ~/project. Wir werden eine Schülerleistungsübersicht erstellen, die die Verwendung von Tabellenabschnittstags zeigt.

touch ~/project/student_grades.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Student Grades Table</title>
  </head>
  <body>
    <table border="1">
      <thead>
        <tr>
          <th>Student ID</th>
          <th>Name</th>
          <th>Math</th>
          <th>Science</th>
          <th>Total</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>001</td>
          <td>Alice Johnson</td>
          <td>85</td>
          <td>90</td>
          <td>175</td>
        </tr>
        <tr>
          <td>002</td>
          <td>Bob Smith</td>
          <td>78</td>
          <td>82</td>
          <td>160</td>
        </tr>
        <tr>
          <td>003</td>
          <td>Charlie Brown</td>
          <td>92</td>
          <td>88</td>
          <td>180</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="2">Class Average</td>
          <td>85</td>
          <td>86.67</td>
          <td>171.67</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

Wichtige Punkte zu Tabellenabschnitten:

<thead>: Enthält die Kopfzeilen mit den Spaltentiteln.
<tbody>: Enthält die Hauptdatenzeilen.
<tfoot>: Enthält die Zusammenfassungs- oder Fußzeilen.
Verwenden Sie <th> für Kopfzeilenzellen anstelle von <td>.
Diese semantischen Tags helfen, die Tabellenstruktur und Barrierefreiheit zu verbessern.

Das Beispiel zeigt:

Eine Kopfzeile mit Spaltentiteln unter Verwendung von <th>
Mehrere Datenzeilen im <tbody>
Eine Fußzeile mit Klassenmittelwerten im <tfoot>

Die Beispielausgabe in einem Webbrowser würde eine strukturierte Tabelle mit klaren Abschnitten für Kopf, Körper und Fuß anzeigen.

Beispiel für eine Schülerleistungsübersicht

Zusammenführen von Tabellenzellen mit colspan und rowspan

In diesem Schritt lernen Sie, wie Sie Tabellenzellen horizontal und vertikal mithilfe der Attribute colspan und rowspan zusammenführen können. Diese Attribute ermöglichen es Ihnen, komplexere und flexiblere Tabellenlayouts zu erstellen, indem Sie mehrere Zellen kombinieren.

Öffnen Sie die WebIDE und erstellen Sie eine neue Datei namens event_schedule.html im Verzeichnis ~/project. Wir werden eine Veranstaltungstabelle erstellen, die das Zusammenführen von Zellen zeigt.

touch ~/project/event_schedule.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Conference Event Schedule</title>
  </head>
  <body>
    <table border="1">
      <thead>
        <tr>
          <th>Time</th>
          <th>Room A</th>
          <th>Room B</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>9:00 AM</td>
          <td rowspan="2">Keynote Speech</td>
          <td>Workshop 1</td>
        </tr>
        <tr>
          <td>10:00 AM</td>
          <td>Workshop 2</td>
        </tr>
        <tr>
          <td>11:00 AM</td>
          <td colspan="2">Lunch Break</td>
        </tr>
        <tr>
          <td>12:00 PM</td>
          <td>Panel Discussion</td>
          <td>Networking Session</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Wichtige Punkte zu colspan und rowspan:

colspan: Führt Zellen horizontal über Spalten zusammen.
- Beispiel: <td colspan="2"> erstreckt die Zelle über 2 Spalten.
rowspan: Führt Zellen vertikal über Zeilen zusammen.
- Beispiel: <td rowspan="2"> erstreckt die Zelle über 2 Zeilen.
Wenn Sie diese Attribute verwenden, entfernen Sie die entsprechenden Zellen in anderen Zeilen.

In diesem Beispiel:

Die "Keynote Speech" erstreckt sich über 2 Zeilen in Raum A.
Die "Lunch Break" erstreckt sich über 2 Spalten in beiden Räumen.
Alle anderen Zellen behalten ihr Standard-Layout mit einer einzigen Zelle bei.

Die Beispielausgabe in einem Webbrowser würde eine Tabelle mit zusammengeführten Zellen anzeigen, die einen kompakteren und besser organisierten Zeitplan ergibt.

Beispiel für eine HTML-Tabelle mit zusammengeführten Zellen

Gestaltung und Anpassung von Tabellenattributen

In diesem Schritt lernen Sie, wie Sie HTML-Tabellen mithilfe von inline CSS und HTML-Attributen gestalten und anpassen können. Eine angemessene Gestaltung kann die Lesbarkeit und das visuelle Erscheinungsbild Ihrer Tabellen verbessern.

Öffnen Sie die WebIDE und erstellen Sie eine neue Datei namens styled_table.html im Verzeichnis ~/project. Wir werden eine Tabelle mit verschiedenen Gestaltungstechniken erstellen.

touch ~/project/styled_table.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Styled Product Catalog</title>
    <style>
      table {
        width: 100%;
        border-collapse: collapse;
        font-family: Arial, sans-serif;
      }
      th {
        background-color: #4caf50;
        color: white;
        padding: 10px;
        text-align: left;
      }
      tr:nth-child(even) {
        background-color: #f2f2f2;
      }
      td {
        border: 1px solid #ddd;
        padding: 8px;
      }
      tr:hover {
        background-color: #ddd;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>Product ID</th>
          <th>Product Name</th>
          <th>Price</th>
          <th>Stock</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>001</td>
          <td>Wireless Headphones</td>
          <td>$99.99</td>
          <td>50</td>
        </tr>
        <tr>
          <td>002</td>
          <td>Smart Watch</td>
          <td>$199.99</td>
          <td>30</td>
        </tr>
        <tr>
          <td>003</td>
          <td>Bluetooth Speaker</td>
          <td>$79.99</td>
          <td>75</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Demonstrierte wichtige Gestaltungstechniken:

border-collapse: Entfernt den Abstand zwischen Tabellenzellen.
Benutzerdefinierte Schriftart und Typografie.
Eingefärbte Kopfzeile.
Abwechselnde Zeilenfarben mit :nth-child(even).
Hover-Effekt für Tabellenzeilen.
Padding und Rahmenstil für Zellen.

Gestaltungsoptionen umfassen:

Inline CSS im <style>-Tag.
Separate CSS-Datei (empfohlen für größere Projekte).
Inline-Stile mit dem style-Attribut.
CSS-Eigenschaften für Layout, Farben und Interaktivität.

Die Beispielausgabe in einem Webbrowser würde eine professionell gestaltete, leicht lesbare Tabelle mit Hover- und Farbeffekten anzeigen.

Beispiel für eine gestaltete HTML-Tabelle

Zusammenfassung

In diesem Lab haben die Teilnehmer die Grundlagen der Erstellung von HTML-Tabellen mithilfe von essentiellen HTML-Tags wie <table>, <tr>, <td> und <th> gelernt. Das Lab hat die Lernenden durch das Verständnis der Tabellenstruktur, die Erstellung einfacher Tabellen mit Zeilen und Spalten sowie die Erkundung von Techniken zum Hinzufügen von Kopfzeilen, Zusammenführen von Zellen und Anpassen von Tabellenattributen geführt.

Die praktischen Übungen haben gezeigt, wie man strukturierte, gitterartige Datenpräsentationen auf Webseiten erstellt. Dabei wurden Schlüsselkonzepte wie die Definition von Tabellenzeilen, die Erstellung von Kopf- und Datenzellen sowie die Verwendung von Attributen wie border zur Verbesserung der Tabellenvisualisierung behandelt. Die Teilnehmer haben praktische Erfahrungen in der Erstellung von semantischen und gut organisierten HTML-Tabellen gesammelt, die Informationen in verschiedenen Web-Design-Szenarien effektiv darstellen können.