Który z rysunków obrazuje efekt działania przedstawionego fragmentu kodu HTML?
Pytanie z egzaminu CKE, czerwiec 2018 (arkusz E.14-X-18.06).
Poprawny jest rysunek C. Atrybut rowspan="2" w pierwszej komórce sprawia, że komórka „pierwszy” zajmuje dwa wiersze tabeli. W pierwszym wierszu obok niej stoi „drugi”, a w drugim wierszu zdefiniowano tylko jedną komórkę, „trzeci”, która trafia do drugiej kolumny, bo pierwsza jest już zajęta przez rozciągniętą komórkę.
Do zapamiętania: rowspan scala komórki w pionie (przez wiersze), a colspan w poziomie (przez kolumny). Komórka z rowspan „rezerwuje” miejsce w kolejnych wierszach, więc w tych wierszach pisze się o jedną komórkę mniej. Ta sama zasada działa w tabelach budowanych w arkuszach egzaminacyjnych, np. przy nagłówkach grupujących kilka wierszy.
Najczęstszy błąd w tym pytaniu to pomylenie rowspan z colspan. Rysunek A pokazuje komórkę „trzeci” rozciągniętą na dwie kolumny - taki efekt dałby atrybut colspan="2" w drugim wierszu, a w kodzie go nie ma. Rysunek B przedstawia tabelę bez żadnego scalania: dwa wiersze, w drugim tylko jedna komórka pod „pierwszy”. Tak wyglądałby kod po usunięciu atrybutu rowspan.
Rysunek D umieszcza wszystkie trzy komórki w jednym wierszu, czyli ignoruje drugi znacznik <tr>. Każdy <tr> zaczyna jednak nowy wiersz tabeli. Przy takich pytaniach pomaga szkic: narysuj siatkę wierszy i kolumn, wpisz komórki po kolei i zaznacz, które pola zajmuje komórka ze scaleniem. Wtedy od razu widać, gdzie musi trafić kolejna komórka.
Atrybut border="1" tylko rysuje obramowanie, więc nie wpływa na układ komórek.