KURS HTML - TABELE

Przykład tabeli HTML:

Imię	Nazwisko	Punkty
Jill	Smith	50
Eve	Jackson	94
John	Doe	80
Adam	Johnson	67

---

Spróbuj sam - Przykłady

Tabele
Jak tworzyć tabele w dokumencie HTML.
(Więcej przykładów znajdziesz na dole tej strony).

---

Tabele HTML

Tabele są definiowane za pomocą znacznika <table>.
Tabela jest podzielona na wiersze (znacznik <tr>), a każdy wiersz jest podzielony na komórki (znacznik <td>) . <td> oznacza "dane tabeli" i przechowuje zawartość komórki. Znacznik <td> może zawierać tekst, linki (hiperłącza),obrazki, listy, formularze, inne tabele, itd.

Przykład tabeli

<table border="1">
<tr>
<td>wiersz 1, komórka 1</td>
<td>wiersz 1, komórka 2</td>
</tr>
<tr>
<td>wiersz 2, komórka 1</td>
<td>wiersz 2, komórka 2</td>
</tr>
</table>

Oto jak wygląda powyższy kod HTML w przeglądarce:

wiersz 1, komórka 1	wiersz 1, komórka 2
wiersz 2, komórka 1	wiersz 2, komórka 2

---

Tabele HTML i atrybut border (obramowanie)

Jeśli nie użyjesz atrybutu border, tabela wyświetli się bez obramowania. Czasami może to być użyteczne, ale w większości przypadków, chcemy aby tabela miała obramowanie.
Żeby wyświetlić tabelę z obramowaniem użyj atrybutu border:

<table border="1">
<tr>
<td>Wiersz 1, komórka 1</td>
<td>Wiersz 1, komórka 2</td>
</tr>
</table>

---

Nagłówki tabeli HTML

Nagłówki w tabeli definiowane są za pomocą znacznika <th>.
Większość popularnych przeglądarek wyświetla pogrubiony i wycentrowany tekst wewnątrz <th>.

<table border="1">
<tr>
<th>Nagłówek 1</th>
<th>Nagłówek 2</th>
</tr>
<tr>
<td>wiersz 1, komórka 1</td>
<td>wiersz 1, komórka 2</td>
</tr>
<tr>
<td>wiersz 2, komórka 1</td>
<td>wiersz 2, komórka 2</td>
</tr>
</table>

How the HTML code above looks in your browser:

Nagłówek 1	Nagłówek 2
wiersz 1, komórka 1	wiersz 1, komórka 2
wiersz 2, komórka 1	wiersz 2, komórka 2

---

Więcej przykładów

Tabele bez obramowania
Jak stworzyć tabele bez obramowania.
Nagłówki tabeli
Jak stworzyć nagłówki tabeli.
Tabela z opisem
Jak dodać opis do tabeli.
Komórki które zajmują więcej niż jeden wiersz czy kolumnę
Jak zdefiniować komórki tabeli, które zajmują więcej niż jeden wiersz czy kolumnę.
Znaczniki wewnątrz tabeli
Jak wyświetlić elementy wewnątrz innych elementów.
Dopełnienie komórek
Jak użyć atrybutu cellpadding żeby stworzyć więcej wolnej przestrzeni pomiędzy zawartością komórki a jej obramowaniem.
Rozstaw komórek
Jak użyć atrybutu cellspacing żeby zwiększyć odległość pomiędzy komórkami.

---

Znaczniki tabeli HTML

Znacznik	Opis
<table>	Definiuje tabelę
<th>	Definiuje komórkę-nagłówek w tabeli
<tr>	Definiuje wiersz w tabeli
<td>	Definiuje komórkę w tabeli
<caption>	Definiuje opis do tabeli
<colgroup>	Określa jedną lub grupę kolumn do formatowania
<col>	Określa właściwości każdej kolumny wewnątrz elementu <colgroup>
<thead>	Grupuje zawartość nagłówków w tabeli
<tbody>	Grupuje zawartość ciała w tabeli
<tfoot>	Grupuje zawartość stopki w tabeli