Tytuł tabeli (<caption>)

Lekcja 7.5: Tytuł tabeli (<caption>)

Strona główna > Rozdział 7: Tabele > Tytuł tabeli (<caption>)

Dodawanie tytułu do tabeli

Aby ułatwić użytkownikom zrozumienie, co przedstawia tabela, warto dodać do niej tytuł lub krótki opis. W HTML służy do tego znacznik <caption>.

Znacznik <caption> pozwala na semantyczne powiązanie tytułu bezpośrednio z tabelą, co jest korzystne zarówno dla użytkowników widzących, jak i tych korzystających z technologii wspomagających.

Znacznik <caption>

Musi być umieszczony bezpośrednio po otwierającym znaczniku <table>.
W jednej tabeli może wystąpić tylko jeden znacznik <caption>.
Zawartość znacznika <caption> to tekst opisujący tabelę.
Domyślnie przeglądarki wyświetlają zawartość <caption> wyśrodkowaną nad tabelą, ale jego położenie i wygląd można kontrolować za pomocą CSS (właściwość caption-side).

Przykład użycia <caption>:

<table class="basic-table">
  <caption>Wyniki sprzedaży w pierwszym kwartale</caption>
  <thead>
    <tr>
      <th scope="col">Miesiąc</th>
      <th scope="col">Przychód (PLN)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Styczeń</th>
      <td>15 000</td>
    </tr>
    <tr>
      <th scope="row">Luty</th>
      <td>18 500</td>
    </tr>
    <tr>
      <th scope="row">Marzec</th>
      <td>21 000</td>
    </tr>
  </tbody>
</table>

Wyniki sprzedaży w pierwszym kwartale
Miesiąc	Przychód (PLN)
Styczeń	15 000
Luty	18 500
Marzec	21 000

Korzyści z używania <caption>

Zrozumienie kontekstu: Użytkownik od razu wie, czego dotyczą dane w tabeli, bez konieczności analizowania nagłówków czy otaczającego tekstu.
Dostępność: Czytniki ekranu rozpoznają znacznik <caption> i odczytują jego zawartość jako tytuł tabeli, co jest kluczowe dla zrozumienia jej przeznaczenia przez osoby niewidome. Powiązanie tytułu z tabelą jest znacznie silniejsze niż umieszczenie go np. w osobnym nagłówku <h3> przed tabelą.
Semantyka: Poprawia strukturę semantyczną dokumentu HTML.

Stylizacja <caption> za pomocą CSS

Domyślny wygląd i położenie tytułu można łatwo zmienić za pomocą CSS.

Położenie: Właściwość caption-side pozwala umieścić tytuł nad (top - domyślnie) lub pod (bottom) tabelą.
Wygląd: Można stosować standardowe właściwości CSS do zmiany czcionki, koloru, wyrównania tekstu, tła, marginesów itp.

caption {
  caption-side: bottom; /* Umieszcza tytuł pod tabelą */
  text-align: left;   /* Wyrównuje tekst do lewej */
  font-style: italic;
  margin-top: 10px;   /* Dodaje margines górny */
  color: #555;
}

Tabela 1: Dane przykładowe (tytuł na dole)
Kolumna A	Kolumna B
Wartość 1	Wartość 2

<caption> a nagłówki (np. <h2>)

Czy <caption> zastępuje potrzebę użycia nagłówka (np. <h2>, <h3>) przed tabelą? Zazwyczaj nie. Nagłówek sekcji (np. <h2>Wyniki finansowe</h2>) określa ogólny temat części strony, podczas gdy <caption> precyzuje zawartość konkretnej tabeli w tej sekcji (np. <caption>Szczegółowe przychody i koszty w Q1</caption>). Używanie obu może być korzystne dla struktury i zrozumienia dokumentu.

Zadanie praktyczne (z rozwiązaniem)

Zadanie: Dodaj znacznik <caption> z odpowiednim tytułem do tabeli z cennikiem produktów, którą stworzyłeś w poprzednich zadaniach (tej z <thead>, <tbody>, <tfoot>).

Rozwiązanie:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Tabela Produktów - Caption</title>
    <style>
        table, th, td {
            border: 1px solid #ccc;
            border-collapse: collapse;
        }
        th, td {
            padding: 10px;
            text-align: left;
        }
        thead {
            background-color: #f2f2f2; font-weight: bold;
        }
        tfoot {
            background-color: #e9e9e9; font-style: italic;
        }
        caption {
            font-weight: bold;
            margin-bottom: 10px; /* Odstęp pod tytułem */
            font-size: 1.1em;
        }
    </style>
</head>
<body>
    <h1>Cennik Produktów Sklepowych</h1>
    
    <table>
        <caption>Aktualny cennik podstawowych produktów</caption> <!-- Dodany caption -->
        <thead>
            <tr>
                <th scope="col">Produkt</th>
                <th scope="col">Cena (PLN)</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td colspan="2">Ceny mogą ulec zmianie.</td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <th scope="row">Jabłka (kg)</th>
                <td>3.50</td>
            </tr>
            <tr>
                <th scope="row">Chleb</th>
                <td>4.20</td>
            </tr>
            <tr>
                <th scope="row">Mleko (litr)</th>
                <td>2.80</td>
            </tr>
        </tbody>
    </table>

</body>
</html>

Dodatkowe zadania do samodzielnego wykonania:

Dodaj <caption> do tabeli z planem lekcji.
Użyj CSS, aby umieścić tytuł tabeli (<caption>) pod tabelą i wyrównać go do prawej strony.
Stwórz tabelę i dodaj przed nią nagłówek <h3> oraz tytuł tabeli za pomocą <caption>, aby zobaczyć różnicę w ich przeznaczeniu.

Najczęściej zadawane pytania

Do czego służy znacznik <caption>?

Znacznik <caption> służy do dodania tytułu lub krótkiego opisu bezpośrednio do tabeli HTML. Poprawia to zrozumienie kontekstu tabeli i jej dostępność.

Gdzie umieścić znacznik <caption>?

Znacznik <caption> musi być umieszczony bezpośrednio po otwierającym znaczniku <table>, a przed znacznikami <thead>, <tbody>, <tfoot> lub <tr> (jeśli te pierwsze nie są używane).

Czy tabela może mieć więcej niż jeden <caption>?

Nie, każda tabela może mieć co najwyżej jeden znacznik <caption>.

Jak zmienić położenie tytułu tabeli?

Położenie tytułu (nad lub pod tabelą) można kontrolować za pomocą właściwości CSS caption-side. Wartość 'top' (domyślna) umieszcza go nad tabelą, a 'bottom' pod tabelą.

Dlaczego <caption> jest lepszy niż nagłówek <h> przed tabelą?

<caption> jest semantycznie powiązany z tabelą, co jest lepiej interpretowane przez technologie wspomagające (np. czytniki ekranu) jako jej oficjalny tytuł. Nagłówek <h> opisuje raczej całą sekcję, w której tabela się znajduje.