{ "$schema": "../../schemas/code-crispies-module-schema.json", "id": "html-tables", "title": "HTML-Tabellen", "description": "Erstelle strukturierte Datentabellen mit Überschriften und Beschriftungen", "mode": "html", "difficulty": "beginner", "lessons": [ { "id": "table-basic", "title": "Grundlegende Tabellenstruktur", "description": "Tabellen verwenden <table> mit <tr> für Zeilen. In Zeilen nutze <th> für Überschriften und <td> für Datenzellen.

Das <caption>-Element bietet einen zugänglichen Titel für die Tabelle.", "task": "Erstelle eine einfache Tabelle mit:
1. Einer <caption> mit 'Obstpreise'
2. Einer Kopfzeile mit 'Obst' und 'Preis' Spalten
3. Mindestens 2 Datenzeilen", "previewHTML": "", "previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: #f5f5f5; } table { border-collapse: collapse; width: 100%; max-width: 400px; background: white; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.1); } caption { padding: 15px; font-weight: 600; font-size: 1.2rem; color: #333; background: #f8f9fa; } th, td { padding: 12px 20px; text-align: left; border-bottom: 1px solid #eee; } th { background: #3498db; color: white; font-weight: 500; } tr:hover { background: #f8f9fa; } tr:last-child td { border-bottom: none; }", "sandboxCSS": "", "initialCode": "", "solution": "\n \n \n \n \n \n \n \n \n \n \n \n \n \n
Obstpreise
ObstPreis
Apfel1,50 €
Banane0,75 €
", "previewContainer": "preview-area", "validations": [ { "type": "element_exists", "value": "table", "message": "Füge ein -Element hinzu" }, { "type": "element_exists", "value": "caption", "message": "Füge eine
als Tabellentitel hinzu" }, { "type": "element_count", "value": { "selector": "th", "min": 2 }, "message": "Füge mindestens 2 Überschriftszellen (th) hinzu" }, { "type": "element_count", "value": { "selector": "tr", "min": 3 }, "message": "Füge mindestens 3 Zeilen hinzu (1 Kopf + 2 Daten)" } ] }, { "id": "table-thead-tbody", "title": "Tabellenkopf & -körper", "description": "Verwende <thead> zum Gruppieren von Kopfzeilen und <tbody> zum Gruppieren von Datenzeilen. Das hilft Browsern und Hilfstechnologien, die Tabellenstruktur zu verstehen.

Du kannst auch <tfoot> für Fußzeilen wie Summen verwenden.", "task": "Erstelle eine strukturierte Tabelle:
1. Eine <caption> mit 'Monatliche Verkäufe'
2. Ein <thead> mit Monat und Umsatz Überschriften
3. Ein <tbody> mit mindestens 2 Datenzeilen", "previewHTML": "", "previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; margin: 0; box-sizing: border-box; } table { border-collapse: collapse; width: 100%; max-width: 450px; background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.2); } caption { padding: 20px; font-weight: 700; font-size: 1.3rem; color: white; background: transparent; text-shadow: 0 2px 4px rgba(0,0,0,0.2); caption-side: top; } thead { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } th { padding: 15px 20px; text-align: left; color: white; font-weight: 500; } tbody tr { border-bottom: 1px solid #eee; } tbody tr:hover { background: #f8f9fa; } td { padding: 15px 20px; color: #333; } tbody tr:last-child { border-bottom: none; }", "sandboxCSS": "", "initialCode": "", "solution": "\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
Monatliche Verkäufe
MonatUmsatz
Januar12.500 €
Februar14.200 €
", "previewContainer": "preview-area", "validations": [ { "type": "element_exists", "value": "table", "message": "Füge ein -Element hinzu" }, { "type": "element_exists", "value": "caption", "message": "Füge ein für den Kopfbereich hinzu" }, { "type": "element_exists", "value": "tbody", "message": "Füge ein für die Datenzeilen hinzu" }, { "type": "element_count", "value": { "selector": "tbody tr", "min": 2 }, "message": "Füge mindestens 2 Datenzeilen in tbody hinzu" } ] }, { "id": "table-complete", "title": "Vollständige Tabelle mit Fuß", "description": "Füge <tfoot> hinzu, um einen Fußbereich für Summen oder Zusammenfassungen zu erstellen. Der Fuß bleibt unten, auch wenn tbody viele Zeilen hat.

Kombiniere alle Abschnitte für eine vollständig strukturierte, zugängliche Tabelle.", "task": "Erstelle eine vollständige Tabelle:
1. Eine <caption> mit 'Bestellübersicht'
2. Ein <thead> mit Artikel und Preis Überschriften
3. Ein <tbody> mit 2 Artikeln
4. Ein <tfoot> mit einer Summenzeile", "previewHTML": "", "previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: #fafafa; } table { border-collapse: collapse; width: 100%; max-width: 400px; background: white; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.1); } caption { padding: 15px 20px; font-weight: 600; font-size: 1.1rem; color: #333; text-align: left; background: #f8f9fa; border-bottom: 2px solid #eee; } th, td { padding: 12px 20px; text-align: left; } thead th { background: #2c3e50; color: white; } tbody td { border-bottom: 1px solid #eee; } tbody tr:hover { background: #f8f9fa; } tfoot { background: #ecf0f1; font-weight: 600; } tfoot td { border-top: 2px solid #2c3e50; color: #2c3e50; }", "sandboxCSS": "", "initialCode": "", "solution": "
-Element hinzu" }, { "type": "element_exists", "value": "thead", "message": "Füge ein
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
Bestellübersicht
ArtikelPreis
Widget25,00 €
Gadget35,00 €
Gesamt60,00 €
", "previewContainer": "preview-area", "validations": [ { "type": "element_exists", "value": "table", "message": "Füge ein -Element hinzu" }, { "type": "element_exists", "value": "caption", "message": "Füge ein -Abschnitt hinzu" }, { "type": "element_exists", "value": "tbody", "message": "Füge einen -Abschnitt hinzu" }, { "type": "element_exists", "value": "tfoot", "message": "Füge einen -Abschnitt für die Summe hinzu" }, { "type": "element_count", "value": { "selector": "tbody tr", "min": 2 }, "message": "Füge mindestens 2 Artikelzeilen in tbody hinzu" } ] } ] }
-Element hinzu" }, { "type": "element_exists", "value": "thead", "message": "Füge einen