code-crispies/lessons/de/30-html-tables.json

{
	"$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 <kbd>&lt;table&gt;</kbd> mit <kbd>&lt;tr&gt;</kbd> für Zeilen. In Zeilen nutze <kbd>&lt;th&gt;</kbd> für Überschriften und <kbd>&lt;td&gt;</kbd> für Datenzellen.<br><br>Das <kbd>&lt;caption&gt;</kbd>-Element bietet einen zugänglichen Titel für die Tabelle.",
			"task": "Erstelle eine einfache Tabelle mit:<br>1. Einer <kbd>&lt;caption&gt;</kbd> mit 'Obstpreise'<br>2. Einer Kopfzeile mit 'Obst' und 'Preis' Spalten<br>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": "<table>\n  <caption>Obstpreise</caption>\n  <tr>\n    <th>Obst</th>\n    <th>Preis</th>\n  </tr>\n  <tr>\n    <td>Apfel</td>\n    <td>1,50 €</td>\n  </tr>\n  <tr>\n    <td>Banane</td>\n    <td>0,75 €</td>\n  </tr>\n</table>",
			"previewContainer": "preview-area",
			"validations": [
				{
					"type": "element_exists",
					"value": "table",
					"message": "Füge ein <table>-Element hinzu"
				},
				{
					"type": "element_exists",
					"value": "caption",
					"message": "Füge eine <caption> 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 <kbd>&lt;thead&gt;</kbd> zum Gruppieren von Kopfzeilen und <kbd>&lt;tbody&gt;</kbd> zum Gruppieren von Datenzeilen. Das hilft Browsern und Hilfstechnologien, die Tabellenstruktur zu verstehen.<br><br>Du kannst auch <kbd>&lt;tfoot&gt;</kbd> für Fußzeilen wie Summen verwenden.",
			"task": "Erstelle eine strukturierte Tabelle:<br>1. Eine <kbd>&lt;caption&gt;</kbd> mit 'Monatliche Verkäufe'<br>2. Ein <kbd>&lt;thead&gt;</kbd> mit Monat und Umsatz Überschriften<br>3. Ein <kbd>&lt;tbody&gt;</kbd> 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": "<table>\n  <caption>Monatliche Verkäufe</caption>\n  <thead>\n    <tr>\n      <th>Monat</th>\n      <th>Umsatz</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>Januar</td>\n      <td>12.500 €</td>\n    </tr>\n    <tr>\n      <td>Februar</td>\n      <td>14.200 €</td>\n    </tr>\n  </tbody>\n</table>",
			"previewContainer": "preview-area",
			"validations": [
				{
					"type": "element_exists",
					"value": "table",
					"message": "Füge ein <table>-Element hinzu"
				},
				{
					"type": "element_exists",
					"value": "caption",
					"message": "Füge ein <caption>-Element hinzu"
				},
				{
					"type": "element_exists",
					"value": "thead",
					"message": "Füge ein <thead> für den Kopfbereich hinzu"
				},
				{
					"type": "element_exists",
					"value": "tbody",
					"message": "Füge ein <tbody> 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 <kbd>&lt;tfoot&gt;</kbd> hinzu, um einen Fußbereich für Summen oder Zusammenfassungen zu erstellen. Der Fuß bleibt unten, auch wenn tbody viele Zeilen hat.<br><br>Kombiniere alle Abschnitte für eine vollständig strukturierte, zugängliche Tabelle.",
			"task": "Erstelle eine vollständige Tabelle:<br>1. Eine <kbd>&lt;caption&gt;</kbd> mit 'Bestellübersicht'<br>2. Ein <kbd>&lt;thead&gt;</kbd> mit Artikel und Preis Überschriften<br>3. Ein <kbd>&lt;tbody&gt;</kbd> mit 2 Artikeln<br>4. Ein <kbd>&lt;tfoot&gt;</kbd> 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": "<table>\n  <caption>Bestellübersicht</caption>\n  <thead>\n    <tr>\n      <th>Artikel</th>\n      <th>Preis</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>Widget</td>\n      <td>25,00 €</td>\n    </tr>\n    <tr>\n      <td>Gadget</td>\n      <td>35,00 €</td>\n    </tr>\n  </tbody>\n  <tfoot>\n    <tr>\n      <td>Gesamt</td>\n      <td>60,00 €</td>\n    </tr>\n  </tfoot>\n</table>",
			"previewContainer": "preview-area",
			"validations": [
				{
					"type": "element_exists",
					"value": "table",
					"message": "Füge ein <table>-Element hinzu"
				},
				{
					"type": "element_exists",
					"value": "caption",
					"message": "Füge ein <caption>-Element hinzu"
				},
				{
					"type": "element_exists",
					"value": "thead",
					"message": "Füge einen <thead>-Abschnitt hinzu"
				},
				{
					"type": "element_exists",
					"value": "tbody",
					"message": "Füge einen <tbody>-Abschnitt hinzu"
				},
				{
					"type": "element_exists",
					"value": "tfoot",
					"message": "Füge einen <tfoot>-Abschnitt für die Summe hinzu"
				},
				{
					"type": "element_count",
					"value": { "selector": "tbody tr", "min": 2 },
					"message": "Füge mindestens 2 Artikelzeilen in tbody hinzu"
				}
			]
		}
	]
}