<caption>
Tytuł tabeli, umieszczany jako pierwszy element wewnątrz `<table>`.
- Wyświetlanie
- table-caption
- Znacznik zamykający
- Wymagany
- Dozwolona zawartość
- Treść przepływu bez tabel
Przykład
#<style>
table { border-collapse: collapse; }
th, td { border: 1px solid #8886; padding: 4px 10px; text-align: left; }
caption { padding-bottom: 6px; font-weight: bold; }
</style>
<table>
<caption>Plan nauki na ten tydzień</caption>
<tr><th scope="col">Dzień</th><th scope="col">Temat</th></tr>
<tr><td>Poniedziałek</td><td>Listy i tabele</td></tr>
<tr><td>Środa</td><td>Formularze</td></tr>
<tr><td>Piątek</td><td>Mini-projekt</td></tr>
</table>Definicja i zastosowanie
#Element <caption> nadaje tabeli tytuł, który mówi, co zawiera: „Plan zajęć na wrzesień”, „Porównanie planów”, „Wyniki quizu”. Musi być pierwszym dzieckiem elementu <table>.
Przeglądarka domyślnie wyświetla podpis wyśrodkowany nad tabelą. Jeśli wolisz mieć go pod spodem, użyj CSS: caption-side: bottom.
Podpis jest ważny dla dostępności. Czytnik ekranu ogłasza go przy wejściu do tabeli jako jej nazwę, więc użytkownik od razu wie, czy tabela jest mu potrzebna. Gdy tabela jest jedyną treścią elementu <figure>, zamiast <caption> możesz użyć <figcaption>.
Składnia
#<table>
<caption>Tytuł tabeli</caption>
…
</table>Atrybuty
#Ten element nie ma własnych atrybutów. Obsługuje atrybuty globalne, takie jak class, id czy hidden.
Domyślny CSS
#Większość przeglądarek wyświetla ten element z takimi stylami domyślnymi:
caption {
display: table-caption;
text-align: center;
}Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Pisz podpis konkretnie. „Tabela 1” nic nie mówi, a „Ceny kursów w 2026 roku” mówi wszystko.
- Położenie podpisu zmieniaj właściwością
caption-side, a nie przestarzałym atrybutemalign.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.