Ostatnio edytowany:

caption

Autor: Virtual Patriot

Przeznaczenie elementu caption

Element caption reprezentuje nagłówek dla treści reprezentowanej przez zawartość elementu table, do którego należy dany element caption.

Dodatkowe techniczne informacje o elemencie caption

kategoria ogólna

brak

kontekst zewnętrzny
jako pierwszy element dziecko elementu table

Przykładowy Kod HTML

<table>
  <caption>Ilość przedmiotów w magazynie</caption>

  <thead>
    <tr>
      <th>przedmiot</th>
      <th>ilość</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th>szafa</th>
      <td>10</td>
    </tr>

    <tr>
      <th>stół</th>
      <td>5</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <th>suma</th>
      <td>15</td>
    </tr>
  </tfoot>
</table>

Kontekstem zewnętrznym przykładowego elementu "caption" jest element "table", dla którego wspomniany element "caption" jest pierwszym elementem dzieckiem, dlatego w tej sytuacji wspomniany kontekst zewnętrzny, czyli element "table", jest prawidłowym kontekstem zewnętrznym dla elementu "caption".

kontekst wewnętrzny
zawartość opływająca, lecz nie element table jako element potomek

Przykładowy Kod HTML

<table>
  <caption>
    <p>Ilość przedmiotów w magazynie</p>
    <img src="przedmioty-01.png" alt="różne przedmioty">
  </caption>

  <thead>
    <tr>
      <th>przedmiot</th>
      <th>ilość</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th>szafa</th>
      <td>10</td>
    </tr>

    <tr>
      <th>stół</th>
      <td>5</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <th>suma</th>
      <td>15</td>
    </tr>
  </tfoot>
</table>

Kontekstem wewnętrznym przykładowego elementu "caption" są wyłącznie elementy HTML, które należą do kategorii zawartość opływająca. Ponadto elementem potomkiem wspomnianego elementu "caption" nie jest element "table", dlatego w tej sytuacji wspomniany kontekst wewnętrzny, czyli element "p" oraz element "img", jest prawidłowym kontekstem wewnętrznym dla elementu "caption".

wymagane elementy dzieci

brak

wymagane atrybuty

brak

składnia HTML

<caption> ... </caption>

pominięcie tagu na początku

nigdy

pominięcie tagu na końcu

nigdy

CSS display

table-caption

Dodatkowe domyślne reguły CSS elementu caption

caption {
  display:table-caption;
  text-align:center;
}

Interpretacja elementu caption

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak