Języki programowania Programowanie

Jak zrobić tabelę w HTML – przewodnik krok po kroku

19 października 2026
Sebastian Maciejewski

Tabela w HTML przydaje się wtedy, gdy trzeba pokazać dane w układzie wierszy i kolumn: cennik, plan zajęć, wyniki, porównanie parametrów. Nie służy do budowania całego wyglądu strony, tylko do prezentacji informacji, które naprawdę mają strukturę tabelaryczną. Najważniejsze jest poprawne użycie znaczników: tabeli, wierszy, komórek i nagłówków. Dzięki temu tabela będzie czytelna nie tylko wizualnie, ale też dla czytników ekranu i wyszukiwarek. Dobrze zrobiona tabela daje się później łatwo ostylować w CSS, bez przepisywania kodu od zera.

Od czego zacząć: podstawowa budowa tabeli

W HTML tabela składa się z kilku prostych elementów. Całość zamyka się w znaczniku <table>. Każdy wiersz tworzy <tr>, a pojedyncza komórka z danymi to <td>. Jeśli komórka ma być nagłówkiem kolumny albo wiersza, używa się <th>.

Najprostsza tabela może mieć dosłownie dwa wiersze: jeden nagłówkowy i jeden z danymi. Taki zapis wystarczy, żeby przeglądarka zrozumiała układ.

<table>
  <tr>
    <th>Produkt</th>
    <th>Cena</th>
  </tr>
  <tr>
    <td>Klawiatura</td>
    <td>199 zł</td>
  </tr>
</table>

To działa, ale na tym nie warto poprzestawać. Tabela bez dodatkowej struktury szybko robi się mało czytelna, zwłaszcza kiedy danych jest więcej. Dlatego od początku dobrze budować ją tak, by dało się nią wygodnie zarządzać.

Jeśli informacja nie ma postaci relacji „wiersze kontra kolumny”, lepiej użyć listy, kart albo zwykłych bloków treści. Tabela nie zastępuje układu strony.

Jak zrobić prostą tabelę krok po kroku

  1. Dodaje się znacznik <table>, który otwiera i zamyka całą tabelę.
  2. Wewnątrz tworzy się pierwszy wiersz znacznikiem <tr>.
  3. W pierwszym wierszu wpisuje się nagłówki kolumn za pomocą <th>.
  4. Tworzy się kolejne wiersze <tr> dla danych.
  5. W każdym z tych wierszy umieszcza się komórki <td>.
  6. Na końcu sprawdza się, czy każda linia ma tę samą liczbę komórek, bo to wpływa na poprawne wyświetlanie.

Przykład z kilkoma rekordami wygląda już bardziej praktycznie:

<table>
  <tr>
    <th>Imię</th>
    <th>Stanowisko</th>
    <th>Miasto</th>
  </tr>
  <tr>
    <td>Marek</td>
    <td>Programista</td>
    <td>Kraków</td>
  </tr>
  <tr>
    <td>Adam</td>
    <td>Tester</td>
    <td>Gdańsk</td>
  </tr>
</table>

Na tym etapie najczęstszy błąd polega na mieszaniu liczby komórek. Jeśli w jednym wierszu są trzy kolumny, w kolejnym też powinny być trzy, chyba że celowo używa się łączenia komórek. W przeciwnym razie tabela zacznie się „rozjeżdżać” i trudno będzie znaleźć problem.

Drugim częstym błędem jest stosowanie <td> zamiast <th> w nagłówkach. Wizualnie czasem różnica wydaje się niewielka, ale semantycznie to ważna sprawa. Czytniki ekranu potrafią wtedy powiązać komórkę danych z właściwym nagłówkiem, a tabela staje się znacznie wygodniejsza w odbiorze.

Lepsza struktura: thead, tbody i caption

Przy większych tabelach warto od razu używać dodatkowych znaczników strukturalnych. Najczęściej są to <caption>, <thead> i <tbody>. Dzięki nim kod jest czytelniejszy, a późniejsze stylowanie w CSS staje się prostsze.

Po co dodawać caption

<caption> to tytuł tabeli. Umieszcza się go zaraz po otwarciu <table>. Nie jest to ozdobnik, tylko konkretna informacja o tym, co tabela przedstawia. Gdy na stronie pojawia się kilka tabel, taki podpis porządkuje treść i ułatwia orientację.

Dobry podpis powinien być krótki i rzeczowy. Zamiast pisać „Tabela z danymi”, lepiej wpisać „Cennik usług 2026” albo „Plan dyżurów na październik”. Wtedy już po jednym spojrzeniu wiadomo, czego dotyczą dane.

Podpis przydaje się też z punktu widzenia dostępności. Osoba korzystająca z czytnika ekranu nie musi zgadywać, czemu służy tabela, tylko od razu dostaje kontekst.

Dlaczego thead i tbody mają sens

<thead> grupuje część nagłówkową, a <tbody> właściwe dane. Przeglądarka poradzi sobie także bez nich, ale przy dłuższym kodzie łatwo się pogubić. Gdy struktura jest rozdzielona, widać od razu, gdzie kończą się nagłówki, a gdzie zaczynają rekordy.

To podejście ułatwia również stylowanie. Można osobno ustawić tło dla nagłówków, inne obramowanie dla danych albo naprzemienne kolory wierszy tylko w części z danymi, bez kombinowania z dodatkowymi klasami.

Przykład uporządkowanej tabeli:

<table>
  <caption>Cennik usług 2026</caption>
  <thead>
    <tr>
      <th>Usługa</th>
      <th>Czas</th>
      <th>Cena</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Audyt strony</td>
      <td>2 h</td>
      <td>300 zł</td>
    </tr>
    <tr>
      <td>Aktualizacja treści</td>
      <td>1 h</td>
      <td>120 zł</td>
    </tr>
  </tbody>
</table>

Jak łączyć komórki i budować bardziej złożony układ

Czasem tabela wymaga scalania komórek. Do tego służą atrybuty colspan i rowspan. Pierwszy łączy komórki w poziomie, drugi w pionie. To przydatne na przykład w harmonogramach, raportach i zestawieniach z grupami danych.

Kiedy używać colspan

colspan stosuje się wtedy, gdy jedna komórka ma zajmować kilka kolumn. Typowy przykład to nagłówek obejmujący dwa lub trzy pola poniżej. Zamiast tworzyć osobne komórki i próbować udawać jedną całość, lepiej jasno powiedzieć przeglądarce, ile kolumn ma zostać połączonych.

Przykład:

<tr>
  <th colspan="2">Dane kontaktowe</th>
</tr>

Po użyciu colspan="2" trzeba uważać na dalszy układ wiersza. Skoro jedna komórka zajęła miejsce dwóch, nie można dopisać obok jeszcze dwóch dodatkowych komórek „jakby nic się nie stało”. Właśnie tutaj najczęściej pojawiają się błędy w strukturze.

Kiedy używać rowspan

rowspan działa podobnie, ale pionowo. Jedna komórka może obejmować kilka wierszy. To przydatne wtedy, gdy kilka pozycji należy do tej samej kategorii i nie ma sensu powtarzać tej samej etykiety w każdym wierszu.

Przykład:

<tr>
  <th rowspan="2">Marketing</th>
  <td>Kampania Google Ads</td>
</tr>
<tr>
  <td>Newsletter</td>
</tr>

Przy rowspan trzeba patrzeć nie tylko na bieżący wiersz, ale też na kolejny. Jedna komórka „wchodzi” w następny rząd, więc tam będzie już mniej miejsca na nowe pola. Dobrze jest rozrysować sobie tabelę na kartce albo najpierw rozpisać liczbę kolumn, zanim zacznie się scalanie.

Im więcej łączenia komórek, tym większe ryzyko bałaganu w kodzie. Jeśli tabela robi się trudna do rozpisania, często lepiej uprościć układ niż dokładać kolejne scalenia.

Stylowanie tabeli, żeby dało się to czytać

Surowa tabela HTML działa, ale zwykle wygląda ascetycznie. Czytelność poprawia się przez dodanie kilku prostych reguł CSS: obramowania, odstępów w komórkach i wyróżnienia nagłówków. Nie trzeba od razu budować rozbudowanego systemu stylów.

Podstawowy zestaw wygląda tak:

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ccc;
  padding: 10px;
  text-align: left;
}

th {
  background: #f3f3f3;
}

border-collapse: collapse usuwa podwójne linie między komórkami, dzięki czemu tabela wygląda schludniej. padding daje oddech treści, a wyrównanie do lewej zwykle poprawia czytelność tekstu. Przy liczbach można rozważyć wyrównanie do prawej, bo wtedy łatwiej porównuje się wartości.

Jeśli tabela ma dużo wierszy, dobrze działają naprzemienne kolory tła. Taki drobiazg pozwala szybciej śledzić wzrokiem całą linię danych. Da się to zrobić bardzo krótko:

tbody tr:nth-child(even) {
  background: #fafafa;
}

Przy małych ekranach szerokie tabele bywają problematyczne. Zamiast ściskać treść na siłę, lepiej umożliwić przewijanie w poziomie. W praktyce często owija się tabelę dodatkowym kontenerem z overflow-x: auto;. Dzięki temu układ strony się nie rozjeżdża, a dane nadal pozostają dostępne.

Najczęstsze błędy przy tworzeniu tabel

  • Używanie tabeli do budowy całego układu strony zamiast do danych.
  • Brak nagłówków <th>, mimo że tabela ma wyraźne kolumny opisowe.
  • Nierówna liczba komórek w poszczególnych wierszach.
  • Nadużywanie colspan i rowspan, przez co kod staje się trudny do poprawienia.
  • Brak podpisu <caption> w tabelach, które bez kontekstu są niejasne.
  • Wpychanie bardzo długich akapitów do komórek, co pogarsza czytelność.

W praktyce najlepiej działa prostota. Jeśli da się osiągnąć ten sam efekt bez scalania komórek, zwykle warto wybrać prostszą wersję. Tabela ma pomagać w odczycie danych, a nie utrudniać ich edycję przy każdej zmianie.

Dobrą metodą kontroli jest sprawdzenie tabeli „na sucho”: czy po samych nagłówkach wiadomo, co oznacza każda komórka. Jeżeli nie, problem leży najczęściej w strukturze, a nie w wyglądzie.

Gotowy przykład poprawnej tabeli

Poniżej znajduje się pełny przykład, który można wkleić do pliku HTML i od razu uruchomić. Zawiera podpis, sekcję nagłówka i dane w uporządkowanym układzie.

<table>
  <caption>Plan publikacji wpisów</caption>
  <thead>
    <tr>
      <th>Data</th>
      <th>Temat</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>03.10.2026</td>
      <td>Jak zrobić tabelę w HTML</td>
      <td>Opublikowany</td>
    </tr>
    <tr>
      <td>10.10.2026</td>
      <td>Podstawy CSS</td>
      <td>W przygotowaniu</td>
    </tr>
    <tr>
      <td>17.10.2026</td>
      <td>Linki i nawigacja</td>
      <td>Szkic</td>
    </tr>
  </tbody>
</table>

Taki zapis jest dobrym punktem wyjścia do większości prostych zastosowań. Najpierw warto opanować właśnie ten schemat, a dopiero później sięgać po bardziej złożone układy. Jeśli struktura będzie poprawna od początku, stylowanie i rozbudowa tabeli staną się zwykłą techniczną formalnością, a nie walką z chaosem w kodzie.