Lernen Erstellen und Strukturieren von Tabellen in HTML

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>: der Tabellen-Container;
<tr>: eine Zeile;
<th>: eine Kopfzelle (fett, zentriert);
<td>: eine normale Datenzelle.

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

Schritt 1: HTML-Struktur erstellen

Beginnen Sie mit dem Anlegen der grundlegenden HTML-Struktur für Ihre Seite:

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

Schritt 2: Tabelle definieren

Fügen Sie 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 Sie der Tabelle einen Titel geben möchten, können Sie das <caption>-Tag verwenden:

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

Schritt 4: Tabellenüberschriften erstellen

Fügen Sie als Nächstes die Tabellenüberschriften innerhalb des <thead>-Elements hinzu. 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: Die 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 Zusammenhänge deutlich werden.

index.html

index.css

Hinweis

Standardmäßig besitzen HTML-Tabellen keinen spezifischen visuellen Stil. Um das Erscheinungsbild 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 erforderlich, sich an dieser Stelle mit CSS zu beschäftigen, da der aktuelle Fokus ausschließlich auf HTML liegt. Um zu sehen, wie die Tabelle ohne jegliches CSS-Styling aussieht, kann Zeile 4 entfernt werden: <link rel="stylesheet" href="index.css" />, welche die CSS-Stile importiert.

Wenn Sie mehr über CSS erfahren möchten, empfiehlt sich der CSS Fundamentals-Kurs.

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

Suggested prompts:

Can you explain what each table element does in more detail?

How can I style this table to make it look better?

Can you show me how to add more rows or columns to the table?

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>: der Tabellen-Container;
<tr>: eine Zeile;
<th>: eine Kopfzelle (fett, zentriert);
<td>: eine normale Datenzelle.

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

Schritt 1: HTML-Struktur erstellen

Beginnen Sie mit dem Anlegen der grundlegenden HTML-Struktur für Ihre Seite:

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

Schritt 2: Tabelle definieren

Fügen Sie 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 Sie der Tabelle einen Titel geben möchten, können Sie das <caption>-Tag verwenden:

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

Schritt 4: Tabellenüberschriften erstellen

Fügen Sie als Nächstes die Tabellenüberschriften innerhalb des <thead>-Elements hinzu. 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: Die 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 Zusammenhänge deutlich werden.

index.html

index.css

Hinweis

Wenn Sie mehr über CSS erfahren möchten, empfiehlt sich der CSS Fundamentals-Kurs.

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

Erstellen und Strukturieren von Tabellen in HTML

Schritt 1: HTML-Struktur erstellen

Schritt 2: Tabelle definieren

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

Schritt 4: Tabellenüberschriften erstellen

Schritt 5: Die Tabelle mit Daten füllen

Gesamter Code

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?

Erstellen und Strukturieren von Tabellen in HTML

Schritt 1: HTML-Struktur erstellen

Schritt 2: Tabelle definieren

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

Schritt 4: Tabellenüberschriften erstellen

Schritt 5: Die Tabelle mit Daten füllen

Gesamter Code

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?

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

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