Tabele w HTML

1. Element <table>

HTML oferuje wygodny sposób prezentacji danych w uporządkowanej formie za pomocą tabel. Tabele pomagają organizować informacje w szeregi wierszy i kolumn, co czyni je idealnym rozwiązaniem do przedstawienia danych liczbowych, rozkładów, cenników i innych struktur danych. Przyjrzyjmy się, jak używać podstawowych tagów do tworzenia tabel: <table>, <tr>, <td> i <th>.

Tag <table> służy jako kontener dla całej tabeli. Jest używany do oznaczenia początku i końca tabeli i zawiera wszystkie inne tagi związane z tabelą.

Przykład tworzenia tabeli z tagiem <table>:

<table>
  <!-- Tutaj znajdują się wiersze i komórki tabeli -->
</table>

Tag <table> można dodatkowo stylizować za pomocą atrybutu border, aby dodać ramkę tabeli:

<table border="1">
  <tr>
    <td>Przykładowa komórka</td>
  </tr>
</table>

Tutaj atrybut border="1" dodaje ramkę wokół tabeli i jej komórek, czyniąc je widocznymi.

2. Element <tr>

Tag <tr> oznacza wiersz tabeli (table row). Każdy wiersz tabeli powinien znajdować się wewnątrz tagu <tr>, który z kolei znajduje się w <table>.

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>

W tym przykładzie tabela składa się z dwóch wierszy. Każdy wiersz zawiera dwie komórki.

3. Element <td>

Tag <td> (table data) służy do tworzenia komórek z danymi w tabeli. Oznacza zwykłą komórkę tabeli, która może zawierać tekst, obraz lub inny HTML content.

Przykład użycia <td>:

<table border="1">
  <tr>
    <td>Komórka 1</td>
    <td>Komórka 2</td>
  </tr>
</table>

<table border="1">
  <tr>
    <td>Komórka 1</td>
    <td>Komórka 2</td>
  </tr>
</table>

Komórki <td> tworzą główną zawartość tabeli i są umieszczane wewnątrz wierszy <tr>.

4. Element <th>

Tag <th> (table header) służy do tworzenia nagłówków tabeli. Komórki tworzone za pomocą <th> są domyślnie pogrubione i wyśrodkowane. To przydatne do oznaczania nagłówków kolumn lub wierszy.

Przykład tabeli z nagłówkami:

    
<table border="1">
  <tr>
    <th>Imię</th>
    <th>Wiek</th>
  </tr>
  <tr>
    <td>Anna</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Jan</td>
    <td>30</td>
  </tr>
<table border="1">
    
  

    
<table border="1">
  <tr>
    <th>Imię</th>
    <th>Wiek</th>
  </tr>
  <tr>
    <td>Anna</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Jan</td>
    <td>30</td>
</tr>
<table border="1">
    
  

W tym przykładzie <th> jest używany do oznaczenia nagłówków „Imię” i „Wiek”, co pozwala użytkownikom szybko zrozumieć, co oznaczają dane w każdej kolumnie.