Struktura tabeli: <table>, <tr>, <td>, <th>

Struktura tabeli: <table>, <tr>, <td>, <th>

Tabele w HTML składają się z kilku podstawowych elementów, które razem tworzą siatkę komórek. Nawet prosta tabela musi mieć odpowiednią strukturę, aby była prawidłowo odczytana przez przeglądarkę i czytniki ekranowe.

Poniżej omówimy każdy element, z którego składa się tabela HTML.

1. Znacznik <table>

Znacznik <table> otacza całą strukturę tabeli. To główny kontener, wewnątrz którego umieszczasz wszystkie inne elementy (wiersze, komórki, nagłówki).

Przykład podstawowy:

<table>
  ... tutaj wiersze i komórki ...
</table>

2. Znacznik <tr> – Table Row (wiersz tabeli)

Znacznik <tr> oznacza wiersz w tabeli. Każdy wiersz zawiera komórki z danymi lub nagłówkami.

Przykład podstawowy:

<table>
  <tr>
    ... tutaj komórki danych lub nagłówków ...
  </tr>
</table>

3. Znacznik <td> – Table Data (komórka danych)

<td> oznacza pojedynczą komórkę tabeli, która zawiera dane. Umieszczamy ją wewnątrz wiersza <tr>.

Przykład podstawowy:

<table>
  <tr>
    <td>Pierwsza komórka</td>
    <td>Druga komórka</td>
  </tr>
</table>

Efekt działania:

4. Znacznik <th> – Table Header (komórka nagłówka)

<th> działa podobnie do <td>, ale służy do tworzenia nagłówków kolumn lub wierszy. Domyślnie tekst wewnątrz <th> jest pogrubiony i wyśrodkowany.

Przykład podstawowy:

<table>
  <tr>
    <th>Produkt</th>
    <th>Cena</th>
  </tr>
  <tr>
    <td>Laptop</td>
    <td>3000 zł</td>
  </tr>
</table>

Efekt działania:

5. Przykład kompletnej, prostej tabeli

<table>
  <tr>
    <th>Imię</th>
    <th>Nazwisko</th>
    <th>Wiek</th>
  </tr>
  <tr>
    <td>Anna</td>
    <td>Kowalska</td>
    <td>28</td>
  </tr>
  <tr>
    <td>Jan</td>
    <td>Nowak</td>
    <td>35</td>
  </tr>
</table>

Efekt działania:

6. Dodatkowe elementy (opcjonalne)

W bardziej zaawansowanych tabelach możesz również używać znaczników:

• <caption> – tytuł tabeli (umieszczany nad tabelą).
• <thead>, <tbody>, <tfoot> – podział tabeli na nagłówek, ciało i stopkę.

Te elementy poznamy później w ramach zaawansowanych lekcji.

✅ Podsumowanie

• <table> – kontener całej tabeli.
• <tr> – wiersz tabeli.
• <td> – komórka danych w wierszu.
• <th> – komórka nagłówka w wierszu, domyślnie pogrubiona i wyśrodkowana.

🎯 Ćwiczenie w JSFiddle

Przetestuj swój kod w JSFiddle.

Wklej poniższy kod w sekcji HTML:

<table>
  <tr>
    <th>Kraj</th>
    <th>Stolica</th>
    <th>Populacja</th>
  </tr>
  <tr>
    <td>Polska</td>
    <td>Warszawa</td>
    <td>38 mln</td>
  </tr>
  <tr>
    <td>Niemcy</td>
    <td>Berlin</td>
    <td>83 mln</td>
  </tr>
</table>

Kliknij Run i zobacz, jak wygląda Twoja pierwsza tabela!