• 
  Struktura tabeli <table, tr, td>

  Jak wstawić tabelkę na stronę WWW?

• 
  Komórki nagłówkowe tabeli <th>

  Jak powinno się tworzyć nagłówek tabeli?

• 
  Tytuł tabeli <caption>

  Jak wstawić tytuł (podpis) tabeli?

• 
  Łączenie komórek tabeli <td colspan rowspan>

  W jaki sposób połączyć kilka komórek tabeli w jedną dużą?

• 
  Łączenie wierszy tabeli w grupy <thead, tbody, tfoot>

  W jaki sposób połączyć kilka wierszy tabeli w grupę funkcjonalną? Jak wydzielić nagłówek i stopkę tabeli?

• 
  Łączenie kolumn tabeli w grupy <colgroup, col>

  W jaki sposób połączyć kilka kolumn tabeli w grupę funkcjonalną?

• 
  Zagnieżdżanie tabel

  Jak stworzyć tabelę podrzędną?

• 
  Pytania i odpowiedzi

  HTML

• 
  Powtórka

  HTML

• 
  Quiz

  HTML

• 
  Ćwiczenia

  HTML

<table>
<tr>
	<td>...</td>	<td>...</td>
</tr>
<tr>
	<td>...</td>	<td>...</td>
</tr>
</table>

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.

Przykład <table, tr, td>

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:

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.

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 <th>

Dymek narzędziowy

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 <th, td title>

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

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.

<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 <caption>

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 <td colspan rowspan>

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

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ą)

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 tabeli w grupy <tbody>

<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 <tbody>

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:

Nagłówek i stopka <thead, tfoot>

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 <thead, tfoot, tbody>

<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>

Grupa kolumn <colgroup>

<table>
<colgroup span="x"></colgroup>
<tr>...</tr>
</table>

Łą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 <colgroup>

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:

Kolumna <colgroup, col>

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>

Przykład <colgroup, col>

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

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".

<table>
<tr>
	<td>
		<table>
		<tr>
			<td>...</td>
		</tr>
		</table>
	</td>
</tr>
</table>

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 <table, tr, td>

Poniżej znajdziesz wykaz najczęściej zadawanych pytań z tego rozdziału wraz ze zwięzłymi odpowiedziami i gotowymi do użycia przykładami kodu HTML. Aby sprawdzić bardziej szczegółowy opis, kliknij odnośnik "Zobacz więcej..." pod wybraną odpowiedzią.

Sprawdź, czy pamiętasz, za co odpowiadają poniższe fragmenty kodu źródłowego HTML. W razie wątpliwości kliknij odnośnik "Zobacz więcej..." pod wybraną grupą przykładów.

Jak wstawić tabelkę na stronę WWW?

<table>
<tr>
	<td>...</td>	<td>...</td>
</tr>
<tr>
	<td>...</td>	<td>...</td>
</tr>
</table>

Zobacz więcej...

Jak powinno się tworzyć nagłówek tabeli?

<table>
<tr>
	<th>...</th>	<th>...</th>
</tr>
<tr>
	<td>...</td>	<td>...</td>
</tr>
<tr>
	<td>...</td>	<td>...</td>
</tr>
</table>

<table>
<tr>
	<th>...</th>	<td>...</td>	<td>...</td>
</tr>
<tr>
	<th>...</th>	<td>...</td>	<td>...</td>
</tr>
</table>

<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>

Zobacz więcej...

Jak wstawić tytuł (podpis) tabeli?

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

Zobacz więcej...

W jaki sposób połączyć kilka komórek tabeli w jedną dużą?

<table>
<tr>
	<td colspan="x">...</td>
</tr>
</table>

<table>
<tr>
	<td rowspan="y">...</td>
</tr>
</table>

Zobacz więcej...

W jaki sposób połączyć kilka wierszy tabeli w grupę funkcjonalną? Jak wydzielić nagłówek i stopkę tabeli?

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

Zobacz więcej...

W jaki sposób połączyć kilka kolumn tabeli w grupę funkcjonalną?

<table>
<colgroup span="x"></colgroup>
<tr>...</tr>
</table>

Zobacz więcej...

Jak stworzyć tabelę podrzędną?

<table>
<tr>
	<td>
		<table>
		<tr>
			<td>...</td>
		</tr>
		</table>
	</td>
</tr>
</table>

Zobacz więcej...

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

✅ Rozpocznij quiz HTML

1. Otwórz w edytorze HTML stronę (plik index.html) stworzoną w ramach ćwiczeń z poprzedniego rozdziału.
2. Umieść na stronie tabelę. Jeżeli tworzysz stronę o sobie, może to być np. lista Twoich ulubionych filmów. W tabeli możesz umieścić następujące kolumny:
   • Gatunek
   • Tytuł filmu
   • Rok produkcji
   • Ocena (w skali od 1 do 10)
3. Odpowiednio oznacz komórki nagłówkowe tabeli za pomocą znaczników TH.
4. Oddziel nagłówek tabeli od jej właściwej zawartości za pomocą znaczników THEAD i TBODY.
5. Postaraj się, aby przynajmniej jeden gatunek zawierał kilka różnych filmów. Umieść je w wierszach bezpośrednio jeden pod drugim. Następnie połącz pionowo wszystkie komórki zawierające ten sam gatunek.

Przykładowy efekt może wyglądać następująco: