Herausforderung: Strukturierung einer Planetendatentabelle
In dieser Herausforderung stellen wir Ihnen einige Daten zu den Planeten in unserem Sonnensystem zur Verfügung. Ihre Aufgabe ist es, diese in eine zugängliche HTML-Tabelle zu strukturieren.
Ausgangspunkt
Um mit der Bewertung zu beginnen, machen Sie lokale Kopien von blank-template.html, minimal-table.css und planets-data.txt in einem neuen Verzeichnis auf Ihrem lokalen Computer.
Hinweis: Sie können Lösungen in Ihrem Code-Editor oder in einem Online-Editor wie CodePen oder JSFiddle ausprobieren.
Falls Sie stecken bleiben, können Sie uns in einem unserer Kommunikationskanäle kontaktieren.
Projektauftrag
Sie arbeiten an einer Schule; aktuell lernen Ihre Schüler über die Planeten unseres Sonnensystems, und Sie möchten ihnen eine leicht verständliche Datensammlung bieten, um Fakten und Zahlen über die Planeten nachzuschlagen. Eine HTML-Datentabelle wäre ideal — Sie müssen die verfügbaren Rohdaten nehmen und in eine Tabelle umwandeln, indem Sie die unten stehenden Schritte befolgen.
Schritte zum Abschließen
Die folgenden Schritte beschreiben, was Sie tun müssen, um das Tabellenbeispiel zu vervollständigen. Alle benötigten Daten befinden sich in der Datei planets-data.txt. Wenn Sie Schwierigkeiten haben, sich die Daten vorzustellen, schauen Sie sich das Live-Beispiel unten an oder versuchen Sie, ein Diagramm zu zeichnen.
- Öffnen Sie Ihre Kopie von
blank-template.htmlund beginnen Sie die Tabelle mit einem äußeren Container, einem Tabellenkopf und einem Tabellenkörper. Einen Tabellenfuß benötigen Sie für dieses Beispiel nicht. - Fügen Sie die bereitgestellte Beschriftung zu Ihrer Tabelle hinzu.
- Fügen Sie eine Zeile zum Tabellenkopf hinzu, die alle Spaltenüberschriften enthält.
- Erstellen Sie alle Inhaltszeilen im Tabellenkörper und denken Sie daran, alle Zeilenüberschriften semantisch als Überschriften zu gestalten.
- Stellen Sie sicher, dass alle Inhalte in die richtigen Zellen eingefügt werden – in den Rohdaten wird jede Zeile der Planetendaten neben dem zugehörigen Planeten angezeigt.
- Fügen Sie Attribute hinzu, um die Zeilen- und Spaltenüberschriften eindeutig mit den Zeilen, Spalten oder Zeilengruppen zu verknüpfen, für die sie als Überschriften fungieren.
- Fügen Sie nur um die Spalte, die alle Planetenzeilenüberschriften enthält, einen schwarzen Rand hinzu.
Hinweise und Tipps
- Die erste Zelle der Kopfzeile muss leer sein und sich über zwei Spalten erstrecken.
- Die Gruppenzeilenüberschriften (z.B. Jovian planets), die links von den Planetenzeilenüberschriften (z.B. Saturn) sitzen, sind etwas knifflig zu sortieren – Sie müssen sicherstellen, dass jede die richtige Anzahl von Zeilen und Spalten umfasst.
- Eine Methode zur Zuordnung von Überschriften zu ihren Zeilen/Spalten ist viel einfacher als die andere.
Beispiel
Die fertige Tabelle sollte folgendermaßen aussehen:
Sie können das Beispiel auch hier live sehen (nicht den Quellcode ansehen — nicht schummeln!)