SKIP TO CONTENT

Von CSV zur Web-App

beginner~15 Min.0/4 Schritte

Von CSV zur Web-App

Du weißt, wie man Daten abfragt. Du weißt, wie man sie in SQL zerlegt. Jetzt lernst du, wie man sie zeigt.

Eine Tabelle in einem Spreadsheet ist für die Welt unsichtbar. Eine Tabelle im Browser ist ein Produkt. In dieser Lektion baust du ein interaktives HTML-Daten-Dashboard — mit sortierbaren Spaltenköpfen, farbcodierten Zeilen und einer Summenzeile — komplett von Grund auf. Kein Python, kein Pandas. Nur HTML und Tailwind.

Anweisungen

1

Füge einen <h1>-Dashboard-Titel hinzu — welche Daten werden hier gezeigt?

Tipp: Versuche: `<h1 class="text-2xl font-bold text-white">Produkt-Analytics</h1>`

2

Füge eine <table> mit einem <thead> und mindestens 3 Spaltenüberschriften (<th>) hinzu

3

Füge einen <tbody> mit mindestens 4 Datenzeilen (<tr>) hinzu — trage realistisch aussehende Zahlen ein

4

Füge unten eine Summenzeile hinzu: <tr class="summary-row"> mit fetten Summen für jede Spalte

Dein Code

html
21 Zeilen
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

Live-Vorschau

Live-Vorschau