Tabele

W tym rozdziale dowiesz się...

Struktura tabeli

<table>
<tr>
	<td>...</td>	<td>...</td>
</tr>
<tr>
	<td>...</td>	<td>...</td>
</tr>
</table>
Jest to najprostsza tabela, gdzie:
<table>...</table>
jest znacznikiem tabeli
<tr>...</tr>
jest znacznikiem wiersza
<td>...</td>
jest znacznikiem pojedynczej komórki
W miejsce kropek należy wpisać treść poszczególnych komórek tabeli.

Powyższe polecenia tworzą tabelę, złożoną z dwóch kolumn i dwóch wierszy (razem cztery komórki). Jeśli to konieczne, 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.

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 w tym rozdziale. Zatem poniższy kod będzie nieprawidłowy:

<table>
Tabela...
<tr>
	<b><td>...</td></b>	<td>...</td>
</tr>
<br>
<tr>
	<b><td>...</td>	<td>...</td></b>
</tr>
<br>
</table>

Edytory HTML posiadają często specjalny generator tabel, który może ułatwić i znacznie przyspieszyć pracę. Niestety edytory tekstowe zwykle nie pozwalają na powtórną edycję kodu, tzn. raz wstawioną tabelę, można modyfikować już tylko ręcznie. Wady tej nie posiadają edytory graficzne (np.: FrontPage).

Przykład:

Po wpisaniu:

<table>
<tr>
	<td>komórka1</td>	<td>komórka2</td>
</tr>
<tr>
	<td>komórka3</td>	<td>komórka4</td>
</tr>
</table>

Otrzymamy:

komórka1komórka2
komórka3komórka4

Jak widać, taka tabela nie ma obramowania, dlatego jest mało czytelna. O tym, jak dodać obramowanie do tabeli, możesz przeczytać w sekcji CSS.

Dla większej czytelności kodu można umieścić każdy znacznik <td> w nowej linii. Jest to przydatne zwłaszcza w przypadku dość obszernej treści w komórkach. Powyższa tabela jest równoznacza z:

<table>
<tr>
	<td>komórka1</td>
	<td>komórka2</td>
</tr>
<tr>
	<td>komórka3</td>
	<td>komórka4</td>
</tr>
</table>

Oczywiście wcięcia w tekście nie są obowiązkowe, ale zwiększają przejrzystość kodu. Dzięki takiemu sposobowi zapisu, tworzenie i modyfikacja tabeli może przebiegać dużo sprawniej. Na tej stronie w większości została użyta pierwsza metoda wpisywania znaczników, w Internecie najczęściej spotyka się drugą z ewentualnymi dodatkowymi wcięciami przez znacznikami <tr> i </tr>. Możesz oczywiście opracować również własną metodę. Wybierz tą, która najbardziej Ci odpowiada i stosuj ją konsekwentnie.


Rozmiar i wielkość czcionki (oraz jej rodzaj w Netscape 6) zdefiniowane poza tabelą mogą nie mieć wpływu na tekst wewnątrz niej!

Aby to zmienić, należy zdefiniować w każdej komórce osobno rozmiar czcionki. Jednak lepszym rozwiązaniem jest wstawienie w nagłówku dokumentu:

<style>
td { font-size: wielkośćpx; color: kolor; font-family: rodzaj }
</style>
wielkość
Rozmiar tekstu w tabeli podany w pikselach
kolor
Barwa czcionki
rodzaj
Wybrany krój czcionki (potrzebne w Netscape 6)

Komórki nagłówkowe

  1. Nagłówek poziomy
    <table>
    <tr>
    	<th>...</th>	<th>...</th>
    </tr>
    <tr>
    	<td>...</td>	<td>...</td>
    </tr>
    <tr>
    	<td>...</td>	<td>...</td>
    </tr>
    </table>
  2. Nagłówek pionowy
    <table>
    <tr>
    	<th>...</th>	<td>...</td>	<td>...</td>
    </tr>
    <tr>
    	<th>...</th>	<td>...</td>	<td>...</td>
    </tr>
    </table>
  3. Nagłówek mieszany
    <table>
    <tr>
    	<th></th>	<th>...</th>	<th>...</th>
    </tr>
    <tr>
    	<th>...</th>	<td>...</td>	<td>...</td>
    </tr>
    <tr>
    	<th>...</th>	<td>...</td>	<td>...</td>
    </tr>
    </table>

Komórkę nagłówkową <th>...</th> wstawia się tak samo jak zwykłą komórka tabeli <td>...</td>. Różni się jedynie tym, że tekst do niej wpisany, jest napisany zwykle czcionką pogrubioną oraz ustawiony na środku (wyśrodkowany). Dlatego właśnie - jak sama nazwa wskazuje - komórka taka nadaje się do tworzenia nagłówka tabeli. Może się ona znajdować w dowolnym wierszu - nie tylko w pierwszym. Dodatkowo w wierszu takim mogą się znajdować również inne zwykłe komórki <td>...</td>. Dzięki temu możemy stworzyć pionowy nagłówek, znajdujący się np. na lewym brzegu tabeli.

Chociaż identyczny efekt wizualny można uzyskać odpowiednio zmieniając wygląd zwykłych komórek tabeli (<td align="center"><b>...</b></td>), to absolutnie taka metoda nie jest zalecana. Komórki nagłówkowe <th>...</th> oprócz efektu wizualnego niosą ze sobą ważne znaczenie semantyczne.

Przykład:

AB
komórka1komórka2
komórka3komórka4

1komórka1komórka2
2komórka3komórka4

AB
1komórka1komórka2
2komórka3komórka4

Dla bardzo obszernych tabel, z dużą ilością komórek nagłówkowych, przydatne może się okazać, określenie atrybutu title="tekst" dla każdej zwykłej komórki <td>. Jako wartość tego atrybutu podajemy tekst, który powinien pojawić się na ekranie w dymku podpowiedzi, kiedy użytkownik wskaże myszką określoną komórkę tabeli. Można wpisać tam treść nagłówka, do którego należy dana komórka. Ułatwi to czytanie, jeśli komórki nagłówkowe znikną już z ekranu, z powodu zbyt długiej tabeli. Jest to bardzo przydatna funkcja zwłaszcza, jeśli tabela posiada dużo kolumn.

Przykład:

Wskaż myszką dowolną zwykłą komórkę poniższej tabeli:

AB
1komórka1komórka2
2komórka3komórka4

Przy okazji: zwróć uwagę na komórkę powyższej tabeli, która znajduje się w jej lewym-górnym rogu (na samym brzegu). Wygląda ona inaczej niż pozostałe, ponieważ nie posiada wewnętrznego obramowania. Dzieje się tak dlatego, bo nie ma tam żadnej treści. Jeśli chcemy to zmienić, należy wpisać do niej: &nbsp;. Jest to znak specjalny, oznaczający niełamliwą spację. Nie pojawi się on na ekranie, ale za to wprowadzi obramowanie do pustej komórki tabeli.

 AB
1komórka1komórka2
2komórka3komórka4

Tytuł tabeli

<table>
<caption>Tu podaj tytuł</caption>
(...)
</table>

Polecenie to stwarza Ci możliwość nadania tytułu w formie nagłówka nad bądź podpisu pod tabelą. który może być umiejscowiony na górze (domyślnie) lub na dole tabeli.

Element CAPTION musi się znajdować zaraz po znaczniku TABLE i nie może zawierać żadnych elementów blokowych!

Przykład:

To jest tytuł tabeli
komórka1komórka2
komórka3komórka4

Łączenie komórek

  1. Poziome łączenie komórek
    <table>
    <tr>
    	<td colspan="x">...</td>
    </tr>
    </table>
    gdzie "x" oznacza liczbę komórek do połączenia w poziomie.
  2. Pionowe łączenie komórek
    <table>
    <tr>
    	<td rowspan="y">...</td>
    </tr>
    </table>
    gdzie "y" oznacza liczbę komórek do połączenia w pionie.

Polecenie to pozwala na poziome lub pionowe łączenie komórek w tabeli, dzięki czemu jedna komórka (połączona) może się rozciągać na kilka komórek pojedynczych.

Tabela z połączonymi komórkami zawiera mniej znaczników <td>...</td>, ponieważ komórka połączona rozciąga się na kilka zwykłych pojedynczych komórek, tym samym eliminując je. Każdy atrybut colspan="x" lub rowspan="y" eleminuje n-1 komórek pojedynczych (w przyległych kolumnach lub wierszach).

Przykład:

Poziome łączenie komórek:
Dla pierwszej komórki <td colspan="2">
(druga komórka nie istnieje, ponieważ została połączona z pierwszą)

komórka1+2
komórka3komórka4

Aby otrzymać powyższą tabelę, należy wpisać:

<table>
<tr>
	<td colspan="2">komórka1+2</td>
</tr>
<tr>
	<td>komórka3</td>  <td>komórka4</td>
</tr>
</table>

Pionowe łączenie komórek:
Dla pierwszej komórki <td rowspan="2">
(trzecia komórka nie istnieje, ponieważ została połączona z pierwszą)

komórka1+3komórka2
komórka4

Aby otrzymać powyższą tabelę, należy wpisać:

<table>
<tr>
	<td rowspan="2">komórka1+3</td> <td>komórka2</td>
</tr>
<tr>
	<td>komórka4</td>
</tr>
</table>

Łączenie wierszy w grupy

<table>
<tbody>
	<tr>...</tr>
</tbody>
</table>

Łączenie wierszy w grupy umożliwia później odnoszenie się do takiej grupy jako do całości. Dzięki temu możemy nadać od razu całej grupie np. określone formatowanie za pomocą CSS.

W grupę można połączyć dowolną liczbę wierszy. W jednej tabeli może istnieć kilka grup.

Jeżeli umieścimy w tabeli przynajmniej jeden znacznik TBODY, wszystkie wiersze muszą być objęte tego typu znacznikami! Dla pozostałych komórek należy utworzyć dodatkowy znacznik TBODY, który nie musi posiadać żadnych atrybutów.

Przykład:

Po wpisaniu:

<table>
<tbody style="background-color: red">
<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>
</tbody>
<tbody>
<tr>
	<td>komórka7</td>  <td>komórka8</td>  <td>komórka9</td>
</tr>
</tbody>
</table>

otrzymamy:

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

Nagłówek i stopka

Dla tabel często również podaje się tzw. nagłówek i stopkę. Nagłówek pojawi się na szczycie tabeli, a stopka - na dole. Nagłówek tworzymy, przy użyciu: <thead>...</thead>, natomiast stopkę: <tfoot>...</tfoot>:

W tebeli powinien znajdować się tylko jeden nagłówek i jedna stopka, natomiast można tam umieścić dowolną ilość znaczników <tbody>...</tbody>.

Znacznik TFOOT musi się znajdować w tabeli przed elementem 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 wczytają się jej wszystkie wiersze.

Przykład:

<table>
<thead>
<tr>
	<th>A</th>  <th>B</th>  <th>C</th>
</tr>
</thead>
<tfoot>
<tr>
	<td>a</td>  <td>b</td>  <td>c</td>
</tr>
</tfoot>
<tbody>
<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>
</tbody>
<tbody>
<tr>
	<td>komórka7</td>  <td>komórka8</td>  <td>komórka9</td>
</tr>
<tr>
	<td>komórka10</td>  <td>komórka11</td>  <td>komórka12</td>
</tr>
<tr>
	<td>komórka13</td>  <td>komórka14</td>  <td>komórka15</td>
</tr>
</tbody>
</table>
ABC
abc
komórka1komórka2komórka3
komórka4komórka5komórka6
komórka7komórka8komórka9
komórka10komórka11komórka12
komórka13komórka14komórka15

Łączenie kolumn w grupy

Grupa kolumn

<table>
<colgroup span="x"></colgroup>
<tr>...</tr>
</table>
gdzie "x" oznacza ilość kolumn do połączenia w grupę. Jeśli całkowicie pominiemy atrybut span="...", przyjmie on domyślną wartość "1".

Łączenie kolumn w grupy umożliwia później odnoszenie się do takiej grupy jako do całości. Dzięki temu możemy nadać od razu całej grupie np. określone formatowanie za pomocą CSS.

W grupę można połączyć dowolną liczbę kolumn. W jednej tabeli może istnieć kilka grup.

Przykład:

Po wpisaniu:

<table>
<colgroup span="1" style="background-color: red"></colgroup>
<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>
</table>

otrzymamy:

komórka1komórka2komórka3
komórka4komórka5komórka6

Kolumna

Znacznik <colgroup>...</colgroup> łączy kolumny tabeli strukturalnie. Jeśli chcemy nadać dodatkowe atrybuty poszczególnym kolumnom, należy wewnątrz takiej grupy użyć znaczników <col>. Odpowiadają one za pojedynczą kolumnę, co pozwala nadać jej określone atrybuty, bez dodatkowego łączenia kolumn w grupy:

<table>
<colgroup span="3" style="background-color: green">
	<col style="background-color: red">
	<col span="2">
</colgroup>
<tr>
	<td>komórka1</td>	<td>komórka2</td>	<td>komórka3</td>	<td>komórka4</td>
</tr>
</table>

Zauważ, że formatowanie nadane pojedynczym kolumnom (<col>) nadpisuje to, które zostało określone dla grupy kolumn (<colgroup>...</colgroup>):

komórka1komórka2komórka3komórka4

UWAGA! W każdej grupie kolumn (<colgroup>...</colgroup>) musi być tyle znaczników <col>, ile wskazuje atrybut span="...", nadany całej grupie, chyba że również dla znacznika <col> nadamy ten atrybut. Nawet jeśli kolumna nie wprowadza żadnych atrybutów, musi się znaleźć na liście, w przeciwnym razie tabela zostanie błędnie wyświetlona!

Jeśli nie podamy atrybutu span="..." (dla grupy lub kolumny), zostanie przyjęta jego domyślna wartość, równa "1".

Zagnieżdżanie tabel

<table>
<tr>
	<td>
		<table>
		<tr>
			<td>...</td>
		</tr>
		</table>
	</td>
</tr>
</table>
gdzie kolorem czerwonym zaznaczono tabelę główną (nadrzędną), a kolorem zielonym tabelę wewnętrzną (podrzędną). Możliwe jest oczywiście dalsze zagnieżdżanie.

Dzięki konstrukcji zagnieżdżania tabel, możliwe jest zbudowanie wielu tabel "jedna w drugiej". Tabele wewnętrzne znajdują się w komórkach tabeli zewnętrznej.

Zauważ, że w składni polecenia powyżej, tabela podrzędna jest bardziej wcięta (przesunięta w prawo) niż nadrzędna. Nie jest to konieczne, ale bardzo ułatwia tworzenie i czytanie kodu, dlatego polecam używanie takiego sposobu wpisywania.

Przykład:

komórka1Akomórka1B
komórka1Ckomórka1D
komórka2
komórka3komórka4

Quiz

Sprawdź swoją wiedzę, nabytą w tym rozdziale, rozwiązując testowy QUIZ.