KWALIFIKACJA INF3 - STYCZEŃ 2019

PYTANIE NR 9.
Przedstawiono kod tabeli 3×2.Której modyfikacji w jej drugim wierszu należy dokonać, aby tabela wyglądała jak na obrazie z niewidocznym wierszem?
Ilustracja przedstawia fragment kodu HTML, który definiuje tabelę o wymiarach 3x2.
A.
B.
C.
D.
Wyjaśnienie poprawnej odpowiedzi:
Wiersz z ustawieniem <tr style="visibility: hidden"> staje się niewidoczny, ale nadal zajmuje miejsce w układzie tabeli, więc tabela wygląda jak z "pustym" (ukrytym) wierszem.
display: none usuwa wiersz z układu, a pozostałe wartości nie służą do ukrywania wiersza.

Pełne wyjaśnienie:

W tabelach HTML wiersz jest tworzony przez element <tr>. Aby uzyskać efekt "niewidocznego wiersza" (czyli takiego, którego nie widać, ale którego miejsce w tabeli pozostaje), stosuje się właściwość CSS visibility ustawioną na hidden.

Ustawienie visibility: hidden powoduje, że element nie jest rysowany (nie widać jego treści ani obramowań), ale nadal uczestniczy w układzie. W praktyce w tabeli oznacza to, że wysokość wiersza i siatka tabeli pozostają, a użytkownik widzi "pusty" pas odpowiadający temu wierszowi.

Pozostałe propozycje są niepoprawne w tym kontekście:

  • <tr style="display: none"> – usuwa wiersz z układu (layout). W efekcie tabela "zwinie się", a pozostałe wiersze przesuną się, więc nie będzie wrażenia istnienia ukrytego wiersza.
  • <tr style="clear: none"> – właściwość clear dotyczy opływania elementów pływających (float) i nie służy do ukrywania wierszy tabel.
  • <tr style="display: table-cell"> – table-cell odpowiada komórce (<td>/<th>), a nie wierszowi; dodatkowo nie jest to mechanizm ukrywania.

Wskazówka egzaminacyjna: zapamiętaj różnicę "visibility ukrywa, ale zostawia miejsce", a "display usuwa z układu". W pytaniach o tabele ta różnica jest szczególnie widoczna, bo zmienia się wysokość i geometria siatki.

Dodatkowe pytania

Dodatkowe pytania (FAQ):
visibility: hidden ukrywa element wizualnie, ale pozostawia dla niego miejsce w układzie. Dla wiersza <tr> oznacza to, że wiersz jest niewidoczny, lecz jego wysokość nadal wpływa na wygląd tabeli.
display: none wyłącza element z renderowania i z obliczania układu (layout). W tabeli powoduje to "zniknięcie" całego wiersza bez pozostawienia pustego miejsca, więc pozostałe wiersze przesuwają się.
visibility: hidden: element niewidoczny, ale zajmuje miejsce.
display: none: element niewidoczny i usunięty z układu. Ta różnica jest kluczowa w tabelach, bo wpływa na wysokość i położenie wierszy.
Tak, ale zależy od stylowania. Możesz ukryć treść (np. przez kolor tekstu lub przez ukrycie elementów wewnątrz komórek), a obramowanie zostawić. visibility: hidden ukrywa też obramowanie danego elementu.
Najczęściej używa się visibility: hidden na <tr>, bo wiersz pozostaje w układzie. Dzięki temu tabela zachowuje swoją geometrię, a użytkownik widzi "pusty" wiersz w miejscu ukrytego.
Właściwość clear dotyczy zachowania elementu względem elementów pływających (float) i kontroluje "opływanie". Nie jest to mechanizm ukrywania elementów, więc nie spowoduje niewidoczności wiersza tabeli.
To ustawienie odpowiada semantyce komórki tabeli, czyli elementom typu <td> lub <th>. Dla <tr> jest to nieadekwatne i nie rozwiązuje problemu ukrywania wiersza; może też prowadzić do nieprzewidywalnych efektów układu.
Gdy chcesz, aby element był niewidoczny, ale układ strony pozostał stabilny (bez "przeskoków"). W tabelach oznacza to zachowanie wysokości wiersza i siatki. To bywa przydatne w interfejsach i w podglądach danych.
Najczęstsza pułapka to mylenie "ukrycia" z "usunięciem z układu": uczniowie automatycznie wybierają display: none, choć pytanie wymaga zachowania miejsca. Druga pułapka to stosowanie właściwości niezwiązanych z widocznością (np. clear).
W narzędziach deweloperskich przeglądarki zaznacz <tr> i sprawdź w panelu stylów (Computed/Styles) wartości visibility oraz display. Przy display:none element zwykle nie ma "box model" w układzie, a przy visibility:hidden miejsce pozostaje.
info

To pytanie poprawnie rozwiązuje 60% zdających egzamin. średnie

Źródła:

  • MDN Web Docs: CSS visibility — https://developer.mozilla.org/en-US/docs/Web/CSS/visibility (accessed 2026-02-27)
  • MDN Web Docs: CSS display — https://developer.mozilla.org/en-US/docs/Web/CSS/display (accessed 2026-02-27)
  • MDN Web Docs: HTML element &lt;tr&gt; — https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr (accessed 2026-02-27)

Materiały:

  • Dokumentacja MDN: CSS visibility i CSS display
  • Ćwiczenia praktyczne: porównanie efektów visibility:hidden i display:none na tabeli HTML
  • Kurs podstaw HTML/CSS (sekcja: tabele i model renderowania)

Aktualizacja pytania: 31.03.2026



Aktualizacja pytania: 31.03.2026
📡 Brak połączenia internetowego