Tabele w HTML

1. Czym jest tabela w HTML?

Tabela w HTML służy do przedstawiania danych w układzie wierszy i kolumn. Może przypominać tabelę w Excelu — składa się z komórek, które tworzą uporządkowaną strukturę.

Tabele są używane m.in. do:

• przedstawiania danych liczbowych,
• zestawień,
• harmonogramów,
• list porównawczych.

2. Podstawowe znaczniki tabel

Do budowy tabel HTML używa się kilku podstawowych elementów:

3. Najprostsza tabela — przykład

Co tu się dzieje?

• <table> – początek tabeli,
• <tr> – pierwszy wiersz tabeli (nagłówki),
• <th> – nagłówki kolumn,
• kolejne <tr> + <td> – dane użytkowników.

4. Różnica: <th> vs <td>

<th> — nagłówek tabeli

• Używany w pierwszym wierszu lub pierwszej kolumnie.
• Domyślnie jest pogrubiony i wyśrodkowany (zachowanie przeglądarki, nie styl!).
• Oznacza dane nagłówkowe.

<td> — zwykła komórka z danymi

Przykład:

5. Sekcje tabeli — thead, tbody, tfoot

W większych tabelach warto używać semantycznych sekcji:

Nie wpływa to na wygląd — tylko na strukturę i czytelność.

Przykład:

6. Łączenie komórek — colspan i rowspan

Czasem potrzebujemy, by jedna komórka zajmowała kilka kolumn lub wierszy.

6.1. Łączenie kolumn: colspan

6.2. Łączenie wierszy: rowspan

Przykład łączony:

7. Element dodatkowy: podpis tabeli (caption)

Dodaje tytuł nad tabelą.

8. Struktura tabeli od podstaw – krok po kroku

Zaczynamy od <table>

Dodajemy wiersz <tr>

Wstawiamy komórki <th> lub <td>

Zamykamy wiersz i tabela rośnie

9. Dostępność tabel (bez CSS)

Dla screen readerów i poprawnej semantyki:

Używaj scope

• scope="col" → nagłówek kolumny
• scope="row" → nagłówek wiersza

Dodawaj podpis (caption) lub summary (historyczne, rzadko używane)

10. Podsumowanie najważniejszych znaczników