Testen Sie Ihre Fähigkeiten: Tabellen

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.