Tabellen: Daten organisieren
Lernen Sie, Tabellen zur Darstellung von Informationen zu erstellen
Tabellen: Daten organisieren ist eine kostenlose HTML for Kids-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des HTML for Kids-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der HTML for Kids-Kurs umfasst insgesamt 4 Lektionen.
Tabellen: Daten organisieren
Willkommen zur nächsten Lektion! Heute lernen Sie, wie Sie Tabellen in HTML erstellen. Tabellen eignen sich hervorragend, um Informationen in Zeilen und Spalten zu organisieren.
Was sind Tabellen?
Tabellen dienen dazu, Informationen strukturiert darzustellen. Jede Tabelle besteht aus Zeilen und Spalten.
So sieht eine Tabelle aus:
Name Age City
Alice 12 New York
Bob 15 London
Erstellen wir diese Tabelle mit HTML!
Eine einfache Tabelle erstellen
Tabellen in HTML werden mit dem Tag <table> erstellt. Zeilen werden mit dem Tag <tr> und Zellen mit dem Tag <td> erstellt.
Beispiel:
<table>
<tr>
<td>Alice</td>
<td>12</td>
<td>New York</td>
</tr>
<tr>
<td>Bob</td>
<td>15</td>
<td>London</td>
</tr>
</table>
Eine Tabellenüberschrift hinzufügen
Mit dem Tag <th> können Sie Ihrer Tabelle Überschriften hinzufügen. Überschriften machen Ihre Tabelle verständlicher.
Beispiel:
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>Alice</td>
<td>12</td>
<td>New York</td>
</tr>
<tr>
<td>Bob</td>
<td>15</td>
<td>London</td>
</tr>
</table>
Eine Tabelle mit einem Rahmen versehen
Standardmäßig haben Tabellen keine Rahmen. Sie können einen Rahmen mit dem Attribut border oder mit CSS hinzufügen.
Beispiel:
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>Alice</td>
<td>12</td>
<td>New York</td>
</tr>
<tr>
<td>Bob</td>
<td>15</td>
<td>London</td>
</tr>
</table>
Spalten und Zeilen verbinden
Manchmal soll sich eine Zelle über mehrere Spalten oder Zeilen erstrecken. Verwenden Sie dafür das Attribut colspan oder rowspan.
Beispiel:
<table border="1">
<tr>
<th>Name</th>
<th colspan="2">Details</th>
</tr>
<tr>
<td>Alice</td>
<td>12</td>
<td>New York</td>
</tr>
<tr>
<td>Bob</td>
<td>15</td>
<td>London</td>
</tr>
</table>
Ihre Tabelle formatieren
Mit CSS können Sie das Erscheinungsbild Ihrer Tabelle verbessern. Sie können beispielsweise Farben ändern, Innenabstände hinzufügen oder Text ausrichten.
Beispiel:
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: center;
}
th {
background-color: lightgray;
}
</style>
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>Alice</td>
<td>12</td>
<td>New York</td>
</tr>
<tr>
<td>Bob</td>
<td>15</td>
<td>London</td>
</tr>
</table>
Selbst ausprobieren
Erstellen Sie eine Tabelle, in der Ihre Lieblingsfilme aufgelistet sind. Hier ist ein Beispiel:
<!DOCTYPE html>
<html>
<head>
<title>My Favorite Movies</title>
</head>
<body>
<h1>My Favorite Movies</h1>
<table border="1">
<tr>
<th>Movie</th>
<th>Year</th>
<th>Genre</th>
</tr>
<tr>
<td>Inception</td>
<td>2010</td>
<td>Science Fiction</td>
</tr>
<tr>
<td>The Lion King</td>
<td>1994</td>
<td>Animation</td>
</tr>
</table>
</body>
</html>
Großartige Arbeit!
Herzlichen Glückwunsch! Sie haben gelernt, wie Sie Tabellen erstellen, Überschriften hinzufügen und Tabellen sogar formatieren. Tabellen eignen sich hervorragend, um Daten zu organisieren und darzustellen. In der nächsten Lektion lernen Sie Formulare kennen, mit denen Sie Benutzereingaben erfassen können. Machen Sie sich bereit, Ihre Seiten interaktiv zu gestalten!
Lerne HTML mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 16
- Lektionen
- 35
Häufig gestellte Fragen
Ist die Lektion „Tabellen: Daten organisieren“ kostenlos?
Ja — der vollständige Text von „Tabellen: Daten organisieren“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des HTML for Kids-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der HTML for Kids-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Tabellen: Daten organisieren“?
Lernen Sie, Tabellen zur Darstellung von Informationen zu erstellen Du übst HTML for Kids mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um HTML for Kids zu starten?
Keine Vorkenntnisse erforderlich. HTML for Kids auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.
Wie lange dauert die Lektion „Tabellen: Daten organisieren“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser HTML for Kids-Lektion Code schreiben und ausführen?
Ja. Jede HTML for Kids-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Tabellen: Daten organisieren
- Formulare: Benutzereingaben erfassen
- HTML-Attribute
- Multimedia: Videos und Audio hinzufügen