Testen Sie Ihre Fähigkeiten: Tabellen
Ziel dieses Fähigkeitentests ist es, zu prüfen, ob Sie verstehen, wie man HTML-Tabellen in CSS gestaltet.
Hinweis: Sie können Lösungen in den interaktiven Editoren auf dieser Seite oder in einem Online-Editor wie CodePen, JSFiddle, oder Glitch ausprobieren.
Wenn Sie nicht weiterkommen, können Sie sich in einem unserer Kommunikationskanäle an uns wenden.
Aufgabe
In der Lektion über Styling von Tabellen haben wir eine Tabelle auf recht knallige Weise gestaltet. In dieser Aufgabe werden wir dieselbe Tabelle gestalten, jedoch einige gute Praktiken für das Tabellendesign anwenden, wie sie im externen Artikel Web Typography: designing tables to be read not looked at beschrieben sind.
Unsere fertige Tabelle wird wie das unten stehende Bild aussehen. Es gibt verschiedene Möglichkeiten, dies zu erreichen, aber wir schlagen vor, dass Sie ähnliche Muster wie im Tutorial verwenden, um die folgenden Dinge zu tun:
- Fügen Sie den Tabellenüberschriften und Daten ein Padding von
0.3em
hinzu und richten Sie sie am oberen Rand ihrer Zellen aus. - Richten Sie Überschriften und Daten für Spalten mit Zahlen rechts aus.
- Richten Sie Überschriften und Daten für Spalten mit Text links aus.
- Richten Sie die Überschrift des Tabellenfußes rechts aus.
- Richten Sie die Daten des Tabellenfußes links aus.
- Fügen Sie der Tabelle einen 1px starken oberen und unteren festen Rahmen mit der Hex-Farbe
#999
hinzu. - Fügen Sie dem Fußbereich einen 1px starken oberen festen Rahmen mit der Hex-Farbe
#999
hinzu. - Entfernen Sie den Standardabstand zwischen den Rahmen der Tabellenelemente, um das erwartete Ergebnis zu erzielen.
- Streifen Sie jede ungerade Zeile der Haupttabelle mit der Hex-Farbe
#eee
.
Versuchen Sie, den Live-Code unten zu aktualisieren, um das fertige Beispiel nachzubilden:
Zusätzliche Frage:
- Was können Sie tun, um das Tabellenlayout etwas vorhersehbarer zu machen? Denken Sie daran, wie Tabellenspalten standardmäßig dimensioniert werden und wie wir dieses Verhalten ändern können, um die Spalten entsprechend der Breite ihrer Überschriften zu dimensionieren.
Laden Sie den Ausgangspunkt für diese Aufgabe herunter, um in Ihrem eigenen Editor oder einem Online-Editor zu arbeiten.