Herausforderung: Strukturierung einer Planetendatentabelle
In dieser Herausforderung stellen wir Ihnen einige Daten über die Planeten in unserem Sonnensystem zur Verfügung. Ihre Aufgabe ist es, diese in einer barrierefreien 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.
Wenn Sie nicht weiterkommen, können Sie sich über einen unserer Kommunikationskanäle an uns wenden.
Projektbeschreibung
Sie arbeiten an einer Schule; derzeit studieren Ihre Schüler die Planeten unseres Sonnensystems, und Sie möchten ihnen eine leicht verständliche Datensammlung zur Verfügung stellen, um Fakten und Zahlen über die Planeten nachzuschlagen. Eine HTML-Datentabelle wäre ideal — Sie müssen die Rohdaten, die Ihnen zur Verfügung stehen, nehmen und in eine Tabelle verwandeln, indem Sie die unten beschriebenen Schritte befolgen.
Schritte zur Fertigstellung
Die folgenden Schritte beschreiben, was Sie tun müssen, um das Tabellenbeispiel abzuschließen. Alle benötigten Daten befinden sich in der Datei planets-data.txt. Wenn Sie Probleme 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.html, und beginnen Sie mit der Tabelle, indem Sie ihr einen äußeren Container, einen Tabellenkopf und einen Tabellenkörper geben. Sie benötigen keinen Tabellenfuß für dieses Beispiel. - Fügen Sie Ihrer Tabelle die bereitgestellte Beschriftung hinzu.
- Fügen Sie dem Tabellenkopf eine Zeile hinzu, die alle Spaltenüberschriften enthält.
- Erstellen Sie alle Inhaltszeilen im Tabellenkörper, und denken Sie daran, alle Zeilenüberschriften semantisch zu machen.
- Stellen Sie sicher, dass alle Inhalte in die richtigen Zellen platziert werden — in den Rohdaten wird jede Zeile der Planetendaten neben ihrem zugehörigen Planeten angezeigt.
- Fügen Sie Attribute hinzu, um die Zeilen- und Spaltenüberschriften eindeutig mit den Zeilen, Spalten oder Zeilengruppen zu assoziieren, für die sie als Überschriften fungieren.
- Fügen Sie nur um die Spalte, die alle Zeilenüberschriften der Planetennamen enthält, einen schwarzen Rahmen hinzu.
Hinweise und Tipps
- Die erste Zelle der Kopfzeile muss leer sein und über zwei Spalten gehen.
- Die Gruppenzeilenüberschriften (z.B. Jovian planets), die sich links von den Zeilenüberschriften der Planetennamen (z.B. Saturn) befinden, sind etwas knifflig zu sortieren — Sie müssen sicherstellen, dass jede die richtige Anzahl an Zeilen und Spalten umfasst.
- Eine Möglichkeit, Überschriften mit ihren Zeilen/Spalten zu assoziieren, ist viel einfacher als die andere.
Beispiel
Die fertige Tabelle sollte so aussehen:
Sie können sich das Beispiel auch live hier ansehen (schauen Sie sich den Quellcode nicht an — nicht schummeln!)