Jak zrobić tabelę w HTML – prosty poradnik dla początkujących

Tabele w HTML to fundamentalny element do organizowania danych w siatce wierszy i kolumn — idealny do prezentacji zestawień, planów czy porównań.

Ten rozbudowany poradnik krok po kroku poprowadzi Cię od podstawowej struktury po zaawansowane stylizacje, z gotowymi przykładami kodu do skopiowania i testowania w edytorze HTML.

Tu przeczytasz: pokaż spis treści

Podstawowa struktura dokumentu HTML z tabelą

Zanim zaczniesz, przygotuj pełny szablon dokumentu HTML — to dobra praktyka, która poprawia kompatybilność z przeglądarkami. Oto kompletny przykład prostego dokumentu z tabelą 2×2:

<!DOCTYPE html> <html lang="pl"> <head> <meta charset="UTF-8"> <title>Moja pierwsza tabela</title> <style> table { border-collapse: collapse; width: 100%; } th, td { border: 1px solid #ccc; padding: 10px; text-align: left; } </style> </head> <body> <table> <thead> <tr> <th>Kolumna 1</th> <th>Kolumna 2</th> </tr> </thead> <tbody> <tr> <td>Wiersz 1, Kolumna 1</td> <td>Wiersz 1, Kolumna 2</td> </tr> <tr> <td>Wiersz 2, Kolumna 1</td> <td>Wiersz 2, Kolumna 2</td> </tr> </tbody> </table> </body> </html>

Wyjaśnienie elementów struktury:

<table> – kontener całej tabeli;
<thead> – sekcja nagłówkowa (zalecana dla dostępności);
<tr> – wiersz tabeli (table row);
<th> – komórka nagłówka (table header), domyślnie pogrubiona;
<td> – standardowa komórka z danymi (table data);
<tbody> – główna sekcja z danymi (opcjonalna);
<tfoot> – stopka tabeli, np. do podsumowań (opcjonalna).

Zapisz kod jako plik .html i otwórz go w przeglądarce — zobaczysz prostą tabelę z obramowaniami.

Krok po kroku — tworzenie tabeli bez stylizacji (czysty HTML)

Poniżej znajdziesz cztery podstawowe kroki tworzenia tabeli bez użycia CSS:

Otwórz tabelę — wstaw <table> (obowiązkowy znacznik otwierający);
Dodaj wiersz nagłówka — wstaw <tr><th>Nagłówek 1</th><th>Nagłówek 2</th></tr> i użyj <th> do wyróżnienia;
Dodaj wiersze z danymi — dla każdego wiersza wpisz: <tr><td>Dane 1</td><td>Dane 2</td></tr> (liczba <td> musi być taka sama w każdym <tr>);
Zamknij tabelę — dodaj </table>.

Przykład bez użycia <thead> i <tbody> (starszy, ale poprawny zapis):

<table> <tr> <td>Kolumna 1, wiersz 1</td> <td>Kolumna 2, wiersz 1</td> </tr> <tr> <td>Kolumna 1, wiersz 2</td> <td>Kolumna 2, wiersz 2</td> </tr> </table>

Bez stylizacji tabela wygląda surowo — obramowania czy odstępy pojawią się dopiero po dodaniu atrybutów lub CSS.

Atrybuty tabeli — dostosowanie bez CSS (metoda przestarzała, ale prosta)

Starsze atrybuty HTML pozwalają na podstawowe formatowanie bezpośrednio w kodzie. Używaj ich ostrożnie — obecnie zaleca się CSS. Poniżej znajdziesz szybkie zestawienie użytecznych atrybutów:

Atrybut	Opis	Przykład
`border="1"`	Włącza obramowanie (wartość to grubość w pikselach)	`<table border="1">`
`cellspacing="0"`	Odległość między komórkami	`<table cellspacing="0">`
`cellpadding="10"`	Wcięcie wewnątrz komórki	`<table cellpadding="10">`
`width="100%"`	Szerokość tabeli (%, px)	`<table width="100%">`

Przykład wykorzystujący powyższe atrybuty:

<table border="1" cellspacing="0" cellpadding="10" width="100%"> <tr> <td>Kolumna 1</td> <td>Kolumna 2</td> </tr> </table>

Dla komórek możesz dodać: align="left|center|right" (poziomo) oraz valign="top|middle|bottom" (pionowo).

Łączenie komórek — colspan i rowspan

Aby połączyć komórki poziomo lub pionowo, użyj atrybutów colspan (liczba kolumn) i rowspan (liczba wierszy). Oto dwa krótkie przykłady:

Połączenie pionowe dwóch wierszy w pierwszej kolumnie (rowspan):

<table border="1"> <tr> <td rowspan="2">Połączone pionowo</td> <td>Kolumna 2, wiersz 1</td> </tr> <tr> <td>Kolumna 2, wiersz 2</td> </tr> </table>

Połączenie poziome trzech kolumn (colspan):

<table border="1"> <tr> <td colspan="3">Połączone poziomo</td> </tr> <tr> <td>K1</td> <td>K2</td> <td>K3</td> </tr> </table>

Wskazówka: po złączeniu komórek zawsze przelicz ich łączną liczbę — w każdym wierszu powinna się zgadzać, aby tabela pozostała spójna.

Stylizacja tabel z CSS — nowoczesne podejście

CSS to podstawa przejrzystych i responsywnych tabel. Dodaj reguły w sekcji <style> lub w zewnętrznym pliku CSS.

Podstawowy styl dla całej tabeli:

table { border-collapse: collapse; /* łączy obramowania komórek */ width: 100%; max-width: 800px; margin: 20px auto; /* centrowanie */ } th, td { border: 1px solid #ccc; padding: 12px; text-align: left; } th { background-color: #f4f4f4; font-weight: bold; } tr:nth-child(even) { background-color: #f9f9f9; /* pasiaste tło wierszy */ }

Prosta responsywność dla urządzeń mobilnych:

@media (max-width: 600px) { table { font-size: 14px; } th, td { padding: 8px; } }

Przykład praktyczny — uproszczony plan lekcji w formie tabeli:

<!DOCTYPE html> <html lang="pl"> <head> <meta charset="UTF-8"> <title>Plan lekcji</title> <style> body { font-family: Arial, sans-serif; } table { border-collapse: collapse; width: 100%; max-width: 800px; margin: 20px auto; } th, td { border: 1px solid #ddd; padding: 12px; text-align: center; } th { background-color: #4CAF50; color: white; } </style> </head> <body> <table> <thead> <tr> <th>Godzina</th> <th>Poniedziałek</th> <th>Wtorek</th> </tr> </thead> <tbody> <tr> <td>8:00</td> <td>Matematyka</td> <td>Polski</td> </tr> <tr> <td>9:00</td> <td>Informatyka</td> <td>Historia</td> </tr> </tbody> </table> </body> </html>

Zaawansowane funkcje — nagłówki grup, kolory, obramowania

Poniżej znajdziesz kilka przydatnych technik, które ułatwiają rozbudowę i czytelność tabel:

kolor tła – użyj np. style="background-color: #cc3300;" na <tr> lub <td>;
szerokość kolumny – np. style="width: 30%;" lub atrybut width="200px";
wyrównanie – np. style="text-align: left; vertical-align: top;";
grupy kolumn – użyj <colgroup><col span="2" style="background: #f0f0f0;"></col></colgroup> do wspólnej stylizacji grup kolumn.

Przykład konfiguracji grup i reguł obramowań:

<table border="1" cellpadding="5" frame="void" rules="groups"> <colgroup span="1" align="left"></colgroup> <colgroup span="4" align="center"></colgroup>  </table>

Typowe błędy początkujących i jak ich unikać

Zwróć uwagę na najczęstsze potknięcia podczas tworzenia tabel:

niezrównoważona liczba komórek – w każdym <tr> liczba <td> powinna być taka sama;
brak zamykających znaczników – mimo że HTML5 jest tolerancyjny, domykaj </td>, </tr> i </table>;
używanie tabel do layoutu – tabele są tylko do danych, a do pozycjonowania używaj Flexbox lub CSS Grid;
brak dostępności – dodawaj <th scope="col"> dla nagłówków i <caption>Tytuł tabeli</caption> dla tytułu tabeli.

Praktyczne przykłady do skopiowania

Tabela porównawcza produktów (z colspan)

Prosty nagłówek obejmujący kilka kolumn ułatwia grupowanie danych:

<table style="border-collapse: collapse; width: 100%;"> <tr><th colspan="3">Porównanie smartfonów</th></tr> <tr><th>Model</th><th>Cena</th><th>Ocena</th></tr> <tr><td>iPhone 15</td><td>5000 zł</td><td>9/10</td></tr> </table>