Zacznijmy tworzyć tabele w HTML używając Notatnika!
To jak budowanie domu, tylko z kodem.
Podstawowa struktura tabeli
Każda tabela zaczyna się od znacznika <table>.
To jak ogrodzenie, które otacza cały nasz dom.
Następnie potrzebujemy wierszy. Używamy znacznika <tr>.
Wiersze to poziome linie w tabeli, podobnie jak rzędy krzeseł w kinie.
W każdym wierszu umieszczamy komórki. Używamy znacznika <td>.
Komórki to poszczególne pola w tabeli, jak pojedyncze krzesła w kinie.
Pomyśl o tym tak:
<table> – cały stół.
<tr> – rząd na stole.
<td> – talerz na stole.
Przykład:
<table>
<tr><td>Komórka 1</td><td>Komórka 2</td></tr>
<tr><td>Komórka 3</td><td>Komórka 4</td></tr>
</table>
To stworzy tabelę z dwoma wierszami i dwiema kolumnami.
Nagłówki tabeli
Czasami potrzebujemy nagłówków dla kolumn.
Używamy znacznika <th> zamiast <td> w pierwszym wierszu.
To jak napisy nad półkami w sklepie.
Przykład:
<table>
<tr><th>Imię</th><th>Nazwisko</th></tr>
<tr><td>Jan</td><td>Kowalski</td></tr>
</table>
Widać różnicę?
Nagłówki są zazwyczaj pogrubione.
Dodawanie styli do tabeli
Tabele domyślnie nie mają obramowań.
Możemy dodać je za pomocą atrybutu border w znaczniku <table>.
To jak obramowanie obrazu.
Przykład:
<table border="1">
<tr><td>Komórka 1</td><td>Komórka 2</td></tr>
<tr><td>Komórka 3</td><td>Komórka 4</td></tr>
</table>
border="1" oznacza, że obramowanie ma grubość 1 piksela.
Możemy też użyć CSS do bardziej zaawansowanego stylowania.
Łączenie komórek
Czasami chcemy, aby komórka zajmowała więcej miejsca.
Używamy atrybutów colspan i rowspan.
colspan łączy komórki w poziomie (kolumny).
To jak poszerzenie siedzenia w autobusie.
rowspan łączy komórki w pionie (wiersze).
To jak połączenie dwóch pięter w budynku.
Przykład (colspan):
<table border="1">
<tr><th colspan="2">Nagłówek</th></tr>
<tr><td>Komórka 1</td><td>Komórka 2</td></tr>
</table>
Nagłówek zajmuje teraz dwie kolumny.
Przykład (rowspan):
<table border="1">
<tr><th rowspan="2">Nagłówek</th><td>Komórka 1</td></tr>
<tr><td>Komórka 2</td></tr>
</table>
Nagłówek zajmuje teraz dwa wiersze.
Używanie Notatnika
Otwórz Notatnik.
Wpisz kod HTML tabeli.
Zapisz plik z rozszerzeniem .html.
Na przykład tabela.html.
Otwórz plik w przeglądarce.
Widzisz swoją tabelę!
Podsumowanie
Tworzenie tabel w HTML to prosta sprawa.
Pamiętaj o znacznikach <table>, <tr>, <td> i <th>.
Używaj atrybutów border, colspan i rowspan do stylizacji.
I baw się dobrze!
