Kursinhalt
Ultimatives HTML
Ultimatives HTML
Erstellen und Strukturieren von Tabellen in HTML
Tabellen sind nützlich, um komplexe Zusammenhänge darzustellen, indem Inhalte in Zellen organisiert werden. Sie eignen sich besonders gut zur Darstellung tabellarischer Daten wie Fahrpläne, Kalender, Gehaltsabrechnungen, Spielergebnisse, Finanztransaktionen, Speisekarten, Preislisten und anderer Informationen, die sich natürlich in ein Tabellenformat einfügen, ähnlich wie in Google Sheets.
Um Tabellen in HTML zu erstellen, werden die folgenden Hauptelemente verwendet:
<table>: definiert eine Tabelle auf einer Webseite;<tr>: definiert eine Zeile innerhalb der Tabelle;<th>: definiert eine Kopfzelle innerhalb einer Zeile. Kopfzellen sind in der Regel fett und zentriert;<td>: definiert eine Standard-Datenzelle innerhalb einer Zeile.
Im Folgenden werden die Schritte zum Erstellen einer Tabelle für eine Speisekarte erläutert:
Schritt 1: Grundstruktur in HTML anlegen
Beginnen Sie mit der Erstellung der grundlegenden HTML-Struktur für Ihre Seite:
html
Schritt 2: Die Tabelle definieren
Fügen Sie innerhalb des <body>-Elements das <table>-Tag hinzu, um die Tabelle zu definieren:
html
Schritt 3: Tabellenüberschrift hinzufügen (optional)
Wenn Sie der Tabelle einen Titel geben möchten, können Sie das <caption>-Tag verwenden:
html
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:
html
Schritt 5: Die Tabelle mit Daten füllen
Verwenden Sie das <tbody>-Element, um die Tabellenzeilen einzuschließen, und <td>-Tags, um die Zellen mit den Daten zu definieren:
html
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 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>-Bereich der HTML-Datei hinzu.Es ist jedoch nicht erforderlich, sich an dieser Stelle mit CSS zu beschäftigen, da der aktuelle Fokus ausschließlich auf HTML liegt.
Wenn Sie sehen möchten, wie die Tabelle ohne jegliches CSS-Styling aussieht, können Sie Zeile 4 entfernen:
<link rel="stylesheet" href="index.css" />, welche die CSS-Stile importiert.Wenn Sie mehr über CSS erfahren möchten, empfehlen wir den CSS-Grundlagen 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?
Danke für Ihr Feedback!
