Lernen Creating and Structuring Tables in HTML | Arbeiten mit Medien und Tabellen

Swipe um das Menü anzuzeigen

Tabellen dienen zur Darstellung strukturierter Daten wie Zeitpläne, Kalender, Finanzaufzeichnungen, Speisekarten und Preislisten. HTML stellt verschiedene Elemente zum Erstellen von Tabellen bereit.

Wichtige Tabellenelemente:

<table>: Tabellencontainer;
<tr>: Tabellenzeile;
<th>: Kopfzelle (fett, zentriert);
<td>: normale Datenzelle.

Im Folgenden wird schrittweise eine einfache Menü-Tabelle erstellt.

Schritt 1: Die HTML-Struktur aufbauen

Beginne mit dem Erstellen der grundlegenden HTML-Struktur für deine Seite:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- The link to the styles -->
  </head>
  <body>
    <!-- Table code will go here -->
  </body>
</html>

Schritt 2: Die Tabelle definieren

Füge innerhalb des <body>-Elements das <table>-Tag hinzu, um die Tabelle zu definieren:

<table>
  <!-- Table content will go here -->
</table>

Schritt 3: Tabellenüberschrift hinzufügen (optional)

Wenn du der Tabelle einen Titel geben möchtest, kannst du das <caption>-Tag verwenden:

<table>
  <caption>New menu</caption>
  <!-- Table content will go here -->
</table>

Schritt 4: Tabellenüberschriften erstellen

Als Nächstes die Tabellenüberschriften innerhalb des <thead>-Elements hinzufügen. Jede Überschrift wird mit dem <th>-Tag definiert:

<table>
  <caption>New menu</caption>
  <thead>
    <tr>
      <th>Category</th>
      <th>Meal</th>
      <th>Price</th>
    </tr>
  </thead>
  <!-- Table content will go here -->
</table>

Schritt 5: Tabelle mit Daten füllen

Das <tbody>-Element verwenden, um die Tabellenzeilen einzuschließen, und <td>-Tags, um die Zellen mit den Daten zu definieren:

<table>
  <caption>New menu</caption>
  <thead>
    <tr>
      <th>Category</th>
      <th>Meal</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Appetizer</td>
      <td>Garlic Shrimps</td>
      <td>8$</td>
    </tr>
    <tr>
      <td>Pasta</td>
      <td>Lobster Linguine Noodles</td>
      <td>16$</td>
    </tr>
    <tr>
      <td>Sandwich</td>
      <td>Lobster Tail Sandwich</td>
      <td>11$</td>
    </tr>
  </tbody>
</table>

Gesamter Code

Bitte nehmen Sie sich einen Moment Zeit, um alle Elemente sorgfältig zu betrachten, damit deren Zusammenhang deutlich wird.

index.html

index.css

Hinweis

Standardmäßig haben HTML-Tabellen keinen bestimmten visuellen Stil. Um das Aussehen der Tabelle anzupassen, können CSS-Stile in einer separaten CSS-Datei oder innerhalb eines <style>-Tags im <head>-Bereich der HTML-Datei hinzugefügt werden.

Es ist jedoch nicht notwendig, sich an dieser Stelle mit CSS zu beschäftigen, da der aktuelle Fokus ausschließlich auf HTML liegt. Wenn du sehen möchtest, wie die Tabelle ohne CSS-Styling aussieht, kannst du Zeile 4 entfernen: <link rel="stylesheet" href="index.css" />, die die CSS-Styles importiert.

1. Welches HTML-Element wird verwendet, um eine Tabelle auf einer Webseite zu definieren?

2. Welches HTML-Element wird verwendet, um eine Zeile innerhalb einer Tabelle zu definieren?

3. Welchen Zweck hat das `<th>`-Element in einer HTML-Tabelle?

War alles klar?

Danke für Ihr Feedback!

Abschnitt 4. Kapitel 8

Fragen Sie AI

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen