Klimatabelle erstellen

Sagt dir das Projekt CSS Zen Garden etwas? Dabei ging es 2003 darum, wie sich eine HTML-Seite nur mit CSS-Regeln völlig unterschiedlich darstellen ließ. Man wollte damals Entwickler ermutigen, CSS für mehr als nur Schriftfarben und -größe zu verwenden. Rausgekommen sind dutzende Webseiten mit immer dem gleichen Inhalt aber verblüffend unterschiedlichem Layout.

Wozu erzähle ich das? Weil die Klima-Tabelle auch nur eine ganz normale HTML-Tabelle ist, die du mit dem Block-Editor oder in Elementor mit einem AddOn (Elementor empfiehlt wohl TablePress) erstellen kannst. Interessanterweise ist die Klima-Tabelle nicht einmal richtig responsive, was du leicht prüfen kannst, wenn du in einem Desktop-Browser das Browser-Fenster immer kleiner machst. Erst wenn ein Mobilgerät erkannt wird, wird per JavaScript ein weiteres Stylesheet geladen, dass die Tabelle auf einmal ganz anders aussehen lässt – so wie die Webseiten bei CSS Zen Garden.

Eigentlich lässt sich das auch ohne JavaScript bewerkstelligen, indem du mit Media-Querys arbeitest. Bis zu einer bestimmten Pixelbreite CSS-Regel 1, danach CSS-Regel 2.

Da es den Rahmen sprengen würde, hier CSS-Grundlagen zu vermitteln, will ich auf die Lösung hier nicht weiter eingehen. Wenn es Fragen zu CSS oder Media-Querys gibt, bist du in einem CSS-Forum sicher besser aufgehoben.