Przedstawiono kod tabeli 3x2. Której z modyfikacji w jej drugim wierszu należy dokonać, aby tabela wyglądała jak na obrazku z niewidocznym wierszem? <table>
<tr>
<td style="border: solid 1px;">Komórka 1</td>
<td style="border: solid 1px;">Komórka 2</td>
</tr>
<tr>
<td style="border: solid 1px;">Komórka 3</td>
<td style="border: solid 1px;">Komórka 4</td>
</tr>
<tr>
<td style="border: solid 1px;">Komórka 5</td>
<td style="border: solid 1px;">Komórka 6</td>
</tr>
</table>
Na obrazku drugi wiersz jest niewidoczny, ale zostało po nim puste miejsce – między wierszem z komórkami 1 i 2 a wierszem z komórkami 5 i 6 widać wyraźną lukę. Dokładnie tak działa visibility: hidden: element przestaje być widoczny, lecz nadal zajmuje swoje miejsce w układzie, więc nic się nie przesuwa. Reguła do zapamiętania: visibility steruje samą widocznością, a display decyduje o tym, czy element w ogóle bierze udział w przepływie dokumentu. Stąd prosty sposób rozpoznania na egzaminie: jeśli po ukryciu zostaje pusta przestrzeń, to visibility: hidden; jeśli sąsiednie elementy przesuwają się na zwolnione miejsce, to display: none. Ta sama różnica dotyczy nie tylko wierszy tabeli, ale każdego elementu HTML.
Klucz rozstrzyga tu obrazek, nie sama nazwa właściwości. Wiersz z komórkami 3 i 4 zniknął, ale pozostawił po sobie pustą przestrzeń – wiersze 5 i 6 nie przesunęły się w górę. Zapis display: none usuwa element z przepływu dokumentu, więc tabela skurczyłaby się o wysokość tego wiersza i luki by nie było; to najczęstsza pomyłka w tym zadaniu, bo obie właściwości potocznie „ukrywają” element. Wartość clear: none nie ma z ukrywaniem nic wspólnego – dotyczy opływania elementów wypozycjonowanych przez float i jest wartością domyślną, więc niczego nie zmienia. Z kolei display: table-cell nie ukrywa wiersza, a przeciwnie: każe mu zachowywać się jak komórka tabeli, co zwykle rozsypuje układ. Szukanego efektu – ukrycia z zachowaniem miejsca – daje tylko visibility: hidden.