Jak zrobić tabelę w HTML – konkretne podstawy dla początkujących
Tworzenie tabel w HTML sprowadza się do zrozumienia kilku znaczników i ich poprawnego ułożenia. Tabele wciąż są potrzebne wszędzie tam, gdzie trzeba pokazać dane w układzie wiersze–kolumny: cenniki, porównania, raporty, wyniki. Znajomość ich budowy pozwala uniknąć absurdów typu ustawianie tabeli na divach i flexach. Warto opanować podstawowe znaczniki: <table>, <tr>, <td>, <th>, <thead>, <tbody> i <tfoot>, bo na nich opiera się cała reszta.
W praktyce wystarczy jeden prosty schemat i kilka powtarzalnych wzorców, żeby spokojnie ogarniać codzienne potrzeby: od prostych cenników po czytelne raporty z danymi. Poniżej konkretny zestaw przykładów, który pozwala zacząć bez błądzenia po dokumentacji.
Podstawowa struktura tabeli w HTML
Każda tabela składa się z tych samych elementów: obramowania <table>, wierszy <tr> i komórek <td> lub <th>. Nic więcej nie jest wymagane, żeby wyświetlić prostą tabelkę.
Minimalny przykład działającej tabeli:
<table>
<tr>
<th>Produkt</th>
<th>Cena</th>
<th>Dostępność</th>
</tr>
<tr>
<td>Klawiatura</td>
<td>120 zł</td>
<td>W magazynie</td>
</tr>
<tr>
<td>Myszka</td>
<td>60 zł</td>
<td>Brak</td>
</tr>
</table>
W tym przykładzie warto zauważyć:
- <table> – główny kontener tabeli
- <tr> – pojedynczy wiersz tabeli (table row)
- <th> – komórka nagłówka (table header), domyślnie pogrubiona i wyśrodkowana
- <td> – zwykła komórka danych (table data)
Do prostych tabel w zupełności wystarczą znaczniki <table>, <tr>, <th> i <td>. Reszta to dodatki zwiększające czytelność, dostępność i kontrolę nad wyglądem.
Logiczna struktura: thead, tbody, tfoot
Gdy tabela ma więcej niż kilka wierszy, warto uporządkować ją semantycznie. Służą do tego trzy znaczniki: <thead>, <tbody> i <tfoot>. Nie są obowiązkowe, ale wyraźnie poprawiają strukturę i czytelność kodu.
<table>
<thead>
<tr>
<th>Miesiąc</th>
<th>Przychód</th>
<th>Koszty</th>
</tr>
</thead>
<tbody>
<tr>
<td>Styczeń</td>
<td>25 000 zł</td>
<td>18 000 zł</td>
</tr>
<tr>
<td>Luty</td>
<td>28 000 zł</td>
<td>19 500 zł</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Suma</th>
<th>53 000 zł</th>
<th>37 500 zł</th>
</tr>
</tfoot>
</table>
Takie rozdzielenie ma sens z kilku powodów:
- łatwiejsze formatowanie nagłówka i podsumowania osobnymi stylami CSS,
- lepsza współpraca z czytnikami ekranu i narzędziami dostępności,
- gotowość na większe tabele (sortowanie, przewijanie, eksport).
Warto przyjąć prostą zasadę: przy więcej niż 2–3 wierszach danych i jakimkolwiek podsumowaniu od razu używać <thead>, <tbody>, <tfoot>. Oszczędza to późniejszego przerabiania kodu.
Proste formatowanie tabel: border i podstawowy CSS
Surowa tabela HTML bez stylów jest mało czytelna – przeglądarka domyślnie nie rysuje żadnych linii. Najszybszy sposób na wizualne ogarnięcie tabeli to prosty CSS.
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ccc;
padding: 8px 12px;
text-align: left;
}
thead th {
background-color: #f5f5f5;
}
</style>
<table>
<thead>
<tr>
<th>Imię</th>
<th>Nazwisko</th>
<th>Stanowisko</th>
</tr>
</thead>
<tbody>
<tr>
<td>Anna</td>
<td>Kowalska</td>
<td>Projektant UX</td>
</tr>
<tr>
<td>Piotr</td>
<td>Nowak</td>
<td>Programista</td>
</tr>
</tbody>
</table>
Kilka istotnych elementów:
- border-collapse: collapse; – łączy podwójne obramowania w jedną linię, dzięki temu tabela wygląda normalnie,
- width: 100%; – tabela rozciąga się na szerokość kontenera (np. treści wpisu w WordPressie),
- padding w <th> i <td> – bez tego tekst „klei się” do krawędzi.
Do prostych zastosowań tyle w zupełności wystarczy. Całą resztę (kolory, wyrównanie, czcionkę) lepiej trzymać w ogólnych stylach strony, a nie przy każdej tabeli osobno.
Scalanie komórek: colspan i rowspan
Przy bardziej rozbudowanych tabelach pojawia się potrzeba łączenia komórek w poziomie lub w pionie. Służą do tego atrybuty colspan (poziomo) i rowspan (pionowo).
Łączenie komórek w poziomie – colspan
Przykład prostego cennika z nagłówkiem obejmującym kilka kolumn:
<table>
<thead>
<tr>
<th rowspan="2">Plan</th>
<th colspan="2">Cena miesięczna</th>
</tr>
<tr>
<th>Brutto</th>
<th>Netto</th>
</tr>
</thead>
<tbody>
<tr>
<td>Basic</td>
<td>99 zł</td>
<td>80,49 zł</td>
</tr>
<tr>
<td>Pro</td>
<td>199 zł</td>
<td>161,79 zł</td>
</tr>
</tbody>
</table>
W tym przykładzie:
- colspan=”2″ mówi, że komórka nagłówka ma zajmować dwie kolumny,
- rowspan=”2″ sprawia, że komórka „Plan” obejmuje dwa wiersze nagłówka.
Łączenie komórek w pionie – rowspan
Scalanie w pionie przydaje się przy grupowaniu danych, np. jeden klient i kilka zamówień:
<table>
<thead>
<tr>
<th>Klient</th>
<th>Numer zamówienia</th>
<th>Kwota</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">Firma ABC</td>
<td>ZAM-001</td>
<td>3 500 zł</td>
</tr>
<tr>
<td>ZAM-002</td>
<td>1 200 zł</td>
</tr>
<tr>
<td>Firma XYZ</td>
<td>ZAM-003</td>
<td>980 zł</td>
</tr>
</tbody>
</table>
Przy colspan i rowspan ważna jest jedna prosta zasada: sumaryczna liczba kolumn w każdym wierszu musi się zgadzać. Jeśli coś „rozjedzie” się w układzie, najczęściej problemem jest właśnie źle policzona liczba scalonych kolumn lub wierszy.
Nagłówki tabel i podpis: caption, scope
Dobrze opisana tabela jest łatwiejsza do zrozumienia zarówno dla użytkownika, jak i dla narzędzi dostępności. Do tego służą znaczniki <caption> oraz atrybut scope w komórkach nagłówków.
Podpis tabeli – caption
<caption> to tytuł tabeli. Powinien znajdować się bezpośrednio po <table>. Przeglądarki domyślnie wyświetlają go nad tabelą, zwykle nieco mniejszą czcionką.
<table>
<caption>Porównanie planów abonamentowych</caption>
<thead>
<tr>
<th>Plan</th>
<th>Limit danych</th>
<th>Cena</th>
</tr>
</thead>
<tbody>
<tr>
<td>Start</td>
<td>10 GB</td>
<td>39 zł</td>
</tr>
<tr>
<td>Premium</td>
<td>Bez limitu</td>
<td>79 zł</td>
</tr>
</tbody>
</table>
W praktyce podpis warto traktować jak krótki, konkretny nagłówek: co przedstawia tabela, w jakim zakresie, jakiego okresu dotyczy itd.
Scope – określenie zasięgu nagłówka
Atrybut scope pomaga czytnikom ekranu zrozumieć, czy dany nagłówek dotyczy wiersza, czy kolumny. W prostych tabelach można go pominąć, ale poprawne użycie nie jest trudne:
<table>
<thead>
<tr>
<th scope="col">Produkt</th>
<th scope="col">Cena</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Klawiatura</th>
<td>120 zł</td>
<td>Dostępna</td>
</tr>
<tr>
<th scope="row">Myszka</th>
<td>60 zł</td>
<td>Brak</td>
</tr>
</tbody>
</table>
Przy każdym <th> warto nawykowo zastanowić się, czy opisuje kolumnę (scope=”col”), czy wiersz (scope=”row”). W szerszej perspektywie to spora różnica dla osób korzystających z czytników ekranu.
Czego nie robić z tabelami (typowe błędy)
Tabele w HTML nie są skomplikowane, ale łatwo użyć ich do złych celów. Jest kilka błędów, które pojawiają się nagminnie, zwłaszcza w starszych poradach w sieci.
Używanie tabel do layoutu strony
Kiedyś tabele służyły do układania całych stron (menu po lewej, treść po prawej itd.). Dziś to po prostu zła praktyka. Do układu strony służą flexbox i CSS Grid, a tabele powinny być używane wyłącznie do danych tabelarycznych.
Objawy niewłaściwego użycia tabel:
- zagnieżdżone tabele jedna w drugiej tylko po to, żeby „coś wyrównać”,
- puste komórki <td> </td> jako wcięcia lub odstępy,
- wypełnianie układu strony pojedynczym wierszem i wieloma <td> zamiast kolumn CSS.
Stylowanie tabel atrybutami HTML
W HTML4 popularne były atrybuty typu border, cellpadding, cellspacing czy bgcolor. W nowoczesnym HTML i CSS są po prostu przestarzałe. Zamiast:
<table border="1" cellpadding="5" cellspacing="0" bgcolor="#eee">
lepiej od razu stosować czysty HTML i osobne CSS:
<table class="raport">...</table>
<style>
table.raport {
border-collapse: collapse;
background-color: #eee;
}
table.raport th,
table.raport td {
border: 1px solid #999;
padding: 5px;
}
</style>
Atrybuty typu border, cellpadding, cellspacing, bgcolor są dziś traktowane jako przestarzałe. W nowym kodzie warto od razu wszystko przenosić do CSS.
Prosty schemat „od zera do działającej tabeli”
Na koniec praktyczny, powtarzalny schemat, który dobrze sprawdza się przy każdej nowej tabeli. Można potraktować to jak checklistę.
- Najpierw zdefiniować kolumny – ile ich będzie i jakie będą nagłówki (<th>).
- Dodać szkielet tabeli: <table>, w środku <thead>, <tbody>, opcjonalnie <tfoot>.
- Wpisać nagłówki kolumn w <thead> (po jednym w każdym <th>).
- Uzupełnić wiersze z danymi w <tbody> – każdy wiersz w osobnym <tr>.
- Jeśli jest podsumowanie (suma, średnia) – dodać <tfoot> z jednym lub kilkoma wierszami.
- Dopiero na końcu dorzucić podstawowy CSS z obramowaniem, paddingiem i ewentualnie kolorami nagłówka.
Przykład kompletnej, czytelnej tabeli stosowanej w realnych projektach:
<style>
table.tabela-finanse {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
table.tabela-finanse caption {
font-weight: bold;
margin-bottom: 8px;
text-align: left;
}
table.tabela-finanse th,
table.tabela-finanse td {
border: 1px solid #ddd;
padding: 6px 10px;
}
table.tabela-finanse thead th {
background-color: #f2f2f2;
}
table.tabela-finanse tfoot th,
table.tabela-finanse tfoot td {
background-color: #fafafa;
font-weight: bold;
}
</style>
<table class="tabela-finanse">
<caption>Zestawienie przychodów i kosztów 2024</caption>
<thead>
<tr>
<th scope="col">Miesiąc</th>
<th scope="col">Przychód</th>
<th scope="col">Koszty</th>
<th scope="col">Wynik</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Styczeń</th>
<td>25 000 zł</td>
<td>18 000 zł</td>
<td>7 000 zł</td>
</tr>
<tr>
<th scope="row">Luty</th>
<td>28 000 zł</td>
<td>19 500 zł</td>
<td>8 500 zł</td>
</tr>
<tr>
<th scope="row">Marzec</th>
<td>26 500 zł</td>
<td>18 700 zł</td>
<td>7 800 zł</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row">Razem</th>
<td>79 500 zł</td>
<td>56 200 zł</td>
<td>23 300 zł</td>
</tr>
</tfoot>
</table>
Po opanowaniu takiego bazowego schematu można śmiało przejść do bardziej zaawansowanych tematów: responsywne tabele na małych ekranach, sortowanie po kolumnach czy eksport do CSV. Na start wystarczy jednak dobrze rozumieć kilka prostych znaczników i ich sensowne ułożenie.