Kwalifikacja: INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych

W tym zadaniu kluczowe jest rozróżnienie dwóch atrybutów HTML: colspan i rowspan. Oba służą do scalania komórek w tabeli, ale działają w zupełnie różnych kierunkach. Colspan łączy komórki w poziomie, czyli wzdłuż kolumn, natomiast rowspan scala komórki w pionie, wzdłuż wierszy. Na ilustracji widać, że „komórka1+3” zajmuje całą pierwszą kolumnę w dwóch pierwszych wierszach. To oznacza, że jedna komórka rozciąga się na dwa wiersze, a nie na dwie kolumny. Stąd logicznie wynika, że użycie colspan w ogóle nie pasuje do tej sytuacji. Gdybyśmy wpisali <td colspan="2">, przeglądarka potraktowałaby tę komórkę jako rozciągającą się na dwie kolumny w jednym wierszu. Efekt byłby taki, że komórki z drugiej kolumny zostałyby przesunięte, a układ z obrazka zupełnie by się rozjechał. Z kolei wartość colspan="3" w dwukolumnowej tabeli jest po prostu nielogiczna: próbujemy zająć trzy kolumny, gdy istnieją tylko dwie. W praktyce takie nadmiarowe wartości często kończą się chaotycznym renderowaniem tabeli, bo przeglądarka stara się „naprawić” błędny kod. Zostaje jeszcze rowspan z wartością 3. To też nie pasuje do przykładu, bo nasza scalona komórka obejmuje tylko dwa wiersze, nie trzy. Ustawienie rowspan="3" spowodowałoby, że komórka próbowałaby zająć miejsce również w trzecim wierszu, co zaburzyłoby pozycję „komórki5”. Typowym błędem myślowym jest mylenie liczby kolumn z liczbą wierszy: wiele osób patrzy na liczbę pól, które wizualnie wydają się połączone, i automatycznie wybiera colspan, bo kojarzy im się to z „większą szerokością”. Tymczasem trzeba zawsze zadać sobie jedno proste pytanie: czy komórka ma być szersza (więcej kolumn – colspan), czy wyższa (więcej wierszy – rowspan). W tym zadaniu odpowiedź jest jednoznaczna: chodzi o połączenie komórek pionowo w dół, więc poprawne może być tylko rowspan z wartością równą liczbie wierszy, które faktycznie zajmuje scalona komórka, czyli 2.