Tabelki nie są zakazane

Do czego służy znacznik <table>

W oryginalnej specyfikacji języka HTML opracowanej przez organizację W3C (World Wide Web Consortium), zajmującą się systematyzowaniem standardów internetowych, czytamy (w wolnym tłumaczeniu):

Tabele w HTML pozwalają autorowi organizować dane (tekst, tekst preformatowany, obrazki, linki, formularze, pola formularzy, inne tabele itp) w komórkach ułożonych w wierszach i kolumnach.


Jednym słowem jeśli chcemy poukładać dane równo w rzędach i kolumnach powinniśmy sięgnąć po znacznik <table> i towarzyszące mu znaczniki <tr>, <th> oraz <td>. Ponadto użycie atrybutów takich jak colspan oraz rowspan pozwala uzyskać naprawdę skomplikowane tabele, które na dodatek mogą się całkiem ładnie prezentować za sprawą stylów.

Przykład skomplikowanej tabelki
  Nagłówek scalony za pomocą colspan Pojedyncza komórka nagłowka
  nagłówek 1 nagłówek 2 nagłówek 3
nagłówek rozciągnięty poziomo komórki scalone
za pomocą rowspan
komórka komórka
komórka komórka
komórka komórka
komórka scalona jednocześnie
za pomocą colspan
i rowspan
komórka
komórka

Poniżej kod tej prostej tabelki:

<style>
	td,th{
		border: 1px solid #888;
		padding:5px;
	}
</style>

<table>
	<caption align="center">
           Przykład skomplikowanej tabelki
        </caption>
	<tr>
		<th>&nbsp;</th>
		<th colspan="2">Nagłówek scalony za pomocą colspan</th>
		<th>Pojedyncza komórka nagłowka</th>
	</tr>
	<tr>
		<th>&nbsp;</th>
		<th>nagłówek 1</th>
		<th>nagłówek 2</th>
		<th>nagłówek 3</th>
	</tr>
	<tr>
		<th rowspan="5" style="width:3em;">
                           nagłówek rozciągnięty poziomo
                </th>
		<td rowspan="3">komórki scalone<br>za pomocą rowspan</td>
		<td style="border: 1px solid red;">komórka</td>
		<td>komórka</td>
	</tr>
	<tr>
		<td>komórka</td>
		<td style="border: 2px solid #0A0;">komórka</td>
	</tr>
	<tr>
		<td style="background-color:#666; color:#fff">komórka</td>
		<td>komórka</td>
	</tr>
	<tr>
		<td colspan="2" rowspan="2">komórka scalona jednocześnie<br>
                    za pomocą colspan<br>
                    i rowspan</td>
		<td>komórka</td>
	</tr>
	<tr>
		<td style="color:blue;">komórka</td>
	</tr>
</table>

Nie będę tu opisywać jak się używa poszczególnych znaczników i atrybutów bo nie temu ma służyć ten artykuł. Można to z łatwością znaleźć w różnych kursach HTML.

Jak nie należy używać znacznika <table>

Napisałam już do czego znacznik <table> służy i pokazałam jak można go używać nawet do konstruowania dość wymyślnych tabelek. Teraz napiszę jak, moim zdaniem, nie należy go używać.

Tabelki zagnieżdżone

Właściwie to nie mam odwagi kategorycznie stwierdzić, że nie należy zagnieżdżać tabel (umieszczanie jednej tabeli w komórce innej). Nie mam aż tak bujnej wyobraźni, ale dopuszczam myśl, że wykonanie bardzo skomplikowanej tabelki za pomocą atrybutów colspan oraz rowspan może być znacznie trudniejsze niż za pomocą zagnieżdżonych tabel. Dopuszczam nawet myśl że może to być niemożliwe. Jednakże w większości wypadków daje się, a nawet należy, unikać zagnieżdżania.

Jako przykład pokażę kod tabeli, która wygląda prawie identycznie (przynajmniej jeśli chodzi o rozkład komórek) jak ta, którą zaprezentowałam powyżej, ale jest skonstruowana za pomocą zagnieżdżenia tabel. Sami zobaczcie jak obrzydliwie wygląda kod takiego tworu:

<style>
	*{margin: 0; padding: 0;}
	td,th{border: 1px solid #888;padding:5px;}
</style>
<table>
	<caption align="center">Podobna tabela wykonana metodą zagnieżdżania.</caption>
	<tr>
		<th>&nbsp;</th>
		<th>Nagłówek podwójny</th>
		<th>Nagłówek pojedynczy</th>
	</tr>
	<tr>
		<th>&nbsp;</th>
		<th style="border:none; padding:0;">
			<table>
				<tr>
					<th>Zagnieżdżona tabela o jednym wierszu</th>
					<th style="width:150px;">i dwóch kolumnach</th>
				</tr>
			</table>
		</th>
		<th>Nagłówek pojedynczy</th>
	</tr>
	<tr>
		<th style="width:3em;">nagłówek rozciągnięty poziomo</th>
		<td style="border:none; padding:0;">
			<table style="width:100%; vertical-align: top;">
				<tr>
					<td style="border:none; padding:0;">
						<table style="width:100%">
							<tr>
								<td>
                                   pierwsza kolumna tabeli 
                                   <br>zagnieżdżonej w pierwszym wierszu 
                                   <br>tabeli zagniezdżonej
                               </td>
								<td style="border:none; padding:0; width:160px;">
									<table style="width:100%">
										<tr><td>Tabela o</td></tr>
										<tr><td>czwartym poziomie</td></tr>
										<tr>
                                           <td style="background-color: #666; color: #fff">
                                               zagnieżdżenia
                                           </td>
                                        </tr>
									</table>
								</td>
							</tr>
						</table>
					</td>
				</tr>
				<tr>
					<td>drugi wiersz zagnieżdżonej tabeli<br/>&nbsp;<br/>&nbsp;</td>
				</tr>
			</table>
		</td>
		<td style="border:none; padding:0;">
			<table style="width:100%">
				<tr><td>Zagnieżdżona</td></tr>
				<tr><td style="border: 2px solid #0A0;">tabelka</td></tr>
				<tr><td>z pięcioma</td></tr>
				<tr><td>wierszami</td></tr>
				<tr><td style="color:blue;">i jedną kolumną</td></tr>
			</table>
		</td>
	</tr>
</table>

Od razu się przyznam się, że się przyłożyłam do drugiej wersji tabeli i nie zrobiłam wszystkiego co w mojej mocy, żeby w obu wersjach wyglądały one identycznie. Szczególnie wiele do życzenia pozostawia wyrównanie komórek i ich rozmiar (zobacz porównanie). Jednak łatwo sobie wyobrazić, ile dodatkowego kodu należy wyprodukować, żeby uzyskać satysfakcjonujący wygląd w przypadku zagnieżdżania tabel. Efekt z pewnością byłby odrobinę lepszy, gdyby użyć w tabelach atrybutu cellspacing="0", ale szczerze mówiąc mam wstręt do zagnieżdżonych tabel i spłodzenie tego kodu wymagało ode mnie już dość wysiłku, więc nie będę tego sprawdzać.

Layout strony

Czytając specyfikację znacznika <table> a w szczególności przytoczony przeze mnie fragment. Twórcy stron WWW doszli do wniosku, że tabele są znakomitym narzędziem za pomocą którego można łatwo zapanować nad układem strony. Pojawiły się layouty bezlitośnie pocięte na fragmenty i upakowane w tabele. Co więcej, wiele mniej lub bardziej profesjonalnych narzędzi dla webmasterów zostało wyposażonych w funkcję cięcia layoutu i pakowania do tabel. Dało się wtedy słyszeć gromki okrzyk „Hip hip hura! Tworzenie stron WWW jest banalne! Każdy może to robić”. No i zaczęli się tym zajmować wszyscy.

Tymczasem kiedy zajrzy się jeszcze raz do specyfikacji HTML w opisie tabel można znaleźć wyraźną wskazówkę (wolne tłumaczenie):

Tabele nie powinny być wykorzystywane jako środek do kontroli layoutu dokumentu, gdyż może to powodować problemy kiedy jest on interpretowany przez niektóre media (np. roboty indeksujące, przyp. aut.). Dodatkowo, tabele mogą zmuszać użytkownika do horyzontalnego przewijania strony w celu zobaczenia całego tabelkowego designu, w innej rozdzielczości niż założona przez projektanta. W celu zminimalizowania tych problemów, autor zamiast tabel powinien używać do kontrolowania layoutu stylów kaskadowych.

Do czego prowadzi szum wokół znacznika <table>?

Kiedy budowanie stron WWW w oparciu o tabele stało się już powszechną praktyką do głosu doszli obrońcy semantycznego kodu, standardów sieciowych i dostępności oraz miłośnicy kaskadowych arkuszy stylów i zaczęli krucjatę w celu obrony użytkowników internetu przed serwisami budowanymi w ten sposób. Nie zamierzam dyskutować z przedstawianymi przez nich argumentami, gdyż sama należę do tego grona. Mimochodem podam tylko linki do dwóch spośród moich ulubionych tekstów o tym dlaczego układ na tabelkach jest głupi i o tym, że da się zbudować zgrabny layout bez tabelek. Tymczasem chcę zwrócić uwagę na to jakie zjawisko zostało wywołane ciągłym powtarzaniem, mantry „układ strony w oparciu o tabele jest zły”.

Regularnie uczestniczę w życiu forum serwisu php.pl i obserwuję sytuacje plasujące się na dwóch przeciwległych biegunach tabelkowego problemu. Co jakiś czas, początkujący webmaster przedstawia do oceny swoje dzieło zbudowane, niestety, na tabelkach. Trudno się dziwić, przecież nawet przytaczany i, mimo wszystko, polecany przeze mnie kurs HTML proponuje, jako dodatkowe zastosowanie tabeli, wykorzystanie jej do kontroli layoutu strony. Komentujący taki projekt forumowicze, ja również, mówią „Obrzydlistwo. Wywal te tabelki i zrób to zgodnie ze standardami”. Niestety początkujący webmasterzy tak bardzo biorą sobie to do serca, że dla odmiany, co jakiś czas, pada na forum pytanie: „Jak zrobić tabelkę za pomocą DIVów?”. Odpowiedź rzecz jasna brzmi: „Znacznik <table> nie został zakazany i ciągle służy do prezentacji danych tabelarycznych”.

O ile jestem w stanie zrozumieć, że przytrafia się to początkującym, domorosłym webmasterom, którym czytanie dokumentacji lub zrozumienie, że należy to robić przychodzi z trudem, to nie jestem w stanie pojąć jak może się to przytrafić webmasterom, którzy tworzą poważne serwisy i biorą za to poważne pieniądze. Ku mojemu przerażeniu zajrzałam ostatnio do kodu strony Pekin 2008 w Interia.pl, bo dane z tabeli klasyfikacji medalowej jakoś dziwnie mi się kopiowały. To co zobaczyłam przyprawiło mnie o mdłości. Poniżej dla nieklikających fragment kodu „tabeli” (dociekliwi i masochiści mogą sobie sami obejrzeć całe źródło):

<div id="medalsContainer">
	<div class="row first">			
		<p class="lp">lp.</p>
		<p class="country">państwo</p>
		<p class="gold">złoto</p>
		<p class="silver">srebro</p>
		<p class="bronze">brąz</p>
		<p class="all">razem</p>			
	</div>
	<div class="row green">			
		<p class="lp">1.</p>
		<p class="country">Chiny</p>
		<p class="gold">39</p>
		<p class="silver">14</p>
		<p class="bronze">14</p>
		<p class="all">67</p>			
	</div>
	<div class="row">			
		<p class="lp">2.</p>
		<p class="country">USA</p>
		<p class="gold">22</p>
		<p class="silver">24</p>
		<p class="bronze">26</p>
		<p class="all">72</p>			
	</div>
...
</div>

Pozostawię ten kod bez komentarza i postaram się nie myśleć ile podobnych potworków można znaleźć w sieci.

5 komentarzy do wpisu „Tabelki nie są zakazane”

  1. Witam,
    moge spolszczyć dal pani/a ten szablon. To znaczy np. komentarze. Tam gdzie jest np. Mail (will not be published) (required) zrobiłbym żeby pisało po polsku. Duzo rzeczy jest na tym serwisie do spolszczenia:). Proszę o konakt pod mail podany w dodawaniu komentarza. Warunki spolszczenia ustalilibysmy po zgodzeniu się Pani/a. Zrobie to za darmo, dla własnej satysfakcji i pomocy innym, znam się na WordPress.
    Proszę o odpowiedź.

  2. Dziękuję za propozycję. Nie zrobiłam tego jeszcze z kilku powodów:
    1. Brakuje mi czasu
    2. Tworzę własny zupełnie inny szablon więc szkoda mi czasu na kosmetyczne poprawki w tym szablonie.
    Aha. Też chcę mi8eć z tego satysfakcję :)

Dodaj komentarz

%d bloggers like this: