Tagi HTML: caption

Cześć! W dzisiejszym wpisie o HTML, CSS i JavaScript przyjrzymy się bliżej tagowi <caption>. To prosty, a zarazem kluczowy element do dodawania podpisu lub tytułu do tabeli HTML – poprawia dostępność, czytelność i semantykę strony. Jeśli tworzysz tabele z danymi finansowymi, porównaniami produktów czy harmonogramami, ten tag powinien być w Twoim arsenale.

Tag <caption> powinien być pierwszym dzieckiem elementu <table> i domyślnie pojawia się nad tabelą (pozycję można zmienić w CSS). Jest wspierany przez nowoczesne przeglądarki i stanowi semantycznie poprawny nagłówek tabeli. W tym artykule omówimy podstawy, atrybuty, stylizację, praktyczne zastosowania i najlepsze praktyki.

Czym dokładnie jest tag <caption>?

<caption> definiuje tytuł lub podpis tabeli, pomagając użytkownikom – w tym czytnikom ekranu – zrozumieć kontekst danych. Należy umieszczać go bezpośrednio po otwierającym <table>, jako pierwsze dziecko. Obsługuje wyłącznie globalne atrybuty HTML (np. id, class, style) oraz atrybuty zdarzeń (np. onclick).

Oto kluczowe cechy, o których warto pamiętać:

• semantyka – poprawia dostępność i SEO, bo wyszukiwarki lepiej rozumieją tabelę z opisem;
• zawartość – może zawierać tekst, linki, obrazy lub inne elementy inline, np. <em>, <strong>, <a>, <img>;
• zamykanie – znacznik kończący można pominąć, jeśli po <caption> natychmiast występuje np. <tr>, <thead>, <tbody>, <tfoot> lub koniec <table>;
• interfejs DOM – HTMLTableCaptionElement, co pozwala na manipulację w JavaScript.

W specyfikacji HTML5 <caption> jest preferowane względem zwykłych <h1–h6> ustawionych nad tabelą – to dokładniejsze semantycznie rozwiązanie.

Podstawowy przykład użycia <caption>

Poniżej najprostszy przykład (efekt: podpis nad tabelą, wyśrodkowany):

<table>
<caption>Miesięczne oszczędności</caption>
<tr>
<th>Miesiąc</th>
<th>Oszczędności</th>
</tr>
<tr>
<td>Styczeń</td>
<td>$100</td>
</tr>
<tr>
<td>Luty</td>
<td>$50</td>
</tr>
</table>

Dzięki <caption> tabela natychmiast zyskuje kontekst i czytelność – bez niego dane wyglądają sucho i są mniej zrozumiałe.

Pozycjonowanie podpisu za pomocą CSS

Domyślnie podpis jest na górze i wyśrodkowany. Położenie kontroluje własność CSS caption-side z wartościami: top (domyślnie) i bottom.

Przykład przeniesienia podpisu na dół tabeli:

<table>
<caption style="caption-side: bottom;">Moje oszczędności 2026</caption>
<tr>
<th>Miesiąc</th>
<th>Oszczędności</th>
</tr>
<tr>
<td>Marzec</td>
<td>$200</td>
</tr>
</table>

Zaawansowana stylizacja z zewnętrznym CSS i modyfikacją wyrównania nagłówka tabeli:

/* CSS */
caption {
text-align: center;
font-style: italic;
margin: 10px 0;
font-weight: bold;
color: #333;
}
caption.bottom {
caption-side: bottom;
}
caption.right {
text-align: right; /* podpis pozostaje u góry, ale jest wyrównany do prawej */
}

<table class="savings-table">
<caption class="right">Źródło: Moje finanse</caption>
<!-- reszta tabeli -->
</table>

Podpis na dole działa jak stopka tabeli – świetnie sprawdza się dla źródeł danych lub podsumowań. W razie problemów zgodności pamiętaj, że domyślny display dla <caption> to table-caption.

Praktyczne przykłady z życia webdevelopera

1. Tabela porównawcza produktów (e-commerce)

W porównaniach produktów <caption> nadaje kontekst i pomaga SEO oraz dostępności:

<table border="1" style="border-collapse: collapse;">
<caption>Porównanie smartfonów – marzec 2026</caption>
<tr>
<th>Model</th>
<th>Cena</th>
<th>Ekran</th>
<th colspan="2">Aparat</th>
</tr>
<tr>
<td>iPhone 17</td>
<td>5000 zł</td>
<td>6.5"</td>
<td>48MP</td>
<td>12MP</td>
</tr>
<!-- więcej wierszy -->
</table>

W tym przykładzie colspan łączy komórki, a <caption> jednoznacznie opisuje zestawienie.

2. Dane finansowe z grupowaniem (<thead>, <tbody>, <tfoot>)

Rozbudowana tabela z logicznym podziałem sekcji i podpisem na dole:

<style>
table, td, th { border: solid thin black; }
caption { font-style: italic; margin: 10px; caption-side: bottom; }
</style>

<table>
<caption>Wykaz zarobków pracowników</caption>
<thead>
<tr>
<th>LP.</th>
<th colspan="2">Imię i nazwisko</th>
<th>Napój</th>
<th>Posiłek</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td><td>Jan</td><td>Kowal</td><td>Kawa</td><td>Pizza</td>
</tr>
</tbody>
<tfoot>
<tr style="font-weight: bold;">
<td colspan="5">Suma: 5 osób</td>
</tr>
</tfoot>
</table>

Taki układ pomaga czytnikom ekranu i użytkownikom zrozumieć strukturę danych.

3. Responsywna tabela z JavaScript

Przykład prostego skryptu ukrywającego podpis na małych ekranach:

<table id="responsive-table">
<caption id="cap">Tabela responsywna</caption>
<!-- wiersze tabeli -->
</table>

<script>
if (window.innerWidth < 768) {
document.getElementById('cap').style.display = 'none';
}
</script>

Najlepsze praktyki i pułapki

Zanim wdrożysz <caption> w projekcie, pamiętaj o tych zasadach:

• jedna na tabelę – używaj tylko jednego <caption> na <table>; duplikaty są błędem;
• figcaption, gdy używasz figure – jeśli tabela znajduje się w <figure>, skorzystaj z <figcaption> zamiast <caption>;
• dostępność – pisz opis jasno i zwięźle; to pomaga narzędziom jak NVDA i VoiceOver;
• stylizacja bez hacków – unikaj position: absolute; korzystaj z caption-side i text-align do pozycjonowania i wyrównania;
• bez przestarzałych atrybutów – nie używaj summary na <table> (jest przestarzały w HTML5);
• nie poza tabelą – nie umieszczaj <caption> poza <table>; przeglądarki mogą go zignorować.

Porównanie wartości caption-side

Oto krótkie zestawienie dostępnych ustawień położenia podpisu:

Integracja z CSS Grid/Flexbox i nowoczesnym HTML

W responsywnych layoutach warto otoczyć tabelę kontenerem z przewijaniem w poziomie i dopracowanym podpisem:

.responsive-table {
width: 100%;
overflow-x: auto;
}
.responsive-table caption {
caption-side: top;
padding: 1rem;
background: #f0f0f0;
font-size: 1.2em;
}

Dobrze opisany podpis w <caption> to szybki krok do profesjonalnych, dostępnych i czytelnych tabel – zwłaszcza w aplikacjach komercyjnych.