Tabele#

Struktura tabeli#

Definicja tabeli została znacznie rozwinięta w stosunku do pierwszych definicji z wczesnych etapów rozwoju HTML. W związku z tym wyróżnia się dwa modele tabel - starszy prosty i nowszy złożony:

Szkielet prosty#

  1. L
  2. K
  3. T'
  4. T
  5. A
  6. O
  7. Z'
  8. Z
  9. #
<table>
	<caption>...</caption>
	<tr>
		<th>...</th>
		<td>...</td>
		<td>...</td>
	</tr>
	<tr>
		<th>...</th>
		<td>...</td>
		<td>...</td>
	</tr>
</table>

gdzie w miejsce kropek należy wpisać treść poszczególnych komórek tabeli.

Najprostsza tabela składa się z z elementu table oraz komórek td (table data) i th (table header) pogrupowanych w wiersze (rzędy) tr (table row). W tabelach (x)HTML nie ma elementów tworzących kolumny. Możliwe jest dodanie nowych kolumn (poprzez wpisanie dodatkowych znaczników <td>...</td>) lub wierszy (znaczniki <tr>...</tr>). Należy przy tym zauważyć, że komórki tabeli (<td>...</td>) znajdują się wewnątrz znacznków wierszy (<tr>...</tr>). Liczba komórek w każdym wierszu powinna być taka sama.

Przykładowa tabela

Rysunek. Przykładowa tabela

Zwracam uwagę, że w obrębie tabeli tekst i inne elementy można wstawiać tylko wewnątrz znaczników komórek i ewentualnie tytułu tabeli, a nie poza nimi. Poza obrębem tych znaczników można umieszczać tylko ściśle określone elementy, które zostaną szczegółowo opisane. Poniższy przykład jest nieprawidłowy:

  1. L
  2. K
  3. T'
  4. T
  5. A
  6. O
  7. Z'
  8. Z
  9. #
<table>
	treść
	<tr>
		<strong><td></td></strong>
		<td>...</td>
	</tr>
	<tr>
		<strong><td>...</td>
		<td>...</td></strong>
	</tr>
	<br>
</table>

Prosty przykład:

  1. L
  2. K
  3. T'
  4. T
  5. A
  6. O
  7. Z'
  8. Z
  9. #
<table>
	<tr>
		<td>komórka1</td>
		<td>komórka2</td>
		<td>komórka3</td>
	</tr>
	<tr>
		<td>komórka4</td>
		<td>komórka5</td>
		<td>komórka6</td>
	</tr>
	<tr>
		<td>komórka7</td>
		<td>komórka8</td>
		<td>komórka9</td>
	</tr>
</table>

Efekt:

komórka1komórka2komórka3
komórka4komórka5komórka6
komórka7komórka8komórka9

Jak widać, domyślne tabele mają niewiele stylów formatujących (np. brak obramowania), dlatego są mało czytelne. Należy samodzielnie zadbać o ich aspekt wizualny (najlepiej przy użyciu CSS).

Przypominam, że wcięcia (spacje, tabulatory) przed elementami (X)HTML są dobrowolne. Dlatego wszystkie polecenia tabeli można zapisać w jednej linii. Najlepiej jednak tworzyć kod tak, by był jak najbardziej czytelny.

Szkielet złożony#

  1. L
  2. K
  3. T'
  4. T
  5. A
  6. O
  7. Z'
  8. Z
  9. #
<table>
	<thead>
		<caption>...</caption>
		<tr>
			<th>...</th>
			<td>...</td>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<th>...</th>
			<td>...</td>
		</tr>
	</tfoot>
	<tbody>
		<tr>
			<td>...</td>
			<td>...</td>
		</tr>
	</tbody>
</table>

Podobnie jak cały dokument (X)HTML, także i tabele mogą posiadać sekcje - część nagłówkową (thead), część główną (tbody) i stopkę (tfoot). Elementy te są przydatne przy określaniu wyglądu i wyświetlaniu tabeli.

Element tfoot musi być zdefiniowanny w tabeli przed tbody, tzn. zaraz na początku - po thead. Umieszczenie stopki na końcu tabeli jest błędem. Ma to na celu ułatwienie renderowania tabeli, zanim wczytaja się jej wszystkie wiersze.

Gdy komórek w tbody jest więcej, to zarówno część nagłówkowa jak i stopka tabeli powinny mieć albo tyle samo komórek w wierszu, albo zastosowany odpowiedni atrybut (colspan="x"). W tabeli może być tylko jeden element thead i tfoot, elementów tboody może być dowolna ilość.

Termin "nagłówek" odnieść można do kilku innych funkcji: nagłówek kolumn i wierszy (element th), podział treści dokumentu (element hx), nagłówek w szkielecie dokumentu (element head) oraz nagłówki wysyłane przez serwer. Są to osobne zagadnienia i nie należy ich mylić ze sobą.

Kompleksowy szkielet tabeli najczęściej stosowany jest w przypadku rozległych struktur danych, które nie mieszczą się w całej postaci na ekranie monitora (lub stronie do druku). Wydzielenie nagłówka i stopki pozwala wyświetlić na ekranie (i drukować) zawarte w nich informacje, gdy tabela przekracza wielkością ekran czy stronę druku. Przewijana jest tylko główna część tabeli (dane), a informacje nagłówka i stopki pozostają cały czas widoczne. Analogicznie, gdybyśmy drukowali większą tabelę, która nie mieści się na jednej stronie druku, nagłówek i stopka tabeli będą drukowane na każdej stronie, a zmieniać się będą oczywiście dane zawarte w ciele tabeli (tbody).

Wszystkie wiodące przeglądarki nie interpretują w należyty sposób nagłówka i stopki tabeli. Wyświetlają jedynie poprawnie kolejne części tabeli (bez stale widocznych thead i tfoot).

Przykład złożonej tabeli umieszczony został na specjalnej stronie testowej, gdzie zawarto sporą ilość danych.

Pasek społecznościowy

SPIS TREŚCI AKTUALNEJ STRONY

Tabele (H1) Struktura tabeli (H2) Szkielet prosty (H3) Szkielet złożony (H3)