Zadanie - plansza Sudoku

Wyjaśnienie nth:child() -> KLIKNIJ TUTAJ <-

Waszym zadaniem jest stworzenie planszy Sudoku przy użyciu HTML i CSS. Plansza ta powinna spełniać poniższe wymagania:

Wymagania:
Struktura tabeli:

Plansza Sudoku ma mieć formę tabeli o wymiarach 9×9 pól.

Tabela powinna zawierać numerację wierszy i kolumn:

Nad pierwszym wierszem umieść numerację od 1 do 9, która będzie odpowiadała numerom kolumn.

W pierwszej kolumnie każdego wiersza umieść numerację od 1 do 9, która będzie odpowiadała numerom wierszy.

Numery w wierszach i kolumnach mają znajdować się poza właściwą planszą Sudoku (stanowić numerację pomocniczą).

Kolorowanie pól:

Każde z pól Sudoku (czyli właściwa plansza o wymiarach 9×9) powinno być pokolorowane. Użyj różnych delikatnych kolorów dla poszczególnych komórek, aby pola się od siebie różniły.

Możecie wykorzystać różne odcienie pastelowe (np. różowy, zielony, niebieski, żółty, fioletowy, czerwony itp.).

Numeracja wierszy i kolumn nie musi być kolorowana – może być szara lub w innym neutralnym kolorze.
Odróżnienie sekcji 3×3:

Plansza Sudoku jest podzielona na 9 kwadratów o wymiarach 3×3, które powinny być wyraźnie widoczne dzięki pogrubionym liniom:

Zastosuj pogrubione linie między kwadratami 3×3 zarówno poziomo, jak i pionowo, aby wyróżnić te sekcje.

Pamiętajcie, że pogrubione linie powinny dotyczyć wyłącznie pól w obrębie planszy Sudoku, a nie numeracji wierszy i kolumn.

Estetyka:

Zadbaj o estetyczny wygląd planszy. Pola powinny być kwadratowe (różnej wielkości się nie akceptuje).

Numeracja wierszy i kolumn powinna być czytelna, wyróżniona od planszy Sudoku, ale nie powinna kolidować z pogrubionymi liniami oddzielającymi kwadraty 3×3.

Dodatkowe informacje:

Zadanie wymaga umiejętności pracy z tabelami w HTML oraz precyzyjnej stylizacji w CSS.

Zastosuj border-collapse w tabeli, aby zapewnić, że granice między polami będą miały odpowiednią grubość i nie będą się dublować.

W zadaniu nie jest wymagane wypełnianie pól liczbami – chodzi jedynie o stworzenie planszy z wyraźnymi sekcjami i kolorowaniem.

Przykładowy widok planszy:

Numeracja od 1 do 9 nad planszą.

Numeracja od 1 do 9 w pierwszej kolumnie (z lewej).

Pogrubione linie oddzielające kwadraty 3×3.

Kolorowane pola Sudoku.

Wasze zadanie polega na napisaniu odpowiedniego kodu HTML i CSS, który spełnia powyższe wymagania. Poniżej przykładowy efekt końcowy: