Tabellen

Tabellen sind nützlich, um komplexe Beziehungen darzustellen, indem Inhalte in Zellen organisiert werden. Sie sind besonders effektiv für die Darstellung tabellarischer Daten wie Fahrpläne, Kalender, Gehaltsabrechnungen, Spielergebnisse, Finanztransaktionen, Speisekarten, Preislisten und andere Informationen, die sich natürlich in ein Tabellenformat einfügen, ähnlich wie Google Sheets.

Um Tabellen in HTML zu erstellen, verwenden Sie die folgenden Hauptelemente:

<table>: definiert eine Tabelle auf einer Webseite;
<tr>: definiert eine Zeile innerhalb der Tabelle;
<th>: definiert eine Kopfzelle innerhalb einer Zeile. Kopfzellen sind typischerweise fett und zentriert;
<td>: definiert eine Standarddatenzelle innerhalb einer Zeile.

Lassen Sie uns die Schritte zur Erstellung einer Tabelle für ein Menü durchgehen:

Schritt 1: Richten Sie die HTML-Struktur ein

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

Schritt 2: Definieren Sie die Tabelle

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

Schritt 3: Fügen Sie eine Tabellenüberschrift hinzu (Optional)

Wenn Sie der Tabelle einen Titel geben möchten, können Sie das <caption>-Tag verwenden:

Schritt 4: Erstellen Sie Tabellenüberschriften

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

Schritt 5: Füllen Sie die Tabelle mit Daten

Verwenden Sie das <tbody>-Element, um die Tabellenzeilen einzuschließen, und <td>-Tags, um die Zellen zu definieren, die die Daten enthalten:

Vollständiger Code

Bitte nehmen Sie sich einen Moment Zeit, um alle Elemente gründlich zu prüfen, um sicherzustellen, dass ihre Beziehung offensichtlich ist.

index.html

index.css

Hinweis

Standardmäßig haben HTML-Tabellen keinen spezifischen visuellen Stil. Um das Erscheinungsbild der Tabelle anzupassen, fügen Sie CSS-Stile in einer separaten CSS-Datei oder innerhalb eines <style>-Tags im <head>-Abschnitt der HTML-Datei hinzu.

Es ist jedoch nicht notwendig, sich zu diesem Zeitpunkt mit CSS zu beschäftigen, da der aktuelle Fokus nur auf HTML liegt.

Wenn Sie sehen möchten, wie die Tabelle ohne CSS-Styling aussieht, können Sie Zeile 4 entfernen: <link rel="stylesheet" href="index.css" />, die die CSS-Stile importiert.

Wenn Sie mehr über CSS erfahren möchten, sollten Sie den CSS-Grundlagen Kurs in Betracht ziehen.

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. Was ist der Zweck des `<th>`-Elements in einer HTML-Tabelle?

War alles klar?

Danke für Ihr Feedback!

Abschnitt 4. Kapitel 7

Ultimatives HTML